10Body text, sections and headings

You have probably noticed that as I write, I use different inline styles for things such as all caps, code text, menu selections, small caps, italic highlighting, &c.

These are all made available on the website by using the <span> inline element (one of them uses the <em> element to make the text bold, see the footnote in § 10.3.1 for the reasons behind this). The HTML code for the above paragraph is:

<p class="hyp">You have probably noticed that as I write, I use different inline styles for things such as <span class="all-caps">all caps</span>, <span class="code">code text</span>, <span class="menu">menu selections</span>, <span class="sml-caps-s">small caps</span>, <span class="first-use">italic highlighting</span>, &amp;c.</p>

To make part of the text appear as all capitals, that part of the text is surrounded by the <span>...</span> HTML element and given the class .all-caps:

<p class="hyp">... <span class="all-caps">all caps</span>...</p>

In the style.css file, the .all-caps class contains the following:

.all-caps {                                 /* TEXT STYLE - all caps */
    text-transform: uppercase;
    letter-spacing: 0.086em;
}

It’s fairly simple; it converts the text to uppercase:

    text-transform: uppercase;

And then it adds some lateral spacing to the letters, this moves the letters further apart^†1 and makes them easier to read. I’ve added 8.6% of additional spacing between the capital letters:

    letter-spacing: 0.086em;

I’ve specified this with the em unit (0.086em), not the rem unit. I generally specify things in rems, but here I’ve used ems, this is because I don’t exactly know where the all-caps class is to be used (it’s perfectly possible to use it in section headings) and I want the letter spacing to be associated with the actual size of the text in use, not the size of the text specified in the HTML class. Although I’ve used 0.086em I could just as easily used 8.6% the result would have been just the same.

This is how all these styles work. This is also the biggest pain in the arse when copying text from Word into the website. Where I’ve used any of these styles in the Word document, italics for example, I have to find that word or section of the text and put the <span>...</span> around it. In the case of this example it would be:

<span class="first-use">italics</span>

I’m not going to explain every one of my span styles in detail, they’re all very similar, but I’ve listed them, shown an example, explained where I use them (you don’t have to stick to my rules, use them for what you like) and given the CSS behind each one. Here they are (the extract used is compulsory reading for engineers and is from: The Race to the Moon by, Catherine Bly Cox & Charles Murray — Simon and Schuster, 1989. There is a Kindle version by the same authors, but just called Apollo).

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp"><span class="all-caps">In principle</span>, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>

.all-caps {                                 /* TEXT STYLE - all caps */
    text-transform: uppercase;
    letter-spacing: 0.086em;
}

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp>In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. <span class="code">Liquid fuel is pumped</span> into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>

.code {                                     /* TEXT STYLE - code fragment */
    font-family: "trip-t4-r";
    font-size: 0.95em;
    color: #4F81BD;
}

• The smaller font size is because the Triplicate font just looks larger than normal text, the 0.95 rem makes it line up better with the body text.

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <em>It burns</em>. That’s all there is to it.</p>

.section-std em {                           /* TEXT STYLE - bold */
    font-family: "eqty-ta-b";
    font-style:normal;
}

• This style uses the html element <em>, rather than the <span> element (see the footnote in § 10.3.1 for the reasons behind this), it uses the descendant selector (combinator) discussed in § 6.6.1 to set the style for every <em> element within the section.

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. <span class="first-use">That’s all there is to it</span>.</p>

.first-use {font-family: "eqty-ta-i"}       /* TEXT STYLE - first use */

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. 1 That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. <span class="index">1</span> That’s all there is to it.</p>

.index {                                    /* TEXT STYLE - index font */
    font-family: "conc-i3-r";
    font-feature-settings: "ss00";
}

• Only numbers (0, 1, 2, ...97, 98, 99) can be used inside the <span> element with the Concourse Index font set, letters and other characters will appear as they are the normal Concourse font.

If you are using my PS Index font, then only the numbers 0 to 26 are available, see § 9.6.2.

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

lt;p class="hyp">In principle, <span class="menu">liquid rocket engines</span> are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>

.menu {                                     /* TEXT STYLE - code fragment */
    font-family: "conc-c4-r";
    font-feature-settings: "ss02";
    color: #4F81BD;
}

• Stylistic set 02 is applied to the Concourse font; this ensures the British settings are used see § Stylistic sets

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

lt;p class="hyp">In principle, <span class="mono">liquid rocket engines</span> are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.</p>

.mono { font-family: "trip-t4-r"; }       /* TEXT STYLE - monospaced font */

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="notice">It burns.</span> That’s all there is to it.</p>

.notice {                                   /* TEXT STYLE — important notice */
    font-family: "conc-t3-b";
    font-feature-settings: "ss02";
    font-size: 130%;
    color: #C0504D!important;
}

• There is something new in the css for this inline style, I’ve added !important to the end of the colour declaration. If you remember, I talked about the hierarchy and specificity of css selectors, § 5.6.1 and top of the list is !important, it out ranks everything else. So when I use it with the red colour above, the colour will be red no matter what, it cannot be overridden.

Some purists will accuse me of being lazy, using the !important rule is considered to be bad form, I use it here because this style is important and I do want it to override everything else.

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="red">It burns.</span> That’s all there is to it.</p>

.red {color: #C0504D}

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sans">It burns.</span> That’s all there is to it.</p>

.sans { font-family: "conc-t3-r"; }       /* TEXT STYLE - sans serif font */

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sans-b">It burns.</span> That’s all there is to it.</p>

.sans-b { font-family: "conc-t4-b"; }       /* TEXT STYLE - sans serif bold */

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp sans">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="serif">It burns.</span> That’s all there is to it.</p>

.serif { font-family: " eqty-ta-r"; }       /* TEXT STYLE - serif font */

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp sans">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="serif-b">It burns.</span> That’s all there is to it.</p>

.serif-b { font-family: " eqty-ta-b"; }       /* TEXT STYLE - serif bold */

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sml-caps-ns">It burns.</span> That’s all there is to it.</p>

.sml-caps-ns { font-family: "conc-c3-r"; }  /* TEXT STYLE - small caps sans */

In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. It burns. That’s all there is to it.

<p class="hyp sans">In principle, liquid rocket engines are simple, far simpler than the internal combustion engine. Liquid fuel is pumped into a combustion chamber in the presence of liquid oxygen and a flame. <span class="sml-caps-s">It burns.</span> That’s all there is to it.</p>

.sml-caps-s { font-family: " eqty-ca-r"; }       /* TEXT STYLE - small caps */