New Perspectives On Web Design

CHAPTER 9 The Next Steps for Web Typography

p {

hyphens: auto;

hyphenate-before: 2;

hyphenate-after: 3;

hyphenate-lines: 3;

}

CSS Text Level 4 Editor’s Draft from 2013^72 proposes the extension to

hyphenate-before and hyphenate-after in the form of a hyphenate-lim-

it-chars property which would take three values: the required minimum

for the total characters in a word; and the minimum number of characters

in a word before and after the hyphenation. The same draft renames the

hyphenate-lines property to hyphenate-limit-lines which at the time of

writing is supported in IE10 and Safari.

For now, the best results for the user are still achieved ither with manu-

al hyphenation. To manually hyphenate text, simply insert the soft hyphen

­ (or ­) wherever is convenient. If there’s a need for a word break,

the browser will insert the hyphen character. It works as advertised in all

modern browsers.

oto­rhino­laryngo­logy

p { hyphens: manual; }

CoMbining PSeuDo-eleMenTS wiTh The ConTenT PRoPeRTY

I’m a big fan of combining pseudo-elements with the content property.^73

Even though they are not supported in older browsers, we can use them to

achieve a better control over hanging symbols, quotation marks and multi-

level numbering.

72 http://dev.w3.org/csswg/css-text-4/#hyphenation

73 http://www.w3.org/TR/CSS21/generate.html