Blogs, bulletin boards, community sites—the whole web2.0© rely on the same thing: user input. On the web, user input usually means HTML.

Some simple HTML is easy to learn, like <b>bold</b> and <i>italics</i>, but other techniques (like links, lists, and blockquotes) can be a little more daunting. For a site owner, badly written HTML can break a site.

So what are you, the site owner, to do? You shouldn’t have to learn all about HTML yourself (unless you want to), and can’t force your readers to learn HTML just to post feedback.

There are a few apps that can help people “mark up” text, and these work well, in general. The drawbacks are they can be bulky or hard to use, and suffer from technical issues including lack of browser support and buggy performance. These drawbacks make them more suited for intranets and administrators, and less suited for the rest of the World-Wide Web.

Lately, another method has resurfaced: server-side markup generators. They work behind the scenes to change easier markup into HTML. Anyone familiar with bulletin boards will know about BBCode; it generally worked like this:

[b]Bold[/b], [i]italics[/i], [u]underlined[/u]. will produce bold, italics, underlined.

But this is not really enough. Its really just HTML with replaced with [ and ]. BBCode also can’t do some of the the advanced things (lists, blockquotes) HTML still has to offer.

Along came Textile

Here at Black Dog, we use Textile to solve this problem. It is a server-side markup generator, like BBCode, but it has all of the bells and whistles you need to produce good HTML. Instead of using HTML-like syntax, it uses easy-to-remember symbols. The best part is, the symbols make sense before they are turned into HTML.

<strong>bold</strong>, <em>italics</em>. becomes bold, italics.

Textile also handles lists and sublists, ordered and unordered:

It also helps you out with the little things: double quotes and single quotes are made “curly,” and dashes—I love those helpful little guys—are made into their correct typographical charaters.

The best part: Textile doesn’t ruin good HTML, so you can mix-and-match HTML and Textile if you want to, but it quietly throws out bad or broken HTML so your content stays nice, clean, and readable.

Everybody wins

As a site owner, you have some additional protection against buggy HTML from users or even yourself. As a user, you can make make your text stand out without learning a bunch of HTML tags. As a reader, the web will be a little easier on the eyes.

Further Information

Textile’s entry on Wikipedia
Advanced Textile reference (hobix.com)
Textpattern (CMS built with Textile)
Dean Allen’s home page (Creator of Textile and Textpattern)

Typography on the web resembles print typography only superficially. There are important limitations with units, fonts, styles, and effects.

In web design, there are a few common units used for setting the sizes of elements. They are:

	percentage
em	em is a multiplier applied to the current font size: 1em is equal to the current font size, and 2em means 2 times the current font size.
pt	points, 1 pt is the same as 1/72 inch
px	pixels, a dot on the computer screen

For a full list, see W3Schools.

The rub is that all of these units are converted into pixels for display on the screen. Each OS and browser use a slightly different algorithm for this conversion; generally 9pt=12px but that will vary depending on the settings of the individual computer.

These differences are relatively minor (1 or 2 pixels) when applied to text alone, but can become unbearable when specifying line height, letter spacing, word spacing, etc. When displayed on-screen, extra care must be taken to consider these uncontrollable discrepancies in font rendering algorithms.

Therefore, the following css units are generally used by Black Dog Studios for setting font sizes on fixed-width layouts:

font-size: px
line-height:
letter-spacing: em
word-spacing: em
margins: px (sometimes em)
padding: px (rarely em)

We of course do our best to match design comps which use points or an unknown unit; however Black Dog Studios cannot guarantee pixel-perfect (or sub-pixel-perfect) accuracy when making these conversions.

The following links are to articles and tools related to the conversion between px, pt, em, and %.

• 
  http://sureshjain.wordpress.com/2007/07/06/53/
• http://www.faqts.com/knowledge_base/view.phtml/aid/19491
• http://archivist.incutio.com/viewlist/css-discuss/78195
• http://riddle.pl/emcalc/
• http://www.jerekdain.com/fontconversion.html

The problems with the new solution are many. The ones that concern me:

• After just a few versions, the browser will be hopelessly bloated and bogged down trying to maintain several versions with all of their features and bugs
• The point of the solution is to make browser bugs immortal. But will there be bugs in the bugs? Will the peekaboo bug or hasPosition act differently on the embedded IE6 from the original IE6? My head hurts just thinking about it.
• Like it or not, web design is a craft. The building industry doesn’t give special exceptions to architects who want to build a skyscraper out of wood just because they’ve always built birdhouses and wrap-around decks. Instead, they tell the architects to learn about steel and concrete and glass or find a new industry.

Those issues aside, maybe version targeting is not all bad (God help me, but I trust that Eric Meyer). But I agree with Ethan Marcotte that the solution is elsewhere; and by elsewhere i mean right here.

It’s not complicated. The flaming will die down. The Web will be saved. Our job – our craft will get a little easier and a little better.

The Solution

Microsoft should release stand-alone downloadable versions of Internet Explorer.

It should also give IE7-8-9-10 the ability to “nest” browsers in the parent browser window, just like Firefox already has. Sure, the <meta http-equiv="X-UA-Compatible" /> tag could still be used to automatically specify the IE version, and the user could be asked if they want to view the file in the pre-selected X-UA-Compatible version or in the current (IE8-9-10) version they have now. Then, if the version is not installed, they could choose to install it or go ahead and view it in some other installed version.

IE7 has a plugin architecture; IE8 should too. The only thing missing is the standalone IE releases (MultiIE already does it for XP, but it fails horribly in Vista).

I think this gives all of us the best of all worlds: Corporations who need a certain version of IE for their intranet will have it. Users who want cutting-edge compatibility and speed will have it. Developers who need a solution for future-broken sites under IE11 will have it. Standardistas who need those versions to browser-test for backward compatibility will have them.

Freezing all future versions is not the answer; we will be sorry. Let us pick-and-choose the fossilized browsers as we need them and we will all have what we want.

Everything about this event was awesome. Venue, speakers, subject, attendees, everything. I learned something new from every speaker, and was sometimes surprised by what I learned.

Jared Spool talked me off the ledge of examining statistical data from usability studies. Instead, he gave me the advice that I should instead work on introducing our own usability studies into a project. “If somebody goes in not wanting to believe the data, they won’t.”

Also, Jeff Zeldman sat at our table and gave us business advice.

More to come.

Here is the proof:

For those of us who care about the semantic web, standards, or the W3C, The Web Standards Project needs to be in your feed reader. I’ll admt, it wasn’t in mine; until now that is.

The design of the site is awesome, and they eat their own cooking. (Plus, they use WordPress!) They employ css tricks I have seldom seen used before, and consistently use semantic tags (<abbr>, <q>).

The best trick of all: the sibling selector. Why? Because it allows for truly semantic output with the leanest markup possible. Before, I might have marked up a simple content block like this:

<div class="content"><br />

   <h1>Title</h1><br />

   <img src="url" alt="pic related to story">

   <div class="block"><br />

      <p class="intro">This is an introduction sentance or paragraph.  It is supposed to represent a blurb about the article below.</p><br />

      <div class="mainbody"><br />

         <p>content</p><br />

         <p>content</p><br />

         <p>content</p><br />

         <p>content</p><br />

      </div><br />

      <p class="footer">Footer.  Date or links, or whatever.</p><br />

   </div><br />

</div>

This way, all of the elements have class hooks. CSS is applied using the classes and simple hierarchies:

div.content { }

div.content h1 { font-size:1.8em; }

div.content div.block { border:1px solid black; }

div.block p.intro { font-weight: bold; }

div.block img { float:right; }

div.block div.mainbody { clear: both; }

div.mainbody p { color: #006; }

p.footer { font-size: 0.7em; color: #888; }

Class hooks are helpful, but not really needed if you use sibling selectors! You, too, can write super-styled code without the additional markup headache!

<div class="content" ><br />

   <h1>Title</h1><br />

   <img src="url" alt="That image again"/><br />

   <p>This is an introduction sentance or paragraph.  It is supposed to represent a blurb about the article below.</p><br />

   <p>content</p><br />

   <p>content</p><br />

   <p>content</p><br />

   <p>content</p><br />

   <p class="footer">Footer.  Date or links, or whatever.</p><br />

</div>

See, that code is cleaner and easier to maintain. The CSS required to

div.content { }

div.content h1 { font-size:1.8em; }

div.content p { color: #006; }

div.content h1+p { color: #000; font-weight: bold; clear:both;}

div.content h1+img { float:right; }

div.content img { float:left } /* Just for fun */

div.content p.footer { font-size: 0.7em; color: #888; }


	
That’s all there is to it.  Now, the line between content and design is darkened.
	
One thing: the class hook remains on the footer element.  This is because adjacent-sibling selectors do not work in reverse.  The selector applies only to the element after the +, and there is no selector that applies to a previous adjacent-sibling element.
	
Sources


Eric Myer wrote about them.

The W3C recommends them.

John Gallant and Holly Bergevin say IE7 supports them.