Typographic characters in XML and HTML
This article explains how typographical rules can be implemented in HTML documents.
quotation marks
Quotation marks are commonly used in three cases:
- To represent verbatim speech.
- To refer to the word instead of the thing it means
- To emphasize irony.
On the other hand, it is unusual to use quotation marks to indicate accents or titles of books, songs, etc. Instead, a stressed representation should be used for this (see below).
Mistakes are common when using quotation marks. Here is a list of the correct use of various quotation marks. For the sake of clarity, spaces are highlighted with “␣” in the result.
| designation | example | Result |
|---|---|---|
| Quotation marks (Germany, Austria) |
„Beispiel“
|
"Example" |
| Quotation marks |
‘example’
|
'example' |
| Single quotation marks (Germany, Austria) |
‚Beispiel‘
|
,Example' |
| Double quotation marks (English, in the American standard) |
“example”
|
"Example" |
| Guillemets (German) |
»Beispiel«
|
"Example" |
| Guillemets (French) |
« exemple »
|
«␣exemple␣» |
| Guillemets (Swiss) |
«Beispiel»
|
"Example" |
| Simple guillemets (German) |
›Beispiel‹
|
>Example< |
| Simple guillemets (French) |
‹ exemple ›
|
‹␣exemple␣› |
| Simple guillemets (Swiss) |
‹Beispiel›
|
<Example> |
Single quotation marks are usually only used within quoted areas.
Quotation marks are used for quotations or to mark individual words as ironic. However, they are not used for emphasis. This too is often done wrong. Instead, the elements emand are suitable for emphasis strong.
The correct use of quotation marks is supported by CSS 2 through the quotes property, which is only evaluated by current browsers.
Strokes
Lines are also often mixed up. In particular, the hyphen , which is located to the left of the right shift key on the German keyboard, is misused for all possible dashes.
| designation | example | Result |
|---|---|---|
| Hyphen , hyphen (German) |
H-Milch
|
UHT milk |
| Dash (German) |
Wort1 – Wort2
|
Word1 - Word2 |
| Dash (US English) |
word1—word2
|
word1 — word2 |
| Dash (russian) |
Слово1 — Слово2
|
Слово1 - Слово2 |
| Route line (German) |
Kiel–Berlin
|
Kiel – Berlin |
| Against Strich (German) |
Schalke – HSV
|
Schalke - HSV |
| Bis-Strich (German) |
1979–2010
|
1979-2010 |
| Up bar (English) |
1979/2010
|
1979/2010 |
| Dash for currency information |
42,– EUR
|
42, - EUR |
The German dash ( en dash ) can be - when using the right encoding - Windows by typing 0150 on the numeric keypad while holding down the Alt key produce, on Mac OS X by holding down the Option key and the hyphen key. With many MS Windows programs, the combination of the Ctrl key and "-" from the numeric keypad also works.
With non-proportional fonts , for example Courier or with old typewriters, typographers recommend adding spaces around the bis-line.
Spaces
Often you want to avoid a break with a space . It usually doesn't look good if a line break occurs in multi-part abbreviations. Therefore, the non-breaking space is used here .
Instead of the normal breaking space ( ) one would partially in the following examples narrow -breaking space (  ) more accurately, but is not yet supported by many browsers. Some browsers also have problems with the −( −), so that the hyphen is almost always used for it.
| designation | example | Result |
|---|---|---|
| Abbreviations |
z. B.
|
z. B. |
| Dimensions |
100 km, 98 %
|
100 km, 98% |
| Arithmetic symbol |
−2 + 5 · 1 = 6 : 2−2 + 5 × 1 = 6 ÷ 2
|
−2 + 5 1 = 6: 2 −2 + 5 × 1 = 6 ÷ 2 |
| numbers |
1 234,567 89
|
1,234,567 89 |
| Version numbers Abbreviations, paragraphs |
CSS 2, XHTML 2.0S. 48: § 11 Abs. 9
|
CSS 2, XHTML 2.0 p. 48: Section 11 Paragraph 9 |
For multi-part abbreviations, however, formatting with CSS is also suitable , which has a direct influence on the line break of abbreviations and the width of the space. For example, the abbrelement can be formatted globally. Although this does not work in the current Internet Explorer, it is not  perceived as annoying there, unlike the use of . In addition, the meaning of an abbreviation can be titlestored and, if necessary, formatted using the attribute.
Example: <abbr title="zum Beispiel" style="white-space:nowrap; word-spacing:-0.1em;">z. B.</abbr>gives z. B.
A comparable effect can also be achieved for measurements in connection with span.
Ellipsis
Ellipses (...) are represented with the entity reference …( …). It is preceded by a space if the previous word has ended. If only a partial word (e.g. "Teilw ...") is separated, there is no space in front of it.
The ellipses can be created under Windows by entering "0 1 3 3" on the numeric keypad while holding down the Alt key and under OS X by using the key combination Alt-Taste + ..
See also
Web links
- Typolexikon.de
- W3C Recommendation CSS2 (English)
Individual evidence
- ↑ Generated content, automatic numbering, and lists. Retrieved September 9, 2019 .