Skip to content

Commit 75ce74e

Browse files
author
John Daggett
committed
add font feature illustrations
1 parent fb33378 commit 75ce74e

19 files changed

Lines changed: 96 additions & 10 deletions

‎css3-fonts/Overview.html‎

Lines changed: 96 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,15 @@
9393

9494
pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
9595

96+
div.featex {
97+
width: 700px;
98+
}
99+
100+
div.featex img {
101+
margin: auto;
102+
display: block;
103+
}
104+
96105
</style>
97106

98107
<body>
@@ -102,15 +111,15 @@
102111

103112
<h1>CSS Fonts Module Level 3</h1>
104113

105-
<h2 class="no-num no-toc" id=editors-draft-19-february-2010>Editor's Draft
106-
19 February 2010</h2>
114+
<h2 class="no-num no-toc" id=editors-draft-22-february-2010>Editor's Draft
115+
22 February 2010</h2>
107116

108117
<dl id=authors>
109118
<dt>This version:
110119

111120
<dd><a
112121
href="http://dev.w3.org/csswg/css3-fonts/">http://dev.w3.org/csswg/css3-fonts/</a>
113-
<!-- <dd><a href="http://www.w3.org/TR/2010/ED-css3-fonts-20100219">http://www.w3.org/TR/2010/ED-css3-fonts-20100219</a> -->
122+
<!-- <dd><a href="http://www.w3.org/TR/2010/ED-css3-fonts-20100222">http://www.w3.org/TR/2010/ED-css3-fonts-20100222</a> -->
114123

115124

116125
<dt>Latest version:
@@ -2046,17 +2055,29 @@ <h3 id=ligatures-the-font-variant-ligatures-pro><span class=secno>4.1
20462055

20472056
<dd>Enables rendering of common ligatures (OpenType feature:
20482057
<code>liga</code>).
2058+
</dl>
2059+
2060+
<div class=featex><img alt="common ligature example" src=liga.png></div>
20492061

2062+
<dl>
20502063
<dt><dfn id=additional-ligatures>additional-ligatures</dfn>
20512064

20522065
<dd>Enables rendering of additional ligatures (OpenType feature:
20532066
<code>dlig</code>).
2067+
</dl>
2068+
2069+
<div class=featex><img alt="additional ligature example" src=dlig.png></div>
20542070

2071+
<dl>
20552072
<dt><dfn id=historical-ligatures>historical-ligatures</dfn>
20562073

20572074
<dd>Enables rendering of historical ligatures (OpenType feature:
20582075
<code>hlig</code>).
2076+
</dl>
20592077

2078+
<div class=featex><img alt="historical ligature example" src=hlig.png></div>
2079+
2080+
<dl>
20602081
<dt><dfn id=no-common-ligatures>no-common-ligatures</dfn>
20612082

20622083
<dd>Disables rendering of common ligatures (OpenType feature:
@@ -2145,13 +2166,21 @@ <h3 id=alternates-and-swashes-the-font-variant-><span class=secno>4.2
21452166
<dt><dfn id=stylisticltnumbergt>stylistic(&lt;number&gt;)</dfn>
21462167

21472168
<dd>Enables rendering of stylistic alternates (OpenType feature:
2148-
<code>salt(&lt;number&gt;)</code>).
2169+
<code>salt &lt;number&gt;</code>).
2170+
</dl>
21492171

2172+
<div class=featex><img alt="stylistic alternate example" src=salt.png></div>
2173+
2174+
<dl>
21502175
<dt><dfn id=contextual>contextual</dfn>
21512176

21522177
<dd>Enables rendering of contextual alternates (OpenType feature:
21532178
<code>calt, clig</code>).
2179+
</dl>
2180+
2181+
<div class=featex><img alt="contextual alternate example" src=calt.png></div>
21542182

2183+
<dl>
21552184
<dt><dfn id=no-contextual>no-contextual</dfn>
21562185

21572186
<dd>Disables rendering of contextual alternates (OpenType feature:
@@ -2161,42 +2190,63 @@ <h3 id=alternates-and-swashes-the-font-variant-><span class=secno>4.2
21612190

21622191
<dd>Enables rendering of historical forms (OpenType feature:
21632192
<code>hist</code>).
2193+
</dl>
2194+
2195+
<div class=featex><img alt="historical form example" src=hist.png></div>
21642196

2197+
<dl>
21652198
<dt><dfn id=stylesetltnumbergt-ltnumbergt>styleset(&lt;number&gt;
21662199
[,&lt;number&gt;])</dfn>
21672200

21682201
<dd>Enables rendering with stylistic alternates (OpenType feature:
21692202
<code>ss&lt;number&gt;</code> OpenType currently defines
21702203
<code>ss01</code> through <code>ss20</code>)
2204+
</dl>
21712205

2206+
<div class=featex><img alt="styleset example" src=ssnn.png></div>
2207+
2208+
<dl>
21722209
<dt><dfn id=swashltnumbergt>swash(&lt;number&gt;)</dfn>
21732210

2174-
<dd>Enables rendering of swash glyphs (OpenType feature:
2175-
<code>swsh(&lt;number&gt;)</code>).
2211+
<dd>Enables rendering of swash glyphs (OpenType feature: <code>swsh
2212+
&lt;number&gt;</code>).
2213+
</dl>
2214+
2215+
<div class=featex><img alt="swash example" src=swsh.png></div>
21762216

2217+
<dl>
21772218
<dt><dfn
21782219
id=contextual-swashltnumbergt>contextual-swash(&lt;number&gt;)</dfn>
21792220

21802221
<dd>Enables rendering of contextual swash glyphs (OpenType feature:
2181-
<code>cswh(&lt;number&gt;)</code>).
2222+
<code>cswh &lt;number&gt;</code>).
21822223

21832224
<dt><dfn id=ornamentsltnumbergt>ornaments(&lt;number&gt;)</dfn>
21842225

21852226
<dd>Enables replacement of default glyphs with ornaments, if provided in
2186-
the font (OpenType feature: <code>ornm(&lt;number&gt;)</code>). Some
2187-
fonts may offer ornament glyphs as alternates for a wide collection of
2227+
the font (OpenType feature: <code>ornm &lt;number&gt;</code>). Some fonts
2228+
may offer ornament glyphs as alternates for a wide collection of
21882229
characters; however, displaying arbitrary characters (e.g.,
21892230
alphanumerics) as ornaments is poor practice as it distorts the semantics
21902231
of the data. Font designers are encouraged to encode all ornaments
21912232
(except those explicitly encoded in the Unicode Dingbats blocks, etc.) as
21922233
alternates for the bullet character (U+2022) to allow authors to select
21932234
the desired glyph using &lt;number&gt;.
2235+
</dl>
2236+
2237+
<div class=featex><img alt="ornaments example" src=ornm.png></div>
21942238

2239+
<dl>
21952240
<dt><dfn id=alt-annotationltnumbergt>alt-annotation(&lt;number&gt;)</dfn>
21962241

21972242
<dd>Enables rendering of alternate annotation forms (OpenType feature:
2198-
<code>nalt(&lt;number&gt;)</code>).
2243+
<code>nalt &lt;number&gt;</code>).
2244+
</dl>
21992245

2246+
<div class=featex><img alt="alternate annotation form example"
2247+
src=nalt.png></div>
2248+
2249+
<dl>
22002250
<dt><dfn id=ruby>ruby</dfn>
22012251

22022252
<dd>Enables rendering of ruby glyphs (OpenType feature:
@@ -2270,7 +2320,11 @@ <h3 id=capitalization-the-font-variant-caps-pro><span class=secno>4.3
22702320
<dd>Enables rendering of small capitals (OpenType feature:
22712321
<code>smcp</code>). Small-caps glyphs are typically use the form of
22722322
uppercase letters but are reduced to the size of lowercase letters.
2323+
</dl>
22732324

2325+
<div class=featex><img alt="small-caps example" src=smcp.png></div>
2326+
2327+
<dl>
22742328
<dt><dfn id=petite-caps>petite-caps</dfn>
22752329

22762330
<dd>Enables rendering of petite capitals (OpenType feature:
@@ -2396,23 +2450,44 @@ <h3 id=numerical-formatting-the-font-variant-nu><span class=secno>4.4
23962450

23972451
<dd>Enables rendering of tabular numerals (OpenType feature:
23982452
<code>tnum</code>).
2453+
</dl>
2454+
2455+
<p>The example below shows how these different properties can be combined
2456+
to influence the rendering of tabular data with fonts that support these
2457+
features:
23992458

2459+
<div class=figure style="padding: 0; margin: auto;"><img alt="combining
2460+
number styles" src=numberstyles.png>
2461+
<p class=caption>Using number styles
2462+
</div>
2463+
2464+
<dl>
24002465
<dt><dfn id=diagonal-fractions>diagonal-fractions</dfn>
24012466

24022467
<dd>Enables rendering of lining diagonal fractions (OpenType feature:
24032468
<code>frac</code>).
2469+
</dl>
2470+
2471+
<div class=featex><img alt="diagonal fraction example" src=frac.png></div>
24042472

2473+
<dl>
24052474
<dt><dfn id=stacked-fractions>stacked-fractions</dfn>
24062475

24072476
<dd>Enables rendering of lining stacked fractions (OpenType feature:
24082477
<code>afrc</code>).
2478+
</dl>
24092479

2480+
<div class=featex><img alt="stacked fraction example" src=afrc.png></div>
2481+
2482+
<dl>
24102483
<dt><dfn id=slashed-zero>slashed-zero</dfn>
24112484

24122485
<dd>Enables rendering of slashed zeros (OpenType feature:
24132486
<code>zero</code>).
24142487
</dl>
24152488

2489+
<div class=featex><img alt="slashed zero example" src=zero.png></div>
2490+
24162491
<p>The values ‘<code class=property><a
24172492
href="#lining-nums">lining-nums</a></code>’ and ‘<code
24182493
class=property><a href="#oldstyle-nums">oldstyle-nums</a></code>’ are
@@ -2497,7 +2572,11 @@ <h3 id=east-asian-text-rendering-the-font-varia><span class=secno>4.5
24972572

24982573
<dd>Enables rendering of JIS78 forms (OpenType feature:
24992574
<code>jp78</code>).
2575+
</dl>
2576+
2577+
<div class=featex><img alt="JIS78 form example" src=jp78.png></div>
25002578

2579+
<dl>
25012580
<dt><dfn id=jis83>jis83</dfn>
25022581

25032582
<dd>Enables rendering of JIS83 forms (OpenType feature:
@@ -2527,7 +2606,11 @@ <h3 id=east-asian-text-rendering-the-font-varia><span class=secno>4.5
25272606

25282607
<dd>Enables rendering of traditional forms (OpenType feature:
25292608
<code>trad</code>).
2609+
</dl>
25302610

2611+
<div class=featex><img alt="tradtional form example" src=trad.png></div>
2612+
2613+
<dl>
25312614
<dt><dfn id=traditional-names>traditional-names</dfn>
25322615

25332616
<dd>Enables rendering of traditional name forms (OpenType feature:
@@ -2550,6 +2633,9 @@ <h3 id=east-asian-text-rendering-the-font-varia><span class=secno>4.5
25502633
<code>pwid</code>).
25512634
</dl>
25522635

2636+
<div class=featex><img alt="proportionally spaced Japanese example"
2637+
src=pwid.png></div>
2638+
25532639
<h3 id=overall-shorthand-for-font-rendering-the><span class=secno>4.6
25542640
</span>Overall shorthand for font rendering: the ‘<code
25552641
class=property><a href="#font-variant0">font-variant</a></code>’

‎css3-fonts/afrc.png‎

3.68 KB
Loading

‎css3-fonts/calt.png‎

8.82 KB
Loading

‎css3-fonts/dlig.png‎

4.16 KB
Loading

‎css3-fonts/frac.png‎

4.33 KB
Loading

‎css3-fonts/hist.png‎

4.5 KB
Loading

‎css3-fonts/hlig.png‎

4.22 KB
Loading

‎css3-fonts/jp78.png‎

7.85 KB
Loading

‎css3-fonts/liga.png‎

2.3 KB
Loading

‎css3-fonts/nalt.png‎

5.44 KB
Loading

0 commit comments

Comments
 (0)