Text III

You’re nearing the end of this course. This chapter just has some minor properties related to text. The next one has even more properties that only apply in very specific situations. And then, before you know, this course has reached its conclusion.

Writing Mode

This whole course, I’ve explained how page flow is “horizontal first” (left to right), then “vertical” (adding scrollbars).

Well … you can actually change that. The number of situations in which you want to is slim, but hey, you can.

The writing-mode property accepts four values.

• horizontal-tb = horizontal top to bottom (default)
• horizontal-bt = horizontal bottom to top
• vertical-lr = vertical left to right
• vertical-rl = vertical right to left.

The example shows a paragraph that starts at the left and flows towards the right. The text sits on a vertical baseline, instead of a horizontal one.

Text Overflow

In the chapter Text II, we already discussed many ways to break text and handle overflows.

There’s another property to help with this: text-overflow.

What’s the difference? What’s the advantage? It allows you to set a custom string to show that there’s more content, but it’s cut off.

Values are:

• clip: default, overflowing text is just cut off
• ellipsis: an ellipsis (...) is added at the end
• <string>: a custom string is added at the end

Of course, for this to show up, the text actually needs to overflow. As such, this only works if you force the container to a certain size and forbid text from extending out of bounds.

Text Transform

The text-transform property transforms the case of text. The value …

• uppercase makes the whole content uppercase
• lowercase makes the whole content lowercase

Again, this is nice for separating content from styling. Perhaps you have categories on your blog. Behind the scenes, you want these to be regular text (‘Thoughts’ and ‘News’). But in the design, they might look better in all capitals. So you merely visually transform it on the page, with this property.

Text Shadow

Finally, the text-shadow property adds any number of shadows to text, in a comma-separated list.

The shadows have the syntax: offsetX offsetY shadowBlur color.

Yes, the same syntax as the drop-shadow() effect from the filter element.

So why use this? Isn’t the filter enough? Good question. Yes, using the filter element is often what you want.

It is however more expensive (for the computer to calculate) as it wasn’t made specifically for text. Additionally, this property allows setting multiple shadows more easily.

This allows you … to create an outline around text.

The example below shows this. The outline is “faked” by adding a copy of the text to the left, right, top, and bottom. (Experiment! Try keeping just one shadow and increasing its size, see what happens.)

To better outlines and beyond!

It is, however, imperfect. Outlines work better around thick fonts and capital letters.

Fortunately, CSS has proposed a text-stroke property that would do this natively (and properly!)

At time of writing, it requires a prefix -webkit-text-stroke and isn’t supported everywhere. Nevertheless, it’s close enough that I want to show it.

When done well, outlines greatly increase readability of text, especially over images or busy backgrounds. When done poorly, however, they make text unreadable.