demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Workflow for web page body text

html / typography

Estimated reading time: 2 minutes, 30 seconds

The workflow for producing correctly formatted body copy for the web can be broken down to three major steps:

Write your body copy in a word processor

  • The majority of HTML editors – including Notepad, TextEdit and – do not understand the subtlties of typography, while word processors, such as Microsoft Word and OpenOffice, do. They will correctly encode the majority of our body text, including correct apostrophes and hyphens.

  • Word processors also give the advantage of checking your work inline – that is, “on the fly”, as you type, for grammar and spelling errors.

  • Word processors formats are understood by clients. Most have an option to “track changes”, allowing you to tell when a client alters or adds body copy in the document. This is a lot easier than communicating changes via phone or eMail.

Transfer this body copy into your HTML document via copy-and-paste

Apply appropriate markup manually, or generate tags using an online utlity like Word to Clean HTML or DreamWeaver’s built-in Word text conversion tools.

Inevitably you will have to edit and further clean up the resulting code. There are several tags that produce semantic and typographical changes:

  • The inline element <q> is used for short quotations, and will produce the correct opening and closing “smart” quotes.

  • <blockquote>, a block tag, wraps around a larger quotation from a source. (For this reason, text inside the <blockquote> is often divided up into several paragraphs). <blockquote> indents the enclosed text by default, but remember it is the meaning that counts, not its default appearance. <blockquote> does not automatically produce quote marks, although it can be made to do so via CSS.

  • <hr> introduces a horizontal rule, a visual break between text elements.

  • <cite> is for an inline citation of a book, film, article or other work. In terms of presentation, it italicizes content by default.

Add HTML Entities into the body copy where appropriate.

For the most part the previous steps will take care of most basic typography issues. There are, however, a few characters that can be tricky to generate in a word processor if you don’t know how: for example, the correct characters for feet and inches (they’re not single and double quotes: use the HTML entities &Prime; and &prime; instead; note that HTML entities are case-sensitive), the character for degree (as in “It’s 39°C outside.”: &deg;), how to do a correct common fraction.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.