Underlining done properly

Abstract

This page is about creating extra markup with unobtrusive JavaScript to see if underlining can be done properly. The theory is that the underlining is applied as per normal CSS, then JavaScript reads the string, sets a parent span for certain characters where the span then adds the underline back in, then replaces the original element with the new version.

The obvious way would be to set the underline via CSS, then remove it for parts with JavaScript. This won't work though, as explained at Understanding Underlines.

Example

Bad: The quick brown fox jumps over the lazy dog. (Underline everything with <span class="u">)

Good: The quick brown fox jumps over the lazy dog. (Underline using lots of spans in source)

Javascript version:The quick brown fox, jumps over the lazy dog. (Uses JavaScript to add in <span>s)

Another Javascript version, using <p class="underline"> instead of <span>: The postman just rings twice, quickly and quietly.

All JavaScript versions below, with various id’s

Code Used

  1. <p>Bad: <span class="u">The quick brown fox jumps over the lazy dog.</span> (Underline everything with <span class="u">)</p>
  2. <p>Good: <span class="u">The </span>q<span class="u">uick brown fox </span>j<span class="u">um</span>p<span class="u">s over the laz</span>y<span class="u">do</span>g<span class="u">.</span></p>
  3. <p>Javascript version:<span class="underline" id="underline">The quick brown fox, jumps over the lazy dog.</span> (Uses <span>)</p>
  4. <p class="underline">Another Javascript version, using <p class="underline"> instead of <span>: The postman just rings twice, quickly and quietly.</p>
  5. <p>All JavaScript versions, with various id’s</p>
  6. <ul>
  7. <li id="whatever" class="underline whatever">abcdefghijklmnopqrstuvwxyz</li*gt;
  8. <li id="something" class="something underline">abcdefghijklmnopqrstuvwxyz</li>
  9. <li class="underline">abcdefghijklmnopqrstuvwxyz</li>
  10. </ul>
  1. span.u, span.underline {
  2. text-decoration: underline;
  3. }

See underline.js for the JavaScript code.

Update 2008-01-28: The JavaScript file now passes JSLint successfully on the "Good Parts" + Assume a browser settings. Another version has also been created that puts the underline function into a FORMATTING namespace (though this could easily be changed to suit your own structure): underline2.js.

Conclusion

Ideally the following letters should not be underlined, while the rest is: q, j, p, y, g and comma (i.e. all descenders). This can be done by non-intrusive JavaScript reading a string, adding in child spans where appropriate, and spitting it back out ‐ an ideal non-critical use of javascript. With JavaScript disabled, the user simply sees underlining as per normal. Implementation is easy - simply link to the script in the head as usual, and apply a class="underline" (though even this is easily configurable in the script) to anything that should be underlined properly. Even works for elements with multiple classes!

Tags