HTML authoring in French

This document discusses some basic problems with accented characters, guillemets, etc., when authoring HTML documents in French.

In French, the following characters are used in addition to the ASCII repertoire (which shouldn't cause problems):

• characters with diacritic marks like à and ô
• the ligature oe
• guillemets (« comme ici ») and single guillemets
• the em dash and the en dash
• the euro sign.

French typography rules for spacing need to be taken into account, too. For example, a space is required before a semicolon (:). A normal space character should not be used there, however, since by a HTML rules that would allow a line break before the semicolon! Thus, a no-break space character, NBSP, is needed.

The following tables suggest some ways to insert the characters into an HTML document as follows:

• The first column suggests a "Windows way", which can be used to insert the character on most programs used under MS Windows. Note that more convenient ways can be available, especially if you use a keyboard with keys for composing accented characters (or, simpler still, with separate keys for them). The essential thing here is that the the character is included into the data as such, more exactly as a single octet (byte). On other systems and programs, use some other way to insert the character, if the system or program uses the ISO Latin 1 (ISO-8859-1) encoding. (Unix systems generally do. Macs don't, and neither do DOS programs, so on them, this method is inapplicable.)
• The second column suggests a way which can be used on any system. However, it makes texts hard to read when writing and editing them. Moreover, the numeric references listed below are not yet universally supported by browsers.
• The third column suggests a surrogate notation, which can be typographically inferior but works universally.

Vowels with diacritic marks

	Windows	univ. reference	surrogate
à	0224	à
À	0192	À
â	0226	â
Â	0194	Â
è	0232	è
È	0200	È
é	0233	é
É	0201	É
ê	0234	ê
Ê	0202	Ê
ë	0235	ë
Ë	0203	Ë
î	0238	î
Î	0206	Î
ï	0239	ï
Ï	0207	Ï
ô	0244	ô
Ô	0212	Ô
û	0251	û
ù	0249	ù
Ù	0217	Ù
Û	0219	Û
ü	0252	ü
Ü	0220	Ü
ÿ	0255	ÿ
Ÿ		Ÿ	Y

Other characters

glyph	name	Windows	univ. reference	surrogate
ç	c with cedilla	0231	ç
Ç	C with cedilla	0199	Ç
œ	oe ligature		œ	oe (perhaps with CSS)
Œ	OE ligature		Œ	OE or Oe (perhaps with CSS)
«	left guillemet	0171	«	" (ASCII quotation mark)
»	right guillemet	0187	»	" (ASCII quotation mark)
‹	left single guillemet		‹	' (ASCII apostrophe)
›	right single guillemet		›	' (ASCII apostrophe)
—	em dash (cadratin)		—	-- (two ASCII hyphens)
–	en dash (demi-cadratin)		–	- (ASCII hyphen)
€	euro sign		€	euro or euros
	no-break space	0160	 

Example: To produce « ici », you could use, on Windows,
01710160ici01600187
and see the text really as « ici » in some font. Or you could type, on any system,
« ici &raquo
and have it displayed properly on a browser but shown as the codes in an editor. Yes, both ways are clumsy. That's why simplified style like "ici" is used so much. Your choice. Note that there might be some suitable authoring utilities, like programs which convert e.g. "ici" to the correct notation; after all, it's a rather straightforward task.

Warning: Some of the characters (capital Y with diereresis, OE and oe ligatures, and euro sign) can be produced on Windows using the Alt-number method. But this results in a Windows-specific code for the character to be inserted, and therefore does not work reliably on the WWW. Since the numeric references don't work universally either, the use of a surrogate (or alternate) notations is generally recommendable at present. For more information on this, see the documents On the use of some MS Windows characters in HTML and The euro sign in HTML and in some other contexts.

The problem with "oe"

The simplest and safest way to deal with the problem that ISO Latin 1 does not contain the oe ligature character is to use just the two characters "oe". If you think that this is typographically unacceptable, there are several possibilities, such as using the numeric reference œ, using some Unicode encoding, and using ISO Latin 9 (ISO 8859-15). All of those methods cause some accessibility problems, however.

There is however a method that avoids the accessibility problems, yet achieves the desired presentational effect in a large number of browsing situations. The idea is to use the character pair oe (or Oe or OE, as the case may be) but with style sheet techniques that suggest reduced spacing between the characters. This means using markup like
<span class="lig">oe</span>
and a CSS rule like
.lig { letter-spacing: -0.15em; }
This paragraph uses that technique, so you might be able to see the effect. And when the technique does not work (e.g., on Netscape 4), plain "oe" is displayed, so this approach "degrades gracefully".

Spacing

The French language uses special spacing in connection with several punctuation characters, for example before an exclamation mark. For example, Lexique des Règles Typographiques en usage à l'Imprimerie Nationale says that there should be a "½ cadratin" wide space after an opening quotation mark and before a closing quotation mark. That would half an em space, i.e. an en space. Quite obviously, such spaces should be non-breaking, but there is no non-breaking en space in Unicode!

There are several possible approaches to this problem:

• omit the spaces, which avoids undesired line breaks but is orthographically and typographically incorrect
• use no-break spaces, which avoids undesired line breaks but is typographically bad; this is the simple approach suggested above
• use no-break spaces and use some formatting techniques, such as the CSS word-spacing property, to reduce the width of the spaces
• use narrower spaces (see notes on space characters in Unicode below), which might give the desired typography, at the risk of causing seriously incorrect line breaks
• as above, with some technique for preventing line breaks (such as the nobr markup) as the CSS word-spacing property, to reduce the width of the spaces

The terms and rules for spacing in French ortography are somewhat confusing and mixed. For example, Microsoft's Character design standards - Punctuation 1 says:

Traditionally in French typography the left pointing guillemets are followed by a non-breaking word space or thin space of 1/8 the em and the right proceeded by a non-breaking word space or thin space of 1/8 the em.

This is strange, since a no-break space is normally too wide, and in Unicode the thin space character is defined as "1/5 em (or sometimes 1/6 em)". It seems that the description is meant to justify the actual behavior of Microsoft software rather than cite the true French rules:

In Microsoft Word 97 the non-breaking space U+00A0 is automatically inserted when the French language is selected and a guillemet is typed. Some French typographers prefer to use a non-breaking thin space (espace fine insécables) with the guillemets.

It seems that espace mots insécable 'no-break inter-word space' is often confused with espace fine insécable 'fine (narrow) no-break space'.

In theory, there is a large number of different space characters; see Unicode block General Punctuation, or a summary of space characters in Unicode. You could consider using the Unicode character U+2009 THIN SPACE, which according to the Unicode standard has the width of "a fifth of an em (or sometimes a sixth)". On the other hand, it's just a variant of the normal space, so it is breakable, and you surely don't want that. There's also U+202F NARROW NO-BREAK SPACE. But this character is much less widely supported than the no-break space. What's worse, browsers display various things, like a small box or a question mark, when encountering a character they don't support.

Superscript style

It is customary to use superscript style for some endings in French. In HTML, you can use sup markup for the purpose. For example, the abbreviation M^lle can be written as M<sup>lle</sup>. However, note that any use of sup may cause uneven line spacing on some browsers.

Need other characters?

Moreover, you may need all kinds of other characters too. Your text may contain words or quotations in other languages; for Western European languages, ISO Latin 1 is usually sufficient, and you can use entities (similar to à) for them (as well as for some symbols like § and ©), but for Polish or Greek for example you need other methods. If you write about mathematics, you'd like to use mathematical symbols, etc. But those issues are rather difficult, and mostly independent of the natural language used, so here we just refer to a general discussion: Using national and special characters in HTML.

Resources on writing French:

• L'Essentiel de la nouvelle orthographe
• Règles de typographie française
• Composition des textes scientifiques
• Les règles de ponctuation minimales