Chapter 11. Text and fonts – Hello! HTML5 & CSS3: A user-friendly reference guide

Chapter 11. Text and fonts

 

This chapter covers

  • Adding custom fonts to your pages with @font-face
  • Detailed control of font rendering with font-feature-settings
  • Improving readability with CSS columns
  • Controlling text wrapping and overflow

 

Despite being designed from the start as a way to share text documents, the web has traditionally had poor typography. In this chapter, you’ll learn how all that is changing as CSS3 brings in many new features for control of fonts and text.

Basic web fonts

Typography, the art of setting and arranging type, is a big part of design; a particular typeface is often as much a part of a company’s image as its logo or corporate color scheme. But in CSS2, there’s basically no way to specify a font that will be used by all users across all browsers and operating systems.

Typography on the web has always been limited because of its client-server design—the font has to be on the client machine, where the rendering is done, and not on the server. This is what leads to standard font-family declarations like this:

The idea is that Arial (a Microsoft font), Helvetica (the standard Apple font), and sans-serif will all look relatively similar—but is that true? Instead of specifying a set of fallbacks, let’s compare what each font by itself looks like in some different browsers. Here’s the standard CSS rule split into three:

h1 { font-size: 32px; font-weight: bold; }
div:nth-child(1) { font-family: Arial; }
div:nth-child(2) { font-family: Helvetica; }
div:nth-child(3) { font-family: sans-serif; }

To see the results, let’s use this simple bit of markup repeated three times:

<div><h1>Hello! HTML5 and CSS3</h1></div>

Here’s what the three elements look like in Firefox on my laptop. As you can see, there’s quite a variation in both size and thickness.

But that’s not the only interesting thing going on. Here’s the same page in Chrome on my laptop. All the fonts look the same!

To add to the confusion, I’ll now reveal that my Linux laptop has neither the Arial nor the Helvetica font installed, which is more obvious in this screenshot of the same page in Opera.

Opera falls back to Bitstream Vera Sans for Arial but renders the browser default font—which is serif rather than sans-serif—for Helvetica. Chrome renders all three the same because it falls back to Bitstream Vera Sans for Arial and Helvetica and also uses it for the default sans. Firefox tries to use a font similar to the requested one, so it replaces Arial with Liberation Sans and Helvetica with Nimbus Sans L, and it uses Bitstream Vera Sans for the default sans font. You can try it on your own system with listing ch11/font-comparitor.html. This shows that web authors have almost no control over what fonts end up being used in their pages. As you can imagine, that drives some designers nuts! It’s one reason you’ve seen so many bad hacks over the years that replace text with images or Flash movies. But there’s now a practical standards-based alternative: @font-face.

Gaining control of fonts with the @font-face rule

The @font-face rule allows you to specify a font to be downloaded with the web page in the same way as markup, images, and script. Here’s a basic declaration to download the Liberation Sans Bold font:

@font-face {
    font-family: "Liberation Sans Bold";
    src: url(LiberationSans-Bold.ttf) format("truetype");
}

Browser support quick check: @font-face

 

Standard

Prefixed

4.0 -
3.5 -
4.0 -
10.0 -
3.1 -

Here are the declarations for the other two fonts in the earlier example:

@font-face {
    font-family: "Nimbus Sans L Bold";
    src: url(NimbusSanL-Bold.ttf) format("truetype");
}
@font-face {
    font-family: "Bitstream Vera Sans Bold";
    src: url(VeraBd.ttf) format("truetype");
}

Now that the downloadable fonts have been defined, you can reference them in CSS rules like any other font:

h1 { font-size: 32px; font-weight: normal; }
div:nth-child(1) { font-family: "Liberation Sans Bold"; }
div:nth-child(2) { font-family: "Nimbus Sans L Bold"; }
div:nth-child(3) { font-family: "Bitstream Vera Sans Bold"; }

These rules lead to consistent results cross-browser (except, of course, Internet Explorer 8 and earlier). Try it for yourself with listing ch11/font-face-1.html.

The browser has two options when bold text is needed: it can either use a bold version of the font if one is available or scale up the normal font to make it look bold.

Let’s start with some normal text using the Yanone Kaffeesatz font:

<p>Hello! HTML5 and CSS3</p>

Here’s the CSS:

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url(YanoneKaffeesatz-Regular.otf) format("opentype");
}
p {
    font-size: 32px;
    font-family: "Yanone Kaffeesatz";
}

Now add a couple of elements that will render as bold:

<p>Hello! <strong>HTML5</strong> and
<strong>CSS3</strong></p>

The browser doesn’t have a bold version of Kaffeesatz, so it adjusts the normal font to be thicker and wider.

Add another @font-face declaration. Notice that it uses the same font-family name, but it has a different URL and specifies a font-weight:

@font-face {
    font-family:
     "Yanone Kaffeesatz";
    src:
     url(YanoneKaffeesatz-Bold.otf)
     format("opentype");
    font-weight: bold;
}

The browser is now using the bold version of the Yanone Kaffeesatz font for the bold text. This is more compact and more cleanly rendered than the standard version of the font automatically adjusted to be bold. The same approach also works for italics, but using font-style instead of font-weight. Unfortunately Kaffeesatz doesn’t have an italic variant, so this example uses the thin variant:

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url(YanoneKaffeesatz-Thin.otf) format("opentype");
    font-style: italic;
}

With a minor adjustment to the HTML you can see three different fonts, all from the same family, in one paragraph:

<p>Hello!
  <strong>HTML5</strong> and
  <em>CSS3</em></p>

Font formats: EOT, TTF/OTF, and WOFF

The @font-face rule was originally introduced in an early draft of the CSS2 spec, but it was dropped back in 1998, mostly because of the lack of fonts with licenses that allowed web distribution.

Since 1998, several things have changed:

  • Bandwidth has increased to the point that including a 100–300 KB font file in your page seems less of a big deal.
  • Font foundries now have the example of the music industry to learn from.
  • The rise of open source operating systems has led to the creation of several free but professional fonts funded by companies such as Red Hat, Canonical, and Google.
  • Tools have improved to the point that it’s now feasible for professional font designers to produce free fonts in their spare time.

In June 1998, Safari 3.1 was released with support for downloading TrueType/OpenType fonts (TTF/OTF) with @font-face in its desktop incarnation and SVG Web fonts, a format tied to the SVG specification, on mobile devices. Firefox added support with the release of 3.5 in June 2009, and a brave new world of web typography was born.

Although several smaller font foundries jumped on the bandwagon and started making their fonts available with web-friendly licenses, the major ones still weren’t keen to get involved. They wanted a font file format that couldn’t be used as a desktop font. The answer is the new W3C Web Open Font Format (WOFF), which is being developed collaboratively between browsers, vendors, font foundries, and the W3C.

Browser support for downloadable fonts

The previous section mentioned several different font file formats, among them EOT, TTF/OTF, WOFF, and SVG. The following table shows which of them are supported in various browsers today.

For widest support across browsers, you need to provide your font in four different formats—assuming you can find fonts available in all four formats, or with a liberal enough license that you can convert the font between formats yourself. In addition, you have to worry about various bugs in different browsers’ support of @font-face (see the browser support section at the end of the chapter for details).

Making your life easier with font services

Rather than search through many different web sites to find the exact fonts you want, and then purchase them from several different websites and figure out how to set up your server to deliver them correctly to clients and integrate everything into your CSS, it’s much easier to get someone else to do that for you. Many online services have appeared in recent years to simplify getting the fonts you want on your website. These can be broken down into three broad categories:

  • Font converters and packagers —These services convert fonts you already have into the formats supported by browsers and provide you with CSS to incorporate them into your site. You have to deal with the server-setup side of things yourself.
  • Free font services —The font services deliver the fonts directly from their own servers, and all you need to do is link to a CSS file provided by the service. Being free, these services only include freely downloadable and open source fonts.
  • Paid font services —These services are just like free ones except that, because you’re paying license fees, the range of fonts available is vastly improved.

This section walks through one example of each type of service listed, from choosing fonts to getting them on your web page.

Downloadable kits: FontSquirrel

FontSquirrel (www.fontsquirrel.com) is an online tool for building packages of font files. These packages contain everything you need to use the fonts on your own website. Here’s how to use FontSquirrel:

Go to the website home page and click the @font-face Kits link in the main menu.
You’ll be taken to a page that lists hundreds of fonts available for download. Scroll down to the Serif section, and find the Gentium Pro font. Click View Font to see the details.
On the details page, you can see what each character looks like and try out text of your own. Go to the @font-face Kit tab to select which font file types you want to use: TTF, EOT, WOFF, and SVG.
On this page you can also select a subset of the characters—so you only download the English characters if you won’t be using any other languages, keeping the file size down. Click the Download @font-face Kit button to download a zip file of everything you’ll need.
Look in the zip file you’ve downloaded. It contains the following: Each font in the formats you selected A style-sheet file that you can include directly in your pages A web page demonstrating the font

Here’s a rule from the included stylesheet.css file:

@font-face {
    font-family: 'GentiumBasicRegular';
    src: url('GenBasR-webfont.eot');
    src: url('GenBasR-webfont.eot?iefix') format('eot'),
         url('GenBasR-webfont.woff') format('woff'),
         url('GenBasR-webfont.ttf') format('truetype'),
         url('GenBasR-webfont.svg#webfontLblSsz1O') format('svg');
    font-weight: normal;
    font-style: normal;
}
And here’s a rule from the HTML file, demonstrating how it should be used:
p.style1 {
  font: 18px/27px
   'GentiumBasicRegular',
   Arial,
   sans-serif;
}

You can see the file in ch11/Gentium-Basic-fontfacekit/demo.html.

Free font services: Google Web Fonts

Downloading a kit with everything you need takes a lot of the work out of things, but you still have to deal with serving the files yourself. This means you have to make sure your server is configured correctly for the font files. In addition, the users downloading the fonts will be using up your bandwidth. Wouldn’t it be nice if someone else took care of the server-side stuff for you? Well, Google is offering to do it for free!

The Google Web Fonts service is available at www.google.com/webfonts. Click the Start Choosing Fonts button to begin.
Like many Google services, the interface is search based. Search for a font called Crimson Text by typing in the Search box.
The See All Styles link lets you see all the different weights and styles available. Click the Quick Use link alongside that.
You can select which font variants you want to include (weights of bold and/or italics). To the right of the selection is a large graphic indicator that estimates the impact of the fonts you’ve chosen on page load time.
Instead of a download, you’re offered two snippets of code to copy and paste. Scroll down the page to find them. The first bit of code is a <link> element to include in your document head. The second is an example CSS rule making use of the font. The exact code is as follows: <link
href='http://
fonts.googleapis.com/
css?family=Crimson+Text:400,700'
rel='stylesheet' type='text/
css'>
font-family: 'Crimson Text',
serif;
Include these two snippets in your page, adjusting the CSS rule as necessary, and you’re good to go.

See the full example listing in ch11/fontservices-google.html.

Subscription font services: Fontdeck

The Google service is straightforward and available at an excellent price—nothing—but this strength is also a weakness. Google can only offer free fonts for download through its service. If the fonts you want to use aren’t available, you’ll have to look into one of the subscription services; several such services are now available.

This example looks at Fontdeck (http://fontdeck.com/) because it allows you to try the fonts for free and I already have an account.
You need to provide an email address to register, and then you set up a website. This is as simple as typing in a name and one or more domain names. The first 20 distinct IP addresses to access your website will be allowed to download any fonts you choose free of charge, so you can use Fontdeck to test fonts and even demonstrate them to clients without financial outlay.
After you’ve set up a website, you need to choose some fonts. These are arranged by category—serif, sans-serif, and so on—or you can search by font name or tag. For this example, look for Monosten, which is under Slab Serif > Monospaced. Either browse to the font or search for it.
On the page for Monosten, look for the A (regular) and C (bold) variants and click the Add to Website link alongside them.
You should see a banner at the top of the page with a link that says Grab the Code for This Font—go ahead and click it.
You’re presented with a page that has code you can copy and paste into your pages. The code I got is shown next; I changed the CSS slightly to apply to the body and level-one headings.
<link rel="stylesheet" href="http://f.fontdeck.com/s/css/
 9tuWCgd+qpLZNXRFuo1XneWWjNE/www.dotrob.com/8881.css"
 type="text/css" />
<style>
body {
    font-family:"Monosten A", Courier, monospace;
    font-size-adjust:0.5;
    font-weight:normal;
    font-style:normal;
}
h1 {
    font-family:"Monosten C", Courier, monospace;
    font-size-adjust:0.5;
    font-weight:bold;
    font-style:normal;
}
</style>
Here’s my example page in action using the previous code. See the full listing in ch11/fontservicesfontdeck.html. You’ll need to edit the example file to insert your own style sheet link to Fontdeck; otherwise you won’t be able to download the fonts.

Advanced web typography

Even with a working @font-face directive, control over fonts on the web is still far behind what you might see in a typical desktop-publishing program or design package. CSS3 goes beyond letting web developers control which fonts appear on their web pages: it also offers features for controlling the details of how those fonts are rendered.

Browser support quick check: font-size-adjust

 

Standard

Prefixed

- -
3.0 -
- -
- -
- -

font-size-adjust

As you saw earlier, one of the issues with fonts on the web is that, should the primary font be unusable for some reason, the fallback font may have different size characteristics. Fonts that are nominally of the same size can have visible differences in weight; this is the case because the measure of a font depends on the height of the letters including any potential ascenders and descenders, whereas the visual size of the font is more dependent on the x-height—the size of the lowercase characters.

The font size in all three examples in the section “Basic web fonts” was set to 32 pixels. But as you can see in this magnified view of the Nimbus Sans L letter M, the characters are only about 24 pixels tall.

Following is a diagram showing how the various font size metrics are related.

The font-size-adjust property allows you to specify a ratio between the x-height and the size of your first-choice font. If the browser has to use one of the fallback fonts, it will automatically adjust the size so the x-height remains consistent.

You don’t have to work out the x-height exactly; you can discover an appropriate value through trial and error instead. If you provide a “wrong” value for font-size-adjust, the font will be noticeably smaller.

Following is an example that shows the difference that specifying font-size-adjust can make. To begin, let’s look at what happens without that property:

p {
    font-size: 32px;
    padding: 0.5em;
    font-family: "Yanone Kaffeesatz", sans-serif;
}

If the font is available, then everything is fine.

But if the font isn’t available for some reason, the fallback font takes up considerably more space.

Now let’s add a font-size-adjust property:

p {
    font-size: 32px;
    padding: 0.5em;
    font-family: "Yanone Kaffeesatz", sans-serif;
    font-size-adjust:0.5;
}

Again, everything is fine if the font is available.

But this time, if the font isn’t available, the fallback font takes up a similar height.

Note that font-size-adjust only impacts the x-height—the width is still different. The property’s main advantage is that it preserves the vertical rhythm of your blocks of text.

Advanced font control

This section looks at some of the advanced features offered by modern fonts and how they can be controlled from CSS. We’ll start with ligatures: the replacement of sequences of separate characters with a single, joined glyph (the typographical term for the elements of a font) and then explore some features available for numbers before finishing with fancy text options known as contextual swashes.

Browser support quick check: font features

 

Standard

Prefixed

- 16[*]
- 4.0
- 10
- -
- -

* (Win/Linux only)

 

Glyphs and ligatures

Glyph is the typographical term for the graphical elements that make up a font. It differs from a letter—any individual letter can be represented by any one of a number of glyphs in a font depending on the context in which it’s placed. A common example in old English was the long and short forms that were used at the start and end of words, respectively—both represented the letter but use a different glyph.

A ligature is a glyph that replaces a sequence of letters. In traditional English printing, this was generally used to increase legibility or to work around limitations of ink or lead type. But in some scripts, the particular ligature used can affect the meaning.

Ligatures are a feature of the font being used. Each font has a replacement table that maps certain sequences of characters in the text to single glyph.

 

Following are some example ligatures from the Calluna Regular font.

Currently, Firefox and Safari render ligatures automatically, if they’re available in the font, above a certain font size. CSS3 gives you complete control over them through the font-feature-settings property. The property requires a single value: a quoted string containing a comma-separated list of font settings. To turn on ligatures, you use this CSS:

font-feature-settings: "liga";

All the features have a four-character code. If the value is present, it means the feature is enabled. It’s also possible to add a value to each feature:

font-feature-settings: "liga" 1;

A value of 1 or on means the feature is enabled, and 0 or off means the feature is disabled. The complete list of possible features is available in the OpenType specification: www.microsoft.com/typography/otspec/featurelist.htm. In addition to the regular ligatures, a font may also have a set of more decorative discretionary ligatures. These aren’t enabled by default but can be enabled through font-feature-settings. Here’s another example from the Calluna Regular font.

As you can see, the discretionary ligatures are a lot more decorative. You would normally only enable them for headings or other small sections of text with a decorative as well as informative role. The CSS for the second line in the previous example is this:

font-feature-settings: "liga" 1, "dlig";

It’s also possible to select only the additional ligatures:

font-feature-settings: "liga" 0, "dlig";
Letters aren’t the only thing that can be represented by more than one glyph in a font, and you may have good reason for wanting different glyphs in different situations. This screenshot shows four numbers in the Calluna font with the default rendering. Can you quickly tell which one of the four is the largest value?
The problem with the normal rendering of numbers is that, like the rest of the text, they’re proportionally spaced. This is fine for numbers in text but not so good for quick visual comparison in tables. The Calluna font has several different sets of numerals, and in this case the tabular set is more useful: font-feature-settings: "tnum"; Now you can see immediately that the largest value number is the second one.
The numbers in the previous examples are designed to look natural when used in a paragraph of text, with ascenders and descenders like regular letters. You may prefer to have the numbers be a more consistent height; these are known as lining numerals: font-feature-settings: "lnum"; The default that’s being overridden here is Old Style Numerals, which can be selected with the short code "onum".
Calluna allows you to combine the tabular and lining properties: font-feature-settings:
"tnum", "lnum";
Calluna also has a special set of ligatures for fractions: font-feature-settings: "frac"; The column on the left is the normal rendering of the text; the fractions are typed with a slash as in 1/2. The column on the right has fractions turned on; the three letters have been replaced with a single glyph representing the fraction.
It’s often difficult to distinguish an uppercase letter O from a zero. In fonts used in things like text editors, the zero will have a slash through it to make it more distinctive. Calluna has both a regular and a slashed zero. The slashed zero can be enabled with the zero feature: font-feature-settings: "zero";
Historical forms can give an authentic old look to your text. For instance, in days of yore, the current form for s was only used at the end of words. It was normal to use a long s at the start and in the middle of words. You can enable the long s in Calluna with the hist feature: font-feature-settings: "hist";
Fonts can also contain stylistic alternates—usually more decorative versions of certain characters. Calluna has just one set of stylistic alternates, which contains only two glyphs. Turn on stylistic alternates by setting salt to on: font-feature-settings: "salt";

The Calluna font used so far for the examples doesn’t have much in the way of historical forms or stylistic alternatives. Let’s switch to the MEgalopolis Extra font, which has plenty of both.

Here’s a sample paragraph with no special typographic formatting. The code follows.

I again rely on Ada Lovelace for the quote:

<p>The Analytical Engine has no pretensions whatever to
originate anything.
It can do whatever we know how to order it to perform.</p>

Here’s the CSS to apply the font:

@font-face {
    font-family: megalopolis;
    src: url(MEgalopolisExtra.woff) format("woff"),
         url(MEgalopolisExtra.otf) format("opentype");
}
p {
    font-family: megalopolis, sans-serif;
}
p::first-line {
    font-variant: small-caps;
}

You can see the additional ligatures in effect on the small-caps combinations ca, re, and at.

Additional ligatures
Additional ligatures plus default stylistic alternatives

The default stylistic alternatives adds a more curvy s but also a more traditional y. The property for the second example is as follows:

font-feature-settings: "salt","dlig";

MEgalopolis has six other style sets, which can be turned on with ss01 to ss06. Here are a couple of examples. If you’re following along at home, I suggest you try ss06 for yourself:

"ss01"
"ss05"
Browser Support

Recent versions of the major browsers support some parts of CSS3 advanced font control features using vendor-specific extensions. The following example shows a complete code listing that enables standard and discretionary ligatures cross-browser:

-moz-font-feature-settings: "liga", "dlig";
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga", "dlig";
-webkit-font-feature-settings: "liga", "dlig";
font-feature-settings: "liga", "dlig";

font-feature-settings

Standard CSS3 properties and values

font-feature-settings:
"liga";
font-variant-ligatures:
common-ligatures;
font-feature-settings:
"liga" 0,
dlig";
font-variant-ligatures:
no-common-ligatures
additional-ligatures;
font-feature-settings:
"tnum";
font-variant-numeric:
tabular-nums;
font-feature-settings:
"tnum",
"lnum";
font-variant-numeric:
tabular-nums
lining-nums;
font-feature-settings:
"frac";
font-variant-numeric:
diagonal-fractions;
font-feature-settings:
"hist";
font-variant-alternates:
historical-forms;
font-feature-settings:
"ss01";
font-variant-alternates:
styleset(1);

Text columns

Browser support quick check: CSS columns

 

Standard

Prefixed

- 1.0
- 1.5
10.0 -
11.10 -
- 3.0

Columns in printed media, such as newspapers and magazines, make text easier to read by keeping the line length to an optimal 10–15 words. With CSS2, the only way to create columns of text is to split the content among multiple elements and then position them on the page. This causes issues when updating the content, because you have to make sure it remains balanced, and when reading it, because nothing in the markup indicates that the two elements share a common text source. CSS3 adds the ability to render any element across multiple columns, solving both issues. You’ll learn how in this section.

Column count and width

Here’s a simple page with a couple of paragraphs of text:
<body>
    <p>I never am really
       satisfied...</p>
    <p>In almost every
       computation...</p>
</body>
Turning that into two columns of text is straightforward:
body {
    column-count: 2;
}
The text flows naturally into two columns with no markup changes, as you can see in the screenshot.
An alternative approach is to specify a column width:
body {
    column-width: 260px;
}
With a window 640 pixels wide, as in this example, and taking into account page margins and padding, this has a result that’s identical to the previous rule.

The difference between the two becomes obvious if the browser window is wider. Here are the same two pages at 1024-pixel width.

column-count: 2 at 1024px width

column-width: 260px at 1024px width

Column spans

You don’t always want everything to fit neatly into columns. You may sometimes want an individual element to span multiple columns. For example, in newspapers it’s common for photographs to span multiple columns of text.

Inserting an element in the text doesn’t produce useful results: <p>I never am really satisfied that
I understand anything; because,
understand it well as I may, <img
src="uf012314.gif">my comprehension
can
...</p> The image is 720 pixels wide, and the columns are 260 pixels wide. The result is that the image sticks out from its column and lies underneath the text of the next column.
One useful approach is to limit the width of any images. When columns are in use, a width of 100% applies to the width of the column rather than the width of the page: img {
max-width: 100%;
} But for pictures that are far wider than they are high, the result may be that the image is too small. We need a way for an element to take up 100% of the page width and have the text columns flow around it. This is what column-span is for.
In the current CSS3 Multi-column spec, the column-span property can take one of two values: 1 or all. The default is 1: elements span a single column. A value of all makes the element span every column: img {
max-width: 100%;
column-span: all;
}

Gaps and rules

The column-gap property allows you to control the spacing between columns: body {
column-width: 200px;
column-gap: 100px;
}
Three properties control the column rule. This example shows all three of them: body {
column-width: 200px;
column-gap: 100px;
column-rule-style: solid;
column-rule-color: #999;
column-rule-width: 20px;
} Note that these are analogous to the border properties.
Rather than specify the three properties individually, you can use a shorthand version to set all three at once: body {
column-width: 200px;
column-gap: 100px;
column-rule: 4px dashed #333;
}

In this example, the column rule is wider than the column gap:
body {
    column-width: 200px;
    column-gap: 100px;
    column-rule: 300px ridge
#ccc;
}

Wrapping and overflow

Text wrapping has traditionally been something that, as a web author, you had to let the browser take care of. In situations where you’d like more control, CSS3 offers a couple of new properties: word-wrap and text-overflow. This section looks at each in turn.

Word wrap

CSS3 provides a word-wrap property that controls whether line breaks are allowed in the middle of words. Normally, text wrapping only occurs at spaces and punctuation. If a word is too long to fit inside the containing element without the opportunity for a break, then the element expands to contain it.

For regular paragraphs of text, this isn’t usually a problem. But it can be an issue for headings and URLs, particularly if they’re in constrained-width containers such as sidebars or text columns. Imagine that you have a word-of-the-day feature in your site’s sidebar. The sidebar has a width of 15em, which is normally plenty of room; but one day the word is a long one:

<div>
    <h1>Floccinaucinihilipilification</h1>
    <p>The act or habit of describing or regarding
       something as unimportant.</p>
</div>

Browser support quick check: word-wrap

 

Standard

Prefixed

1.0 -
3.5 -
5.5 -
10.50 -
1.0 -

Even though the width of the element is constrained, the length of the word forces the entire container to be wider:

div { width: 15em; }

Note that the paragraph is still constrained by the width set.

Here’s where you can use the word-wrap property. Setting a value of break-word allows wrapping to occur within the long word:

div { width: 15em; }
h1 { word-wrap: break-word; }

Text overflow

It may be that you want to keep the word on one line, so break-word isn’t appropriate. A normal way to do this in CSS2 is to set the element to overflow: hidden.h1 { overflow: hidden; }

This works, but it doesn’t look tidy. The word is cut off part way through a letter.

The text-overflow property lets you make things look neater:

h1 {
    overflow: hidden;
    text-overflow: ellipsis;
}

Now the word ends at a letter, and an ellipsis gives a visual indication that the word has been truncated. This property is particularly useful if you’re dealing with user-generated content that appears in constrained areas—for example, a Twitter feed in a sidebar.

Browser support quick check: text-overflow

 

Standard

Prefixed

1.0 -
7.0 -
6.0 -
11.0 9.0
1.3 -

Browser support

Support for downloadable fonts and WOFF is now available in all major browsers, but so far, the more advanced font-control features are available only in Firefox. In terms of other text features, the other browsers take the lead.

 
  12 14 4 6 8 9 10 11.1 11.5 5 5.1
@font-face
WOFF    
font-size-adjust                  
Font features                
CSS columns    
Column span            
word-wrap
text-overflow    
Key:
• Complete or nearly complete support
Incomplete or alternative support
Little or no support

Summary

Text has always been a fundamental component of web content, but until recently control of typography has been somewhat limited. In this chapter, you’ve seen how @font-face can finally provide beautiful (while still accessible) text on the web, and how web font services can make it easier to get those fonts onto your web pages. You’ve also had a tour through the desktop-publishing-like font control capabilities CSS3 will give us in the future through font-feature-settings. And, continuing the publishing theme, you’ve seen the new features for controlling columns of text. Finally, you saw some CSS3 features for controlling text wrapping and overflow, which are useful when you’re fitting content into text columns and other narrow containers.