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

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

  • HTML editors – including Notepad, TextEdit, (in the mode we are using it in), , Web Expressions, and others – do not understand the subtleness of typography. However word processors – such as Microsoft Word and the OpenOffice suite – 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 are also very useful tools to share body copy with clients. Most have an option to “track changes”, so that when a client alters or adds body copy in a document you can tell when and where. This is a lot easier than trying to have the client work on a web page, or having them communicate changes via phone or eMail. (We will address working with clients later).

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 (&frac followed by the numerator and denominator: for example, &frac34; to generate ¾), and others.

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.