CSS for the LDP?

Saqib Ali asks: "Over at The Linux Documentation Project there is a lengthy discussion going on about whether to use CSS (Cascading Style Sheets) to improve the presentation of the documents. I support the use of CSS to improve the image/formatting of the document, and improve readability. I understand that content is more important than the presentation, but it can't hurt to improve both. There are others who think we should not get involved the presentation layer, and mainly concentrate on the content. Since, most Slashdot readers are Linux users, and might have visited the LDP once or twice, I would like to poll them on what they think about implementing and using nice CSS for the documents on the Linux Document Project website. I've written a CSS for this purpose that is available here, and some sample documents available in this weblog. Any thoughts? Any pros and cons on using CSS to improve presentation?"

Comments

What about Slashdot?

[Anonymous Coward]

How about some CSS for Slashdot? Seriously.

Re:What about Slashdot?

[Thing 1]

As long as we can use deCSS to remove it...

Ow, stop hitting me!

Re:What about Slashdot?

[Anonymous Coward]

How about this and this?

Re:What about Slashdot?

[orthogonal]

How about some CSS for Slashdot? Seriously.

Let me second Mr. Coward, and remind Slashdot's readers that we saw an article posted here several months ago showing several CSS formats especially designed for Slashdot.

I, in particular, would very much welcome CSS replacing nested tables on Slashdot, not least because I sometimes read Slashdot on my Zaurus. The default Zaurus browser, Opera, while it has a mode designed for display on smaller devices, spectacularly screwed up that mode for tables, as it doesn't line break at the end of table rows.

Whether you're using a Zaurus or a Jumbotron to view Slashdot, odds are you can write a (possibly overriding) user style-sheet that conforms to your display better than the default Slashdot display does.

Also, a properly written stylesheet likely means smaller pages, because the markup will be centralized in the stylesheet. For a site like Slashdot, with a lot of page hits, this might mean a significant bandwidth savings over time.

Sounds like a win-win to me.

why not?

[untermensch]

Obviously content is the most important thing, but what possible reason could there be for not improving the presentation as well? Unless it somehow cuts into the time needed to prepare content (which is certainly shouldn't), it only makes sense to make things pretty.

What?

[93 Escort Wagon]

I know this is a bit of a tangent, but...

"Most Slashdot readers are Linux users" - seriously? I know there's a strong anti-MS contingent, but this can't be true. Is there data to back that up or are you just talking out of your, er, hat?

Excellent idea.

[Anonymous Coward]

I fully support the idea. It's not a matter of "getting involved in the presentation layer," as opposed to the content. That's, after all, the whole point of CSS... To separate these concepts, and make them independently manageable.

It would be simple for a team to develop CSS files in concert with those who are already doing a great job developing consistent, predictable content. This project lends itself easily to improvements with CSS.

I'd only recommend that multiple CSS files be created, and people be allowed to choose one that suits them, or none at all.

Re:Excellent idea.

[bbsguru]

The idea is the thing, right? It's all about the content after all..

No, it isn't. It's also about communication, and to the extent that better presentation helps communicate more clearly, CSS should be used. The best ideas that are never heard matter not.

Don't let the presentation get in the way of the content? Exactly. But don't let the lack of presentation take away from it either.

Of course! But it may not help a ton

[Deraj DeZine]

Of course they should use CSS to make the pages look better.

Unfortunately, CSS won't solve the root of the problem: non-semantic HTML. I've re-done several sites to make use of the so-called semantic HTML tags (em, strong, etc.) and to get rid of nasty table-abusing layout tags. CSS is necessary to make this transition, but readability on non-desktop browsers (phones, terminals) can only really be improved by switching to layouts using semantic HTML tags and divs for layout.

One last point I'd like to get out there is that there are many console browsers (links, w3m, but NOT lynx) that do a fine job displaying abused table layouts. Unfortunately, the console usually has so few columns that everything just ends up looking squished, while as my div-layout pages are easy to read.

Done right, CSS can help multi-platform use.

[ron_ivi]

Done right, CSS is a great way to separate presentation from display.

The best examples online are still probably this and this and even and slashdot style

Note that all those pages had the exact same html. Only the css changed. In their site (read the page) they have styles for all sorts of displays including wireless friendly ones.

Perception is more important than reality.

[steve buttgereit]

I can't remember who said that long ago, but it is an important axiom.

Many readers will tune out or find it even daunting to jump into a document that doesn't make an effort to present itself well. Even when the content is top notch, weak presentation will leave a poor first impressions placing the author on the defensive from the get-go. That's not to say good presentation will save a bad document... but every little bit helps!

If using CSS makes the documentation look more professional, more organized, easier on the eyes, and more consistient in presentation I say go for it. Just don't fall into the mistake of overdoing it and continuously changing the presentation... then effort will be wasted.

One final point: corporations (including Microsoft :-) ) pay lots of money to be sure documentation is clear and attractive. Without commenting on success, they do spend those dollars and make the effort for a reason.

Cheers!

Re:Silly

[MrDelSarto]

Only this community of emacs users at GUI-less workstations users would think it better to not use CSS.

No, this is exactly who wants people to use CSS. If people separated content from layout, imagine how much of a better place the world would be. Personally, this is why I have gravitated to DocBook so much recently. On the extreme end, you have Microsoft Word, where layout and presentation is completely embeded with your actual information. LaTeX is better, but you still end up with \parskips and things around. DocBook may be verbose, but you have all your content separate and then mark it up the way you like for presentation in a completely separate style sheet.

Re:Here is what needs to be done

[aftk2]

Best post ever. Let's check the scoreboard.

• "professional" anything. +10 points
• Advocates using "Lynx/Links", "Dillo", "Netpositive" and, my favorite, "Geckos" to test websites. +15 points
• "CCS'ed" documents. +5 points
• "also include the FONT SIZE, bgcolor and Bold or Italics tags." + 50 points. (apparently Slashdot subscribes to this ideology)
• "use HTML markup for heavy layout stuff, because most of the browsers above won't be able to handle it." +1,000 points
• As of my previewing, being scored at +3 insightful, +1,000,000 points

I am very impressed.

Gentoo docs are a good example

[urbieta]

You can see in gentoo's website that they have a very nice consistency in their documentation, it really helps the human eye find what's needed among all data, so Im all for it

you go ldp!

Printing: Another Advantage of CSS

[TheViewFromTheGround]

I think it goes without saying that Linux folks should embrace CSS. It's sort of a no-brainer. That being said, another advantage is style-sheets for different media. In particular, LDP pages are likely to be printed (I printed one the other night for a Linux install where I didn't have a live Internet connection), and even with all the problems, a smart designer can make very nice print stylesheets that use serif fonts (not so good on screen, very good on paper from a readability standpoint), add banners that print on each page, etc. This assumes a well-structured document that the CSS is styling, but that's a big advantage.

Docs should be semantically marked up anyways

[count0]

I think any CSS detractors are missing the point - docs should be marked up consistently, with H1, H2, etc. Particular semantic types (like author) could be added as styles for particular tags e.g. Adding CSS would be relatively simple on top of semantically structured docs.

Re:Docs should be semantically marked up anyways

[wheany]

I knew there had to be someone who had some sense left. This was the real point from the start. Assuming the documentation is already in html, if you can't just "drop in" some CSS to make it prettier, there is something wrong with the markup.

And if that's the case, you need to fix the html first.

Re:Here is what needs to be done

[xeaxes]

The important thing to remember here is that the new CCS'ed documents should render well on older browsers. For example, if you use CSS to give a background color to the document or to a table cell, ALSO include the equivelant HTML tag. If you use CSS to give weight to text, also use the equivelant HTML tags (CSS always have precedence over tags). So for example, also include the FONT SIZE, bgcolor and Bold or Italics tags. Also, make sure you don't make make tables on CSS, use HTML markup for heavy layout stuff, because most of the browsers above won't be able to handle it.

No, this is an incorrect view. CSS is about separating CONTENT and PRESENTATION. That means no font, bold, or italic tags. This is all done in the style sheet. Additionally, font tags, etc always take precidence over style sheets.

By using proper XHTML (or HTML 4.0) and sticking to valid tags (heading tags, emphasis, lists) the page will automatically degrade nicely and be viewable in ALL BROWSERS. This includes lynx and other text only browsers.

The browsers that support CSS will use it, and it will look prettier for them, and browsers that do not support it will still display the content perfectly even though fonts, etc could be wrong.

Also note that by using CSS, the site will be easier to maintain. The removal of font, bold, italic, and underline tags will also make the site lighter and faster. Note that CSS is cached by the browser, so that file only has to be downloaded once.

Please look at The CSS Vault and CSS Zen Garden as great examples and references. CSS Vault has page after page that justify the use of CSS and valid XHTML. Also notice that if the browser cannot use CSS, the site still renders all the content properly.

An important additonal note: By using proper XHTML and CSS, the disabled will have access to the site in a much easier fashion due to the lack of tables being used for markup (tables only for data!), and the simpler code. This is for special screen reading browsers.

Re:Here is what needs to be done

[TheViewFromTheGround]

You won't believe it how many Linux/Unix users use Lynx and Links. So please, think of them.

Ahem. This is completely silly. Well structured documents--a prerequisite for good CSS--degrade *better* in browsers like Lynx because the underlying tag structure reflects the logical document structure.

The important thing to remember here is that the new CCS'ed documents should render well on older browsers. For example, if you use CSS to give a background color to the document or to a table cell, ALSO include the equivelant HTML tag.

Why would anybody do that? Modern browsers like Firefox are actually zippier, even on older hardware, than Netscape 4.xyz. A designer should think about how to make the page degrade because many of the browsers you mentioned choke on some CSS. But there are lots of tricks for hiding the CSS from those browsers, and if you do, then the user still gets a nice, logically structured document.

Anyway, CSS isn't all that hard to do right. I just did a site that looks really nice and polished and works in every browser (IE, Moz, Firefox, Safari, Camino, Konq, Opera, Lynx) on tons of platforms (Windows 98/ME/2000/XP, Linux, OS X, OS 9)...and it worked on the first try -- I didn't have to change a single thing (rsvp.uchicago.edu). I tested it on all possible combinations of those I could think of and it looked nice (and in the way I expected) on all of them.

Finally, I can't imagine a situation, except using minimal HTML 4, which would be silly, because it'd practically be XHTML at that point, where it would be heavier that the XHTML/CSS equivalent. Even if the stylesheet is relatively large, say 300-400 lines (I'm pushing 500 on a site I'm working on), it typically downloads once and then gets cached, at which point all subsequent pages that use that stylesheet will only download the nicely structured document.

Re:Great examples as to why they SHOULD NOT use CS

[Cameroon]

Gee, that's funny, I could read it perfectly fine in IE 5.2 on Mac OS 10.3. Wonder why that might be. Oh, yes, I turned off CSS in the browser.

Normally I wouldn't post a reply to something like this, but the whole shitty, breakable design that is so much of the web is in large part due to supporting pathetically old and broken browsers and proprietary extensions. NS 4 anyone?

Mac IE 5.2 did way better than previous Mac browsers with CSS but it is by no means some sort of quality benchmark. ON TOP OF WHICH, you could easily write CSS that does something to make a site look better, but is still simple enough for Mac IE 5.2. It's rather ridiculous to take a broken browser and say "look, I know it's borked but look, it doesn't render this site correctly". What makes this even better, is that the site is entirely usable because thankfully MS did include the ability to disable style sheets (or use your own) in Mac IE 5.2.

There's no reason not to use CSS unless it means that someone who would otherwise have been writing documentation is now writing CSS. I believe it more than likely, however, that there are people who would be willing to work on the CSS but who would otherwise not be involved in the project.

W3C Core Styles

[driptray]

Sure, use CSS! But if you're short of time/expertise, don't reinvent the wheel! Use the W3C Core Styles.

And if none of those style sheets quite tickles your fancy, you can use one as a base to modify.