S5 Validity
Published 20 years, 3 weeks pastOver the past few days, I’ve gotten a few complaints about S5 breaking in one browser or another—IE6 and Safari got the most mentions, but there were others. As an example, there was a report that the slide show would just stop working after a certain number of slides. In every case I’ve seen so far, these problems have been caused by invalid XHTML.
The most common validation problem I expect people to run into is with the structuring of lists. For example, suppose you want two levels of lists on a slide. You do it like this:
<ul> <li>point one</li> <li>point two <ul> <li>subpoint one</li> <li>subpoint two</li> </ul> </li> <li>point three</li> <li>point four</li> </ul>
Notice how the nested list is inside the li element? That’s correct. You should never put nested lists between list items on the ‘outer’ list, even though a lot of people have made that a habit. The only element that can be a child of a ul (or an ol) element is an li. That’s it. Anything that needs to be ‘nested’ goes inside one of the list items.
Alternatively, you can put structures after the list, if that’s what you want. As an example:
<ul> <li>point one</li> <li>point two</li> <li>point three</li> </ul> <pre> ...code sample... </pre>
Nothing wrong with that, as long as you keep the side content inside the <div class="slide">...</div> element. Or you could put your pre inside the last list item. It’s really up to you.
Remember that S5 stands for “simple standards-based slide show system”. That’s not just marketing: the CSS and scripts pretty much depend on valid markup structures. If the markup is invalid, it will very likely lead to confusion and unexpected results. In other words, violate the standards and they’ll violate your slide show. There’s a certain poetic symmetry in that, I think.
(And yes, I do know that as of posting, this entry doesn’t validate. Believe me, the irony is not at all lost on me. This happened because I haven’t gotten around to fixing WordPress so it strips HTML before inserting the entry title into the title element. I ranted about the problem a while back… and it will eventually get fixed. Possibly when I upgrade to the next version of WP.)
Comments (12)
Maybe browsers should implements something like document.isValid() so you can just go
if (document.isValid() { … } at least for XHTML/XML. Mozilla already does this IIRC for XHTML served with the proper content type.
Amusingly, TeX does it the “HTML-wrong” way and lists may not be a part of a list element.
\itemize{\item{blahitem}
\item{blahitem}
\enumerate{
\item{blah point one}
\item{blah point two}
}
\item{blahitem}
\item{blahitem}
}
(And hereby I hope I remember the macro names properly!)
AFAIK, The item command doesn’t take any (mandatory) arguments (at least in LaTeX). The item content then continues until the next item command is encountered. Hence the sub items are logically part of their parent.
http://www.giss.nasa.gov/latex/item.html
About that HTML-in-places-it-shouldn’t-be problem…
Maybe a bit of unicode would help in this case?
Eric,
I have a solution to your issue with wordpress.
If you go to your wordpress directory and open index.php (assuming it hasn’t been renamed), with in index.php look for:
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>Then remove it and replace it with:
<title><?php bloginfo('name'); ?><?php strip_tags(wp_title()); ?></title>That should fix it.
I’m only happy to be able to help someone a little who has helped me so much more.
The previous comment isn’t enough. What about feeds, email notification of comments, (default) permalinks (as mentioned in the post), etc.? Also, what about the blog name itself? I’ve named mine “y^0?”, where the 0 is superscripted. This screws up quite a few different things that I’ve never made the time to properly fix (it’s been mostly hacked away by editing the bloginfo() function, but it’s not completely fixed).
I’ve got to say, Eric, that the slideshow looks fantastic in Firefox PR. Simply amazing!
But then again, so is all your work; I learned a great deal about CSS from your articles. This implementation of it is astounding; as I don’t have PowerPoint but do have constant ‘net access, guess what I’ll be using for presentations from now on? . . .
Can´t i put this :
Sorry is IS that you mean … My ensligh isn´t perfect at all ^^ !
Jeff:
It wasn’t meant to be an entire lecture on every step needed to remove html tags from the site, the rss 0.9, rss 1.0, rss 2, atom feed etc title,
It was a basic here’s the quickest way of removing html tags from your page title, i’m sure he can figure out how to apply it to wp-rss/atom and the blog name.
Another quick question why is it that you have <b> in your allow tags list?
In regards to the second comment:
I don’t know TeX very well at all, but it seems to me that you might treat the braces as start an close tags. Therefore, instead of:
\itemize{
\item{blahitem}
\item{blahitem}
\enumerate{
\item{blah point one}
\item{blah point two}
}
\item{blahitem}
\item{blahitem}
}
could you do:
\itemize{
\item{blahitem}
\item{blahitem
\enumerate{
\item{blah point one}
\item{blah point two}
}
}
\item{blahitem}
\item{blahitem}
}
Trackback ::
gatorace.com
Alternative Presentaions
I’m stealing from other blogs today, but that’s where the best information comes from these days.A post on “Joel on Software” refers to a new presentation option created by CSS guru Eric Meyer. S5, as it has been named, is…
FYI: as a proof-of-concept I ported S5 into MovableType. You can view the results here http://kwc.org/presentations/. If people like, I’ll write up some better instructions on how it was done (quite simple, though requires the MTKeyValues plugin).
Thanks for creating this. I had done a presentation using MovableType as the engine before, but this is orders of magnitude better and accomplishes the same goals (Web-readable semantic markup, Web-accessible and editable).