Painting by Numbers

The visual style & mark-up guide for the Research & Education Space

December 2015 Edition

Edited by Mo McRoberts, BBC Archive Development

Introduction

This document is the visual style and mark-up guide for the Research & Education Space (RES), an initiative being delivered by the BBC to improve access to public archives for use in education.

Each section within this style guide includes a description of the visual style of the element, a sample of the element rendered in that style, the CSS styling rules for HTML documents required to render that style in a web browser, and, where appropriate, the HTML mark-up used for the sample and the DocBook equivalent. The styles themselves are intended to be generally portable to other environments.

You may re-use all or part of this document, including the accompanying CSS stylesheets, under the terms of the Open Government Licence v2.0. Note that the licence does not cover the use of the RES logo nor any web fonts or other images which have been licensed from third parties for use by the project itself.

The latest version of this document can always be found at https://bbcarchdev.github.io/painting-by-numbers/.

Table of contents

  1. Introduction
  2. What is the Research & Education Space?
  3. Aims of the Research & Education Space
  4. Terminology
  5. Types of document
    1. Long-form works
      1. Cover pages and spine
      2. Front matter
      3. Body matter
      4. Back matter
    2. Multi-volume works
    3. Presentations
    4. Manual pages
    5. Web pages
    6. Other short-form works
  6. Logo
    1. Logo variations
    2. Logo usage guidance
    3. Use in paged media
  7. Colour palette
  8. Type
  9. Structural elements
    1. Document header & front matter
      1. Global navigation
      2. Masthead image
      3. Inside cover
      4. Legal notices
      5. Complete front matter example
    2. Document footer & back matter
    3. Sections, chapters and parts
    4. Body text
    5. Headings
    6. Lists
      1. Ordered lists
      2. Un-ordered lists
      3. Definition lists
      4. Simple lists
      5. Segmented lists
      6. Tables of contents
    7. Horizontal rules
    8. Code samples
    9. Tables
    10. Figures
    11. Call-outs
    12. Examples
    13. Quotations
    14. Footnotes
    15. Forms
  10. In-line elements
    1. Hyperlinks
    2. Emphasis
    3. Abbreviations and acronyms
    4. Code literals
    5. Quotations
    6. Citations
    7. Foreign phrases
  11. Utilities
    1. Bold and italic
    2. Avoiding page-breaks
  12. Index of HTML elements

What is the Research & Education Space?

Since 2013, the Research & Education Space has been working with teachers, students and academics, along with curators of world class digital collections and product developers to improve the resources and tools available in all levels of UK education. The project was a partnership initiative between the BBC, Learning on Screen and Jisc. This 4-year project phase has now come to an end; however the BBC will continue to work with public partners to develop RES as an open platform for publishing linked open data and explore the benefits of developing education propositions powered by RES with 3rd parties.

RES provides an open platform built by the BBC. The platform indexes and organises the digital collections of libraries, museums, broadcasters and galleries to make their content more discoverable, accessible and usable to those in UK education and research. Images, TV and radio programmes, documents and text from world class organisations such as The British Museum, British Library, The National Archives, Europeana, Wellcome Trust and the BBC are all being indexed by RES. RES also enables developers to create digital educational products that will inspire learners, teachers and researchers by using applications powered by the RES platform.

The RES initiative comprises:

Aims of the Research & Education Space

One or more of the following sentences should be used in any communications to describe the Research & Education Space:

  1. The Research & Education Space (RES) is a BBC initiative that aims to make it easier for teachers, students and academics to discover, access and use material held in the public collections of broadcasters, museums, libraries, galleries and publishers.
  2. The Research & Education Space works with teachers, students and academics, along with curators of world class digital collections and product developers to improve the resources and tools available in all levels of education.

Terminology

The following terminology should be used when communicating about the different elements of the Research & Education Space:

The Research & Education Space (RES) strapline:

Connecting the UK’s publicly-held archives to inspire new ways of learning in the digital age.

or

Inspiring new ways of learning [for the digital age] using the UK’s publicly held archives.

Research & Education Space (RES) platform:

A digital platform which aggregates the collections of publicly-held collections, including TV and radio programmes, documents and images to make them accessible to the UK’s educational and research establishments.

Acropolis:

The open source software stack, built by the BBC, that powers the RES platform.

Types of document

This style guide is intended to be applicable to a range of document types, produced in a variety of different environments. This section includes general guidance for certain common types of document, but it is not intended to be exhaustive.

Future editions of this visual style guide may expand upon the guidance given here as practical use dictates.

Long-form works

Long-form works, such as books, academic papers, and other substantial documents consisting of multiple ordered sections and conveying one or more narratives, are structured according to common conventions. They consist of various kinds of “front matter” (including tables of contents, introductions, copyright information, and so on), followed by the “body matter” (that is, the sections which constitute the bulk of the work), and may close with “back matter” (also called “end matter”, and which includes sections such as the glossary and the index).

Cover pages and spine

Cover pages are made up of a block of solid colour taken from the Solarized highlight palette which is 50% of the page height, laid on a white page background, running the full width of the page. Covers must be printed full-bleed.

The front and back cover overlays the central solid block with an illustration matching the style used for masthead images on web pages.

The upper quarter of the front cover consists of:

  • The document title, set in the first-level heading style. The title is horizontally and vertically centered within the quarter.
  • The complete full-colour logo placed in the top left corner of the page, with equal top and left-side margins. The size of the logo is such that a margin equal to that used for the top and left-side margins is present between the bottom of the logo and the top of the document title.
  • The document sub-title, if present, is set in the second-level subhead style, centered horizontally on the page, and centered vertically within the available space between the bottom of the document title and top of the solid colour area.
DocBook mark-up

Cover pages are constructed from the document <title>, <subtitle> (if present) and the contents of the top-level <info> element. See the front matter example for details.

HTML mark-up

Cover pages are not marked up in HTML documents: the document begins with the inner cover page instead.

Front matter

Front matter sections, if present, are generally included in the following order:

  1. Global navigation (web pages only)
  2. Masthead image (web pages only)
  3. Inside cover (including title, subtitle, edition, authors)
  4. Legal notices
  5. Table of contents (see note below)
  6. Foreword
  7. Preface
  8. Acknowledgements
  9. Introduction
  10. Prologue

Front matter sections should be included depending upon the requirements of the document. It is entirely reasonable for front matter to consist solely of a title page if no other sections are required.

Body matter

“Body matter” refers to the one or more ordered sections which constitute the core content of the work.

HTML mark-up

In HTML documents, all body matter is contained within an <article> element which is a direct child of the <body> element.

Back matter

Multi-volume works

Presentations

Manual pages and other reference entries

Other short-form works

Colour palette

Colour RGB (Hex) RGB (Decimal)
Primary palette
Olive green#ceca13206, 202, 19
Dark olive green#a29f06162, 159, 6
Pale orange#ec7139236, 113, 57
Black#0000000, 0, 0
White#ffffff255, 255, 255
Highlight palette
Green#859900133, 153, 0
Yellow#b58900181, 137, 0
Orange#cb4b16203, 75, 22
Red#dc322f220, 50, 47
Magenta#d33682211, 54, 130
Violet#6c71c4108, 113, 196
Blue#268bd238, 139, 210
Cyan#2aa19842, 161, 152
Code sample backgrounds
Base03#002b360, 43, 54
Base02#0736427, 54, 66
Base2#eee8d5238, 232, 213
Base3#fdf6e3253, 246, 227
Code sample foregrounds
Base01#586e7588, 110, 117
Base00#657b83101, 123, 131
Base0#839496131, 148, 150
Base1#93a1a1147, 161, 161
Grey shades
Platinum#e6e6e6230, 230, 230
Light grey#d2d2d2210, 210, 210
Medium grey#b2b2b2178, 178, 178
Dim grey#848484132, 132, 132
Graphite#63636399, 99, 99
Jet#40404064, 64, 64

Type

Type is split into three broad groupings, each with differing characteristics, described below:

Body text
Body text is set in a plain sans-serif face, at a size and with line spacing such that it can be read comfortably at a light weight. All font sizes, vertical margins, and most horizontal margins are specified as multipliers of the body text size. To avoid “wall of text” effects, body text is set with a ragged right edge (that is, left-justification).
Headings and titles
Headings and titles are set in a rounded sans-serif face. At smaller sizes, all-caps may be employed to ensure a clear visual distinction from body text.
Computer code, input and output
Code, input and output are set in a monospace typewriter-style face. Because monospace type generally appears taller than the same text in a proportional sans-serif face, it should be set at a smaller size to equivalent body text.
Serif text
Variable names are set in an italicised serif face.

Structural elements

Body text

Body text is set in one of (in order of preference):

  1. Roboto
  2. Helvetica
  3. Helvetica Neue
  4. The browser-specified sans-serif face

It is set at the light weight (300) of the face at 13pt for screen and 11pt fpr print. The page background is white, while the text is by default black. On-screen, the page body is padded by 13pt on all sides, with a gutter of 5% of the viewport width. Paragraphs have top and bottom margins of 1em and a line height of 1.4 times the base size. All body text has a ragged right edge (left-justification).

Sample

DocBook mark-up
<para>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</para>

<para>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</para>
HTML mark-up
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
CSS styling rules for HTML documents
html {
	background-color: #fff;
	color: #000;
}
body {
	background: #fff;
	font-family: 'Roboto', 'Helvetica', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	font-size: 13pt;
	margin: 0;
	padding: 13pt;
}
p {
	margin: 1em 0;
	line-height: 1.4;
}
section {
	clear: left;
}
article>section {
	margin: 1em 0;
	border-top: solid #e2e2e2 0.1em;
}
body>section {
	margin: 1em 0;
	border-top: solid #e2e2e2 0.1em;
}
body>header+section, header+article > section:first-child {
	border-top: none transparent 0;
}
body > section, body > article, body > nav {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 960px;
}
CSS styling rules for HTML documents (for print)
html {
	background: inherit;
}
body {
	font-size: 11pt;
	margin: 1em 1cm;
	box-shadow: none;
}
.keep-together, summary {
	page-break-inside: avoid;
}
article>section, body>section {
	page-break-after: always;
	border-top: none;
	border-bottom: none;
}
article>section:last-child {
	page-break-after: avoid;
}
.screen-only {
	display: none;
}
p, li, dt, dd, tr {
	page-break-inside: avoid;
}
.refentry>header, .refentry>section, .refentry>article section {
	page-break-after: inherit !important;
}

Headings

Headings follow a scale of multipliers of the base body text size, with 3em at the largest size (used for the page title), and 0.75em used for fifth— and sixth-level headings.

Section headings are always marked up using the <h1> element, with sub-headings using <h2> where needed. Sub-headings use the next size down in the scale, and are coloured in dark grey (#636363). Additional sub-heading levels (<h3>, <h4>, …) may be used where needed, and follow the same pattern. Sub-heading text transformation always matches that of the corresponding <h1>: that is, sub-headings of a fifth-level heading (or less significant) are set in all-caps, while others are capitalised normally.

Section headings within an <article> are automatically numbered.

Sample

DocBook mark-up
<info>
	<title>First-level: Gotham Rounded Light (300) 3em</title>
	<subtitle>Subhead: Gotham Rounded Book (400) 1.875em</subtitle>
</info>
<chapter>
	<title>Second-level: Gotham Rounded Book (400) 1.875em</title>
	<subtitle>Subhead: Gotham Rounded Medium (500) 1.125em</subtitle>
</chapter>
HTML mark-up
<header>
	<h1>First-level: Gotham Rounded Light (300) 3em</h1>
	<h2>Subhead: Gotham Rounded Book (400) 1.875em</h2>
</header>
<article>
	<section>
		<h1>Second-level: Gotham Rounded Book (400) 1.875em</h1>
		<h2>Subhead: Gotham Rounded Medium (500) 1.125em</h2>
	</section>
</article>
CSS styling rules for HTML documents
h1, h2, h3, h4, h5, h6 {
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', 'Gotham Rounded', sans-serif;
	font-style: normal;
	padding: 0;
	margin: 13pt 0;
	line-height: 1.0;
}
h2, h3, h4, h5, h6 {
	color: #636363;
}
h1 {
	font-size: 3em;
	font-weight: 300;
}
h2, section h1 {
	font-size: 1.875em;
	font-weight: 400;
}
h3, section section h1, section h2 {
	font-size: 1.125em;
	font-weight: 500;
}
h4, section section section h1, section section h2, section h3 {
	font-size: 0.875em;
	font-weight: 700;
}
h5, h6, section section section section h1, section section section h2, section section h3, section h4 { 
	font-size: 0.75em;
	font-weight: 700;
}
h5, h6, section section section section section h1, section section section section h2, section section section h3, section section h4  {
	text-transform: uppercase;
}

Lists

Lists are set with a 1em top and bottom margin, except where an ordered or un-ordered list is contained within another ordered or un-ordered list. 1.5em of padding is applied to the left-hand side. List items have a 0.25em top and bottom margin.

Common CSS styling rules for HTML documents

A common set of rules used for both ordered and un-ordered lists is shown below:

ol, ul, dl {
	margin: 1em 0;
}
ol ol, ul ul, ol ul, ul ol {
	margin: 0;
}
ol, ul {
	padding: 0 0 0 1.5em;
}
li {
	margin: 0.25em 0;
	position: relative;
	line-height: 1.4;
}
li p {
	margin: 0.25em 0;
}
li>*:first-child {
	margin-top: 0;
}
li>*:last-child {
	margin-bottom: 0;
}

Ordered lists

Ordered lists are numbered, with the 1.5em of left-hand padding applied to the parent used for the item number (i.e., the number has a negative 1.5em left-hand margin). The item number is set in italics and followed by a full stop; the top-level list uses decimal numbering (1., 2., 3., …), the second-level uses lowercase latin (a., b., c., …), and third-level uses lowercase roman (i., ii., iii., …).

Sample

DocBook mark-up
<orderedlist>
	<listitem>
		<para>She packed her seven versalia, put her initial into the belt and made herself on the way.</para>
	</listitem>
	<listitem>
		<para>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</para>
	</listitem>
	<listitem>
		<para>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</para>
		<orderedlist>
			<listitem>
				<para>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</para>
			</listitem>
			<listitem>
				<para>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.</para>
			</listitem>
			<listitem>
				<para>And if she hasn’t been rewritten, then they are still using her.</para>
			</listitem>
		</orderedlist>
	</listitem>
	<listitem>
		<para>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</para>
	</listitem>
</orderedlist>
HTML mark-up

The sample above was produced with the following mark-up:

<ol>
	<li>She packed her seven versalia, put her initial into the belt and made herself on the way.</li>
	<li>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</li>
	<li>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.
		<ol>
			<li>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</li>
			<li>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.</li>
			<li>And if she hasn’t been rewritten, then they are still using her.</li>
		</ol>
	</li>
	<li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
</ol>
CSS styling rules for HTML documents
ol {
	counter-reset: listitem;
	list-style-type: none;
}
ol>li:before {
	position: absolute;
	display: inline-block;
	counter-increment: listitem;
	content: counter(listitem, decimal) ". ";
	font-style: italic;
	width: 1.5em;
	text-align: right;
	margin-left: -2em;
}
ol>li>ol>li:before {
	content: counter(listitem, lower-latin) ". ";	
}
ol>li>ol>li>ol>li:before {
	content: counter(listitem, lower-roman) ". ";	
}

Un-ordered lists

Sample

DocBook mark-up
<itemizedlist>
	<listitem>
		<para>She packed her seven versalia, put her initial into the belt and made herself on the way.</para>
	</listitem>
	<listitem>
		<para>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</para>
	</listitem>
	<listitem>
		<para>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</para>
		<itemizedlist>
			<listitem>
				<para>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</para>
			</listitem>
			<listitem>
				<para>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.</para>
			</listitem>
			<listitem>
				<para>And if she hasn’t been rewritten, then they are still using her.</para>
			</listitem>
		</itemizedlist>
	</listitem>
	<listitem>
		<para>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</para>
	</listitem>
</itemizedlist>
HTML mark-up

The sample above was produced with the following mark-up:

<ul>
	<li>She packed her seven versalia, put her initial into the belt and made herself on the way.</li>
	<li>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</li>
	<li>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.
		<ul>
			<li>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</li>
			<li>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.</li>
			<li>And if she hasn’t been rewritten, then they are still using her.</li>
		</ul>
	</li>
	<li>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</li>
</ul>

Definition lists

Sample

DocBook mark-up
<variablelist>
	<varlistentry>
		<term>first</term>
		<listitem>
			<para>the initial item in a list; ahead of all others temporally or sequentially.</para>
		</listitem>
	</varlistentry>
	<varlistentry>
		<term>second</term>
		<listitem>
			<para>the item which immediately follows the first.</para>
		</listitem>
		<listitem>			
			<para>a unit of measurement of time; one second is one sixtieth of a minute.</para>
		</listitem>
	</varlistentry>
	<varlistentry>
		<term>last</term>
		<listitem>
			<para>the final or terminating item in a list; occurs after all others.</para>
		</listitem>
	</varlistentry>
</variablelist>
HTML mark-up
<dl>
	<dt>first</dt>
	<dd>the initial item in a list; ahead of all others temporally or sequentially.</dd>
	<dt>second</dt>
	<dd>the item which immediately follows the first.</dd>
	<dd>a unit of measurement of time; one second is one sixtieth of a minute.</dd>
	<dt>last</dt>
	<dd>the final or terminating item in a list; occurs after all others.</dd>
</dl>
CSS styling rules for HTML documents
dl {
	margin: 1em 0;
}
dt {
	margin: 1em 0 0.25em 0;
	font-weight: normal;
}
dd {
	margin: 0.25em 0 0.25em 1.5em;
}

Tables of contents

DocBook mark-up
HTML mark-up

The sample above was produced with the following mark-up:

<section class="toc">
	<h1>Table of contents</h1>
	<ol>
		<li class="frontmatter"><a href="#intro">Introduction</a></li>
		<li><a href="#colours">Colour palette</a></li>
		<li><a href="#lists">Lists</a>
			<ol>
				<li><a href="#ol">Ordered lists</a></li>
				<li><a href="#ul">Un-ordered lists</a></li>
				<li><a href="#dl">Definition lists</a></li>
				<li><a href="#tocs">Tables of contents</a></li>
			</ol>
		</li>
		<li><a href="#inline">In-line elements</a></li>
	</ol>
</section>
CSS styling rules for HTML documents
.toc {
	page-break-after: always;
}
.toc > ol li {
	position: relative;
}
.toc > ol li:before {
	position: absolute;
	left: -3.5em;
	min-width: 2em;
	text-align: right;
	content: counters(listitem, ".", decimal) " ";
	font-style: normal;
	font-size: 85%;
	vertical-align: middle;
	display: inline;
	margin: 0;
	color: #666;
}
.toc > ol > li > ol > li > ol > li > ol > li > ol li:before {
	content: '';
}
.toc > ol li.frontmatter:before, .toc > ol li.backmatter:before {
	content: '';
	counter-reset: listitem;
}
.toc > ol li.part:before {
	content: '';
}
.toc > ol li.part > a:before {
	content: "Part " counters(listitem, ".", decimal) ": ";
}

aside.sample {
	counter-reset: section1 -1;
}

/* Long-form works have numbered sections */

.book>article { counter-reset: section1; }
.book>article>section>h1:before { counter-increment: section1; content: counter(section1) " "; }
.book>article>section { counter-reset: section2; }
.book>article>section>section>h1:before { counter-increment: section2; content: counter(section1) "." counter(section2) " "; }
.book>article>section>section { counter-reset: section3; }
.book>article>section>section>section>h1:before { counter-increment: section3; content: counter(section1) "." counter(section2) "." counter(section3) " "; }

@media screen and (min-width: 1080px), print {
	article > section h1 {
		position: relative;
	}
	article > section h1:before {
		position: absolute;
		left: -3em;
		min-width: 2.5em;
		text-align: right;	
	}
}

Horizontal rules

A horizontal rule consists of a single, medium grey (#666666), 0.1em horizontal line with 1em top and bottom margins running full width.

Sample

DocBook mark-up

Explicit horizontal rules are not supported in DocBook documents.

HTML mark-up

Horizontal rules are marked up using the <hr> element.

<hr>
CSS styling rules for HTML documents
hr {
	border: none;
	outline: none;
	border-bottom: solid #666666 0.1em;
	margin: 1em 0;
}

Code samples

Code sample blocks are set in monospace type at single-spaced 0.75em, with a preference for Inconsolata, DejaVu Sans Mono, Menlo or Consolas ahead of the browser default typeface. Code is presented using the Solarized palette, using base02 as the background colour and base1 as the default foreground colour. When printed, the font size is reduced to 8pt, base3 is used for the background, and base00 for the default foreground.

The block has 1em margins on all sides, is padded by 0.5em, has a 6px 50% opacity shadow, and a 4px border on the left-hand side indicating the language or syntax used, which by default is dark grey (#444444). Scrolling is enabled for content which overflows the horizontal margins of the container. When printed, the shadow is removed and text is wrapped within the container in place of scrolling.

Computer output blocks are presented in a matching style, except with a black background instead of base3.

Code block sample

Computer output sample

DocBook mark-up

Code blocks are marked up as a <programlisting> element. The language attribute is used to indicate the language or syntax in use.

<programlisting language="c">/* The canonical sample program */

#include &lt;<filename class="headerfile">stdio.h</filename>&gt;

<type>int</type>
<function>main</function>(<type>int</type> <parameter>argc</parameter>, <type>char **</type><parameter>argv</parameter>)
{
    (<type>void</type>) <parameter>argc</parameter>;
    (<type>void</type>) <parameter>argv</parameter>;

    <function>puts</function>(<literal>"hello, world."</literal>);

    return <literal>0</literal>;
}
</programlisting>

Output blocks are marked up as a <screen> element.

<screen><prompt>sysop@host-10-47-63-1:~ $</prompt> <userinput>sudo apt-get install emacs23-nox</userinput>
<prompt>[sudo] password for sysop:</prompt> <userinput>[your password]</userinput>
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following extra packages will be installed:
  dbus emacs23-bin-common emacs23-common emacsen-common libasound2 libdbus-1-3
  libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
Suggested packages:
  dbus-x11 emacs23-el emacs23-common-non-dfsg libasound2-plugins gpm
The following NEW packages will be installed:
  dbus emacs23-bin-common emacs23-common emacs23-nox emacsen-common libasound2
  libdbus-1-3 libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
0 upgraded, 11 newly installed, 0 to remove and 4 not upgraded.
Need to get 23.2 MB of archives.
After this operation, 75.9 MB of additional disk space will be used.
<prompt>Do you want to continue [Y/n]?</prompt> <userinput>y</userinput></screen>
HTML mark-up

Code blocks are marked up as a <pre> element with a code class applied, containing a <code> element. A class should also be applied to the <pre> element indicating the language or syntax in use; classes applied to individual <span> elements within the block may be used for syntax highlighting.

The code sample above was produced with the following HTML:

<pre class="c code"><code><span class="comment">/* The canonical sample program */</span>

<span class="preproc">#include &lt;stdio.h&gt;</span>

<span class="type">int</span>
<span class="ident">main</span>(<span class="type">int</span> <span class="param">argc</span>, <span class="type">char</span> **<span class="param">argv</span>)
{
	(<span class="type">void</span>) <span class="param">argc</span>;
	(<span class="type">void</span>) <span class="param">argv</span>;

	<span class="ident">puts</span>(<span class="string">"hello, world."</span>);

	<span class="keyword">return</span> 0;
}
</code></pre>

Output blocks are marked up as a <pre> element with an output class applied, containing a <samp> element. Within the body of the output, the <kbd> element is used to indicate portions of user input.

The output sample above was produced with the following HTML:

<pre class="output"><samp>sysop@host-10-47-63-1:~ $ <kbd>sudo apt-get install emacs23-nox</kbd>
[sudo] password for sysop: <kbd>[your password]</kbd>
Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following extra packages will be installed:
  dbus emacs23-bin-common emacs23-common emacsen-common libasound2 libdbus-1-3
  libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
Suggested packages:
  dbus-x11 emacs23-el emacs23-common-non-dfsg libasound2-plugins gpm
The following NEW packages will be installed:
  dbus emacs23-bin-common emacs23-common emacs23-nox emacsen-common libasound2
  libdbus-1-3 libgpm2 liblockfile-bin liblockfile1 libsystemd-login0
0 upgraded, 11 newly installed, 0 to remove and 4 not upgraded.
Need to get 23.2 MB of archives.
After this operation, 75.9 MB of additional disk space will be used.
Do you want to continue [Y/n]? <kbd>y</kbd>
</samp></pre>
CSS styling rules for HTML documents
pre {
	margin: 1em;
	padding: 0.5em;
	box-shadow: 0 0 6px rgba(0,0,0,0.5);
	border-left: 0.5em solid #444;
	border-radius: 4px;
	line-height: 1.0;
	overflow: scroll;
}
pre.code {
	background: #002b36;
}
pre.output {
	background: #000;	
}
pre > code, pre > samp {
	color: #93a1a1;
}
pre.output kbd {
	background: #404040;
	color: #fff;
}
pre.css.code { border-left-color: #2aa198; }
pre.html.code { border-left-color: #268bd2; }
pre.js.code { border-left-color: #2aa198; }
pre.c.code { border-left-color: #dc322f; }

pre.code .keyword { color: #268bd2; }
pre.code .type { color: #b58900; }
pre.code .ident { color: #2aa198; }
pre.code .param { font-weight: bold; }
pre.code .string, pre.code .number, pre.code .literal { color: #859900; }
pre.code .builtin { color: #cb4b16; }
pre.code .comment { color: #93a1a1; font-weight: italic; }
pre.code .preproc { color: #dc322f; font-style: italic; }

pre.code .css-el { color: #6c71c4; }
CSS styling rules for HTML documents (for print)
pre {
	page-break-inside: avoid;
}
pre.code, pre.output {
	box-shadow: none;
	margin: 1em 0;
	background: #fdf6e3;
	white-space: pre-wrap;
}
code {
	font-size: 8pt;
}
pre>code, pre>samp {
	color: #657b83;
}
pre.output kbd {
	background: #e6e6e6;
	color: #000;
}

Tables

Sample

DocBook mark-up
HTML mark-up
<div class="table">
	<table class="numeric">
		<caption>iPlayer requests June-August 2012 (millions)</caption>
		<thead>
			<tr>
				<td colspan="2" class="empty"></td>
				<th scope="col">June</th>
				<th scope="col">July</th>
				<th scope="col">August</th>
			</tr>
		</thead>
		<tfoot>
			<th colspan="5">All figures from the <cite><a href="http://www.bbc.co.uk/mediacentre/latestnews/2012/iplayer-performance-jun-aug12.html">BBC iPlayer Performance Pack June to August 2012</a></cite></th>
		</tfoot>
		<tbody>
			<tr>
				<th class="rowgroup" scope="row" rowspan="2">By programme type</th>
				<th scope="row">TV requests</th>
				<td>125</td>
				<td>130</td>
				<td>151</td>
			</tr>
			<tr>
				<th scope="row">Radio requests</th>
				<td>42</td>
				<td>45</td>
				<td>46</td>
			</tr>
		</tbody>
	
		<tbody>
			<tr>
				<th class="rowgroup" scope="row" rowspan="7">By device type</th>
				<th scope="row">Internet TV</th>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
			<tr>
				<th scope="row">TV platform operators</th>
				<td>21</td>
				<td>21</td>
				<td>22</td>
			</tr>
			<tr>
				<th scope="row">Games consoles</th>
				<td>9</td>
				<td>9</td>
				<td>10</td>
			</tr>
			<tr>
				<th scope="row">Computers</th>
				<td>96</td>
				<td>103</td>
				<td>113</td>
			</tr>
			<tr>
				<th scope="row">Tablets</th>
				<td>13</td>
				<td>14</td>
				<td>17</td>
			</tr>
			<tr>
				<th scope="row">Mobile devices</th>
				<td>15</td>
				<td>17</td>
				<td>22</td>
			</tr>
		
			<tr>
				<th scope="row">Unknown</th>
				<td>9</td>
				<td>9</td>
				<td>10</td>
			</tr>
		</tbody>	
	</table>
</div>
CSS styling rules for HTML documents
table, td, tr, th {
	border-collapse: collapse;
	border: solid #e6e6e6 1px;
}
div.table {
	overflow: scroll;
}
table {
	table-layout: fixed;
	margin: 1em 0;
	border-top: 0.5em solid #636363;
	caption-side: bottom;
}
td {
	vertical-align: middle;
	padding: 0.5em;
}
thead, tfoot {
	background: #e6e6e6;
}
th {
	font-weight: normal;
	vertical-align: middle;
	padding: 0.5em;
}
tbody > tr > th {
	text-align: left;
}
caption {
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', 'Gotham Rounded', sans-serif;
	font-weight: normal;
	font-size: 0.85em;
	margin-bottom: 0.5em;
}
tfoot {
	font-size: 0.85em;
}
tfoot th {
	font-weight: 300;
}
table.numeric td, tbody.numeric td, tr.numeric td, td.numeric {
	text-align: right;
}

Figures

Sample

DocBook mark-up
HTML mark-up
<figure>
	<img src="images/1571454020_49ccbe3a59_m.jpg" alt="Irish Rose">
	<figcaption>
		<i>Irish Rose</i><br>
		<small>Available for re-use under the terms of the <a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Creative Commons Attribution 2.0 License</a> on <a href="http://www.flickr.com/photos/nevali/sets/72157605898888517">Flickr</a>.</small>
	</figcaption>
</figure>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
CSS styling rules for HTML documents
figure {
	clear: right;
	float: right;
	display: inline-table;
	margin: 1em;
	padding: 0;
	border: solid #e6e6e6 1px;
	position: relative;
	page-break-inside: avoid;
	max-width: 30%;
	text-align: center;
	caption-side: bottom;
	box-sizing: border-box;
	vertical-align: top;
}
figure>*, figure img {
	display: block;
	max-width: 100%;
	box-sizing: border-box;
	width: 100%;
}
figure>figcaption {
	display: table-caption;
	background: #e6e6e6;
	color: #000;
	margin: 0;
	font-size: 9pt;
	line-height: 1.5;
	padding: 0.25em 0.5em;
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
	font-weight: 300;
	text-align: center;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

figure.stacked {
	float: left;
	clear: none;
	max-width: 100%;
}
figure.full {
	float: none;
	clear: none;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
figure.half {
	float: none;
	max-width: 48%;
	margin-left: 1%;
	margin-right: 1%;
}
figure.half:nth-child(even) {
	clear: none;
}

figure.third {
	float: none;
	max-width: 30%;
	margin-left: 1%;
	margin-right: 1%;
}
figure.third:nth-child(3n+2), figure.third:nth-child(3n+3) {
	clear: none;
}

Call-outs

Sample

DocBook mark-up
<note>
	<para>This is a <tag class="element">note</tag> call-out.</para>
</note>

<tip>
	<para>This is a <tag class="element">tip</tag> call-out.</para>
</tip>

<warning>
	<para>This is a <tag class="element">warning</tag> call-out.</para>
</warning>

<important>
	<para>This is an <tag class="element">important</tag> call-out.</para>
</important>

<caution>
	<para>This is a <tag class="element">caution</tag> call-out.</para>
</caution>
HTML mark-up
<aside class="info">
	This is an information call-out.
</aside>

<aside class="tip">
	This is a tip call-out.
</aside>

<aside class="warning">
	This is a warning call-out.
</aside>

<aside class="important">
	This is an important call-out.
</aside>

<aside class="caution">
	This is a caution call-out.
</aside>
CSS styling rules for HTML documents
aside.info, aside.tip, aside.important, aside.warning, aside.caution {
	margin: 1em;
	padding: 0.75em 0.5em 0.75em 3em;
	box-shadow: 0 0 6px rgba(0,0,0,0.5);
	border-left: 0.5em solid #444;
	border-radius: 4px;
	position: relative;
	line-height: 1.4;
}
aside.tip { border-left-color: #859900; }
aside.tip:before {
	background: #859900;
	content: 'i';
	font: italic normal 1em serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 0.75em;
	color: #fff;
}
aside.info { 
	border-left-color: #268bd2; 
	overflow: scroll;
}
aside.info:before {
	background: #268bd2;
	content: 'i';
	font: italic normal 1em serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 0.75em;
	color: #fff;
}
aside.warning { border-left-color: #b58900; }
aside.warning:before {
	background: #b58900;
	content: '!';
	font: normal bold 1em serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 0.75em;
	color: #fff;
}
aside.important { border-left-color: #dc322f; }
aside.important:before {
	content: '!';
	font: normal normal 1em sans-serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.4em;
	text-align: center;
	background: #dc322f;
	border-radius: 0.75em;
	color: #fff;	
}
aside.caution { border-left-color: #dc322f; }
aside.caution:before {
	content: '—';
	font: normal normal 1em sans-serif;
	position: absolute;
	left: 0.75em;
	top: 50%;
	width: 1.5em;
	height: 1.5em;
	margin-top: -0.75em;
	line-height: 1.4em;
	text-align: center;
	background: #dc322f;
	border-radius: 0.75em;
	color: #fff;	
}
aside>p:first-child {
	margin-top: 0;
}
aside>p:last-child {
	margin-bottom: 0;
}

Examples

Sample

DocBook mark-up

In DocBook documents, examples are marked up using the <example> element, optionally including a <title>.

<example>
  <title>Sample paragraph</title>
  <para>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</para>
</example>
HTML mark-up

In HTML documents, examples consist of an <aside> with a class of example. If the example has a title, then it is marked up as an <h1> with a class of example-title.

<aside class="example">
  <h1 class="example-title">Sample paragraph</h1>
  <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
</example>
CSS styling rules for HTML documents
aside.example {
	margin: 1em auto;
	padding: 1em;
	border: solid #e6e6e6 1px;
	position: relative;
	page-break-inside: avoid;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	_height: 1%;
	display: table;
	caption-side: bottom;
	width: 100%;
	box-sizing: border-box;
}
aside.example>h1.example-title {
	display: table-caption;
	background: #e6e6e6;
	color: #000;
	margin: 0;
	font-size: 9pt;
	line-height: 1.5;
	padding: 0.25em 0.5em;
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
	font-weight: 300;
	text-align: center;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}
aside.example:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
aside.example:before {
	content: 'Example';
	background: #e6e6e6;
	color: white;
	position: absolute;	
	margin: -1px -1px 0 0;
	top: 0;
	right: 0;
	font-size: 9pt;
	line-height: 1.5;
	padding: 0 0.5em;
	border-top-right-radius: 4px;
	border-bottom-left-radius: 4px;
	font-family: 'Gotham Rounded SSm A', 'Gotham Rounded SSm B', 'Gotham Rounded A', 'Gotham Rounded B', sans-serif;
	font-weight: 300;
	text-transform: lowercase;
}
aside.example:hover {
	border: solid #848484 1px;
}
aside.example:hover:before {
	background: #848484;
}
aside.example:hover>h1.example-title {
	background: #848484;
}

Quotations

Sample

DocBook mark-up
<para>
	Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</para>
<blockquote>
	<para>
		The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
	</para>
	<attribution><link xlink:href="http://www.blindtextgenerator.com/lorem-ipsum">Blind text generator</link>, 3rd January 2014</attribution>
</blockquote>
HTML mark-up
<p>
	Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
</p>
<blockquote>
	<p>
		The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.
	</p>
	<footer>
		<cite><a href="http://www.blindtextgenerator.com/lorem-ipsum">Blind text generator</a>, 3rd January 2014</cite>
	</footer>
</blockquote>
CSS styling rules for HTML documents
blockquote {
	margin: 1em 1em 1em 0em;
	padding: 0 0 0 1em;
	border-left: 0.5em solid #e6e6e6;
	line-height: 1.4;
	color: #404040;
}

Footnotes

Sample

DocBook mark-up
HTML mark-up
<p>
	Far far away, behind the word mountains<sup id="ref-mountains" class="footnote"><a href="#fn-mountains">1</a></sup>, far from the countries Vokalia and Consonantia, there live the blind texts.
</p>

<footer>
	<div class="footnotes">
		<ul>
			<li id="fn-mountains" class="footnote"><a href="#ref-mountains">1</a>: It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</li>
		</ul>
	</div>
</footer>
CSS styling rules for HTML documents
.footnote>a:link, .footnote>a:visited {
	color: #268bd2;
	text-decoration: none;
}
.footnote>a:hover, .footnote>a:active {
	color: #000;
}
.footnotes ul {
	list-style: none;
}

Forms

In-line elements

This section describes the styling of elements which appear in-line: that is, within body text. Typical in-line elements include those for creating hyperlinks, emphasis, and code literals.

Emphasis

Emphasis is marked up using the <em> element, with strong emphasis using the <strong> element. Emphasised text is presented in italics, with strongly-emphasised text presented at medium-weight (500). Very strong emphasis is marked up using the <em> and <strong> elements together and is presented in medium-weight italics.

Sample

DocBook mark-up
<para>Un-emphasised text</para>

<para><emphasis>Emphasised text</emphasis></para>

<para><emphasis role="strong">Strongly-emphasised text</emphasis></para>
HTML mark-up

The sample above was produced with the following HTML:

<p>Un-emphasised text</p>

<p><em>Emphasised text</em></p>

<p><strong>Strongly-emphasised text</strong></p>
CSS styling rules for HTML documents
em {
	font-style: italic;
}
strong {
	font-weight: 500;
}

Abbreviations and acronyms

Sample

DocBook mark-up

DocBook documents use separate elements for (pronounceable) acronymns—<acronymn>—and other abbreviations—<abbrev>. There is no defined attribute or child element for conveying the expansion of the abbreviation.

<para>
	<abbrev>SSH<alt>Secure Shell</alt></abbrev> is a protocol for establishing encrypted
	connections between Internet or local network hosts. Connections may be
	established using <abbrev>IPv4<alt>Internet Protocol, version 4</alt></abbrev> or <abbrev>IPv6<alt>Internet Protocol, version 6</alt></abbrev>, and
	<abbrev>SSH</abbrev> clients and servers are available for many platforms,
	ranging from aged <abbrev>PCs</abbrev> running <acronym>DOS<alt>Microsoft's MS-DOS, and compatible equivalents, was the operating system shipped with most PCs prior to Windows 95’s release</alt></acronym>,
	through mobile phones, to supercomputers.
</para>
HTML mark-up

Abbreviations and acronyms are both marked up using the <abbr> in-line element; the title attribute is used to convey the expansion of the abbreviation.

The sample above was produced with the following HTML:

<p>
	<abbr title="Secure Shell">SSH</abbr> is a protocol for establishing encrypted
	connections between Internet or local network hosts. Connections may be
	established using <abbr title="Internet Protocol, version 4">IPv4</abbr> or
	<abbr title="Internet Protocol, version 6">IPv6</abbr>, and <abbr>SSH</abbr>
	clients and servers are available for many platforms, ranging from aged
	<abbr>PCs</abbr> running
	<abbr title="Microsoft's MS-DOS, and compatible equivalents, was the operating system shipped with most PCs prior to Windows 95’s release">DOS</abbr>,
	through mobile phones, to supercomputers.
</p>
CSS styling rules for HTML documents
abbr[title] {
	border-bottom: dotted #000 1px;
	cursor: help;
}

Code literals

There are various kinds of “code literal” which may be used in-line:

  • generic code fragments, such as the names of HTML or XML elements, CSS classes, and similar;
  • variables, either in a mathematical or computing context;
  • sample computer output;
  • sample computer input

Code fragments, computer variables, and sample computer output are set in a monospace typeface, using (by preference) one of the following:

  • Inconsolata
  • DejaVu Sans Mono
  • Menlo (installed by default on Mac OS X, based upon Bitstream Vera Sans Mono)
  • Consolas (installed on Windows Vista or newer, or where Office has been installed)
  • The browser-specified monospace face

In-line variables names are set in italic sans-serif in one of the following:

  • Arapey
  • The browser-specified sans-serif face

Computer input is set in italics at medium weight in the face of the surrounding text.

Sample

DocBook Mark-up
<para>
	The variable <varname>x</varname> denotes the horizontal coordinate in the plot. The formula in <code>calcplot()</code> is used to calculate the value based upon the supplied value of <varname>y</varname>: <code>return cos(2 * <varname>y</varname>);</code>
</para>
<para>
	To establish a <application>Secure Shell</application> (SSH) connection to a remote host, one types the <command>ssh</command> command at the shell prompt (typically ending with <prompt>$</prompt>). Alternatively, select the <menuchoice><shortcut><keycombo>Cmd+Shift+K</keycombo></shortcut><guimenu>Terminal</guimenu><guimenuitem>New Remote Connection…</guimenuitem></menuchoice> menu option.
</para>
<para>
	Once connected, the <phrase>Message of the Day</phrase> (stored in <filename>/etc/motd</filename>) is printed, and will typically indicate the version of the operating system running on the host you’ve connected to, such as <computeroutput>3.2.46-1 x86_64</computeroutput>.
</para>
HTML Mark-up
<p>
	The variable <var>x</var> denotes the horizontal coordinate in the plot. The formula in <code>calcplot()</code> is used to calculate the value based upon the supplied value of <var>y</var>: <code>return cos(2 * <var>y</var>);</code>
</p>
<p>
	To establish a <cite>Secure Shell</cite> (SSH) connection to a remote host, one types the <kbd>ssh</kbd> command at the shell prompt (typically ending with <samp>$</samp>). Alternatively, select the <kbd><kbd><samp>Terminal</samp></kbd> → <kbd><samp>New Remote Connection…</samp></kbd></kbd> menu option.
</p>
<p>
	Once connected, the <cite>Message of the Day</cite> (stored in <code>/etc/motd</code>) is printed, and will typically indicate the version of the operating system running on the host you’ve connected to, such as <samp>3.2.46-1 x86_64</samp>.
</p>
CSS styling rules for HTML documents
code, samp {
	font-family: Inconsolata, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
	font-size: 0.75em;
	font-weight: normal;
}
code samp, samp code, code code, samp samp {
	font-size: inherit;
}
var {
	font-family: Arapey, serif;
	font-weight: normal;
	font-size: 1em;
	font-style: italic;
	color: inherit;
}
kbd {
	font-family: inherit;
	font-weight: normal;
	font-size: 1em;
	font-style: italic;
	color: inherit;
}
code {
	color: #cb4b16;
}
samp {
	color: #586e75;
}
code var, kbd samp {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}
code var {
	font-weight: bold;
}

Quotations

Sample

Citations

Foreign Phrases

Utilities

Bold and italic

HTML documents support applying boldface and italics to text for stylistic purposes, conveying no particular semantic intent.

Index of HTML elements

<a>
Hyperlinks
<abbr>
Abbreviations and acronyms
<acronym>
Abbreviations and acronyms
<article>
Body matter
<blockquote>
Quotations
<cite>
Citations
<code>
Code samples
Code literals
<dl>, <dt>, <dd>
Definition lists
<em>
Emphasis
<figure>, <figcaption>
Figures
<footer>
Document footer & back matter
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Headings
<header>
Document header & front matter
<hr>
<kbd>
Code literals
<img>
Figures
<li>
Ordered lists
Un-ordered lists
<nav>
Global navigation
<ol>
Ordered lists
<p>
Body text
<pre>
Code samples
<q>
Quotations
<samp>
Code samples
Code literals
<section>
Document header & front matter
Body matter
Document footer & back matter
<table>
Tables
<ul>
Un-ordered lists
<strong>
Emphasis
<var>
Code literals