Inline Formatting

From DPWiki
Jump to: navigation, search
DP Official Documentation - Post-Processing and Post-Processing Verification

Presentational vs. semantic markup

In general, there are two ways of marking up things like italic or bold passages in a book. Presentational markup says, “This is italic”, “This is bold”, etc.; semantic markup says, “This is emphasised”, “This is in a foreign language”, etc. Presentational markup focuses on what things look like, semantic markup on what they are or mean.

N.B.: When using semantic markup, your HTML defines what something is; with your HTML markup in place, you can apply CSS in order to make things look just the way you want them. To make things more confusing, HTML has aspects of both. It has some elements that mean something, e.g., <em> for emphasis, and some that just describe how something should look, e.g., <i> for italic text. Interestingly enough, books contain formatting for both semantic as well as purely decorative purposes. Compare the following snippets—all from the same book, and all containing italic words:



Phrase in a foreign language

Stage direction

On the printed pages, the italics all look the same. A book has no way of distinguishing between different reasons for italics; the reader deduces them from the context. If you read a book aloud to someone else, you know which of the italics should be emphasised, which should be pronounced in, e.g., French, and which should be read like ordinary text.

If you use text-to-speech software, however, or want to convert the HTML file to other formats, then if all italics are marked up the same way, the software you are using will not be able to distinguish between them. It will either emphasise all italics, or interpret them all as ordinary text—and the distinction that a human would make will get lost. Thus, it is helpful if you use different markup for different kinds of italic (or bold, small-capped or gesperrt) text—and thereby direct the software to interpret the text as it is meant.

Marking up different types of italics

In the above examples, the italic word in the first snippet is emphasised. In the second example, the italics are used for the title of a newspaper, i.e., something like a citation. In the third case, we are looking at a phrase in a foreign language, in this case French. And finally, the last snippet contains a stage direction—which is printed in italics because that is a typesetting convention for stage directions.

So, let’s go ahead and write some HTML for our snippets! As mentioned above, there is an HTML element for emphasis that should be used for the first example:


<p>... English writer except Shakespeare. Owing, perhaps,
to what I must call its <em>obscure</em> popularity in
the continental theatres, Dr. Strauss was preparing ...</p>

In the second example, we are dealing with a citation—and there is a dedicated HTML element for that purpose as well:


<p>... distinguished French writer, to whom I have heard
the whole work attributed. The <cite>Times</cite>, while
depreciating the drama, gave its author credit for a ...</p>

The third snippet contains a French phrase. Text in a foreign language is not usually supposed to be emphasised (though it might, in some cases, be emphasised in addition to being in a foreign language); it should just be pronounced in the language it is in. This is a case where a presentational <i> element makes sense, with an attribute (or two) to declare the language of the phrase:

Phrase in a foreign language

<p>... <i lang="fr">tour de force</i>, in being capable of writing a French
play for Madame Bernhardt, and this drew from
him the following letter:&mdash;</p>

N.B.: If you are writing HTML (versus XHTML), use the “lang” attribute, as shown above. In XHTML 1.1, use the “xml:lang” attribute: <i xml:lang="fr">tour de force</i>. In XHTML 1.0, it is best to use both attributes: <i lang="fr" xml:lang="fr">tour de force</i>. (For more information, see the Introduction to Flavours of (X)HTML.)

Finally, let’s deal with our stage direction. Stage directions are clearly not emphasis or citations. They are, however, something distinct, which should get its own dedicated markup. Since there is no appropriate HTML element for them, we have to make up our own way of marking them up, using a class attribute. One way would be to use an <i> element with a special class—so in case someone wanted to change all stage directions to look different, that could easily be done in the CSS, without touching the HTML code:

Stage direction

<p>She is like a woman who is dead. She moves
very slowly.</p>

<p>[<i class="stage-direction">Noise in the banqueting-hall.</i>]</p>

Another way would be to use a <span> element with a class and some CSS to make the text italic:

<p>She is like a woman who is dead. She moves
very slowly.</p>

<p>[<span class="stage-direction">Noise in the banqueting-hall.</span>]</p>
  font-style: italic;

Both of the above ways work fine and are as meaningful as we can make them in HTML—it’s just important to use the same markup for each instance of the same construct in our book, so that the look of all of them can later easily be changed in just one place in the CSS.

N.B.: The above examples all contain italic phrases. The same principles apply to bold, small-capped or gesperrt text, or text in a different font. The important thing is to ask yourself why something looks the way it does, and to mark it up accordingly.

What if my emphasis isn’t italic?

There are books that contain emphasis, but don’t show it in italics. Emphasis might, for example, be bold, or it might be gesperrt (letter-spaced). This is more common in non-English books, but occasionally occurs in English ones as well:

Non-italic emphasis

This case is particularly interesting because it has two different types of emphasis: gesperrt for longer words, and italics for “I”, which you would not be able to mark as gesperrt. So, can we still use semantic markup for this? How do we distinguish between the different-looking snippets of emphasis?

Again, the solution lies in using class attributes to distinguish between the different kinds of emphasis. One of the types can just be <em>, and the other needs a class so it can be formatted differently using CSS. In this case, gesperrt emphasis is the default type, with italics only applied in the special case of the emphasised text being a one-letter word. So, it makes sense to assign the class to the italic exceptions:

<p>This hero has a head by one dram swirled;<br/>
That is in doubt whether his love be right;<br/>
A third you hear despairing of the world,&mdash;<br/>
Full five acts long you hear him wail his plight,<br/>
And no man ends him with a merciful slight!<br/>
But the <em>real</em> beast, the <em>beautiful</em>, <em>wild</em> beast,<br/>
Your eyes on <em>that</em>, <em class="italic">I</em>, ladies, only feast!</p>

Matching this code, we format ordinary <em> elements as gesperrt, and override that for the instances with the “italic” class:

  font-style: normal;
  letter-spacing: 0.2em;
  margin-right: -0.2em;

  font-style: italic;
  letter-spacing: 0;
  margin-right: 0;

Look at this!

N.B.: The above code for formatting poetry (or metrical drama) has been simplified in order to concentrate on the inline formatting. See the Case Study on Poetry for a better way of marking up poetry.

N.B.: On some e-readers, the CSS “letter-spacing” property does not work. Where it is used for emphasis, as in the above example, it might thus make sense to replace it with another type of emphasis, e.g., bold or italics, for “handheld” devices. See the relevant example in the Case Study on Media Types.

And what if I have normal emphasis, and even stronger emphasis?

In some books, there will be “ordinary” italic emphasis, and then some other kind of emphasis for phrases that are probably meant to be emphasised even more. Look at the following example:

Different kinds of emphasis

Here, we have italic emphasis in the quotation, and then a small-capped sentence at the end that is probably meant to be emphasised even more strongly. For that purpose, HTML has a second emphasis element called <strong>. By default, most browsers show strong emphasis as bold text, but we can easily change that in our CSS:

<p>... “when I
see a monstrous tulip with <em>four</em> wonderful petals in
someone else’s garden, I am impelled to grow a
monstrous tulip with <em>five</em> wonderful petals, but that
is no reason why someone should grow a tulip with
only <em>three</em> petals.” <strong>That was oscar wilde.</strong></p>
  font-weight: normal;
  font-variant: small-caps;

Look at this!

To comment or request edits to this page, please contact lhamilton.

Return to DP Official Documentation Menu