Table Responsiveness Tip #2: Using shy for soft-hyphens

As a colleague pointed out regarding the optional line-breaks in previous article, a more natural way of breaking up a compound word visually is using a hyphen (-).

More specifically, an optional hyphen, aka the soft hyphen which in HTML can be used as $shy; ­

Apply them where you wish the break to occur:

<thead>
 <tr>
 <th>Voor&shy;naam</th>
 <th>Achter&shy;naam</th>
 <th>Geboorte&shy;datum</th>
 </tr>
</thead>

And the result is now shown with optional hyphens:

According to QuirksMode $shy; is supported now by all the major browsers.

Table Responsiveness Tip: Adding Line-Breaks in Table Headers

You might all know the <br> tag which causes a hard line-break, but did you know you could also use an optional line-break?

It’s called <wbr>

I causes a potentional line-break if you have long words in your HTML which the browser can use to break on. This has been finalized in HTML 5.

Where could you possibly use this? Well, for table headers for instance.

Most of the longest English words are not likely to occur in general text, and headers with multiple, small words – such as Start Date, First Name etc – are pretty common.

When using business- or technical lingo, or non-technical present-day text in other languages, you might not be so fortunate. Take the same labels in Dutch (NL).

<thead>
    <tr>
        <th>Voornaam</th>
        <th>Achternaam</th>
        <th>Geboortedatum</th>
    </tr>
</thead>

The Dutch just tend to use compound words – which are words such as grandmother, footprints, weatherman etc – a lot. Labels can become longer than the associated content in the table cells, which causes the table not to be that responsive anymore on smaller screens because the browser doesn’t know how to break long words anywhere.

Let’s adjust to a smaller screen size:

The browser naturally wraps the English words at the space between the words, so the English First Name and Last Name headers wrap perfectly onto multiple lines. Although the content of the table still fits the screen, the Dutch compound headers do not wrap and horizontal scroll bar appears earlier than needed 🙂

Now this is where <wbr> comes in – you can add these in the compound words where you naturally would want to break it up if space becomes sparse.

Let’s see the new HTML:

<thead>
    <tr>
        <th>Voor<wbr>naam</th>
        <th>Achter<wbr>naam</th>
        <th>Geboorte<wbr>datum</th>
    </tr>
</thead>

And the result is what we want: a non-visible break which kicks in when needed.