Ted's Computer World HTML & CSS
Tips and Tricks


Early on in my hobby as a webmaster, I discovered that at least one browser handled hyphenated words incorrectly in that, on a line-break, the hyphen sometimes was placed at the beginning of the new line rather than where it belonged at the end of the current line; and that looked really stupid.  The problem still exists, at least with one modern browser; and one is too many for me.

I demand that my text be rendered properly, and so should you; but what is the solution?  Suppressing auto-hyphenation in general is only a partial fix; for what does one do with a compound word such as 'left-handed', or a construct that must be hyphenated to satisfy the requirements of grammar, such as 'auto-hyphenation'?

Also, I use the em-dash (—) character a lot; and it never would do to have it nonsensically placed at the beginning of a line.

Countless coders have resorted to the use of <nobr> to solve these issues.  The text <nobr>non-compliant</nobr> always wraps to the next line in its entirety if necessary.  Problem solved, right?

Wrong! <nobr> is not and never was a valid HTML tag.  The fact that certain browsers support bad programming practices in no way justifies its usage.  As principled coders we aspire to greater things, including the requirement that our markup be validator-compliant and therefore browser-friendly.  To that end, one seemingly simple solution is a CSS class that accomplishes the same effect:


Text is protected from errant hyphenation thusly:


I say "seemingly simple" because I have seen numerous online questions about how to handle this matter.  Albeit tedious in its application, I formerly used that very code thousands of times; for it still was worth it to me to prevent my lines from being broken in the wrong place.

Besides ordinary word-hyphenation, there are certain other constructs that cause some browsers to choke — namely, ones that contain unexpected characters.  One example is 'X(0)'.  If unprotected, this might be displayed as 'X(' on one line and '0)' on the next.  Anything containing a minus-sign is vulnerable.  Something such as '>,' also can fail.

To prevent such silliness on your own pages, this browser-bug needs to be accommodated.  (Note: certain standard strings such as time-designations, currency, and plus-signs seem not to suffer from this problem.)  This brings us to:


The <s> tag was originally intended to indicate 'strikeout', or text with a line through it.  It was deprecated in HTML 4.01, but reinstated in HTML5 to indicate text that is 'no longer relevant'.  One is expected to use <del> now for the strikeout function.  That is perfectly fine; for now all those tedious "nobr" style-designations can be replaced by a simple <s> and </s>.  Just create the following style:


If you actually do compose most of your own markup, then trust me — this tool is the best shortcut imaginable.  Typing a one-letter tag is so easy.  Now, instead of using the lengthy string <span class="nobr">, you can simply enter <s>.  Similarly, the accompanying </span> is reduced to </s>, for a total savings of 19 characters every time the line-wrap inhibitor is used.

Once you realize how easy it is to keep your pages in order now, you will find yourself using <s> religiously.  Text constructs such as "9:30 a.m." or "x2 + y2 = z2" or "February 2", each of which would be best-displayed on on a single line, now can be handled with ease.  For what it's worth, I have used the <s> tag 43 times on this very page!  'Nuff said?

Important:  There is a caveat.  Unlike the other tags discussed thus far, the properties of the <s> tag are not inheritable.  Its definition must be included in the <style> section of any page on which it will be used, which is nearly every one.



It was only after redoing a thousand web pages to change over from the <span class="nobr"> format to the suggested <s> and </s>, that I discovered the <q> tag (see the prior article).  Using it actually would be more efficient than <s> because its properties are inheritable, meaning that nothing would need to be placed in the style section of any pages.  Just include the following in your ALL.CSS file and forget about it:


Despite my quest for the ultimately compact setup, however, I believe that I will stick with <s> if only from force of habit, and use <q> for other things.  Besides, the letter "s" is easier to type than a "q".

Go Back