Skip to content

Commit c0a5e0d

Browse files
author
John Daggett
committed
add in introduction text
1 parent b13d0d5 commit c0a5e0d

8 files changed

Lines changed: 80 additions & 7 deletions

‎css3-fonts/Fonts.html‎

Lines changed: 80 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,23 @@
1313
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
1414
type="text/css">
1515

16+
<style type="text/css">
17+
18+
p + p, p.mtb {
19+
margin-top: 0.8em;
20+
text-indent: 0px;
21+
}
22+
23+
</style>
24+
1625
<body>
1726
<div class=head> <!--begin-logo-->
1827
<p><a href="http://www.w3.org/"><img alt=W3C height=48
1928
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--></p>
2029

2130
<h1 id=css-fonts>CSS Fonts Level 3</h1>
2231

23-
<h2 class="no-num no-toc" id=longstatus>Editor's Draft 12 May 2008</h2>
32+
<h2 class="no-num no-toc" id=longstatus>Editor's Draft 14 May 2008</h2>
2433

2534
<dl>
2635
<dt>This version:
@@ -36,8 +45,7 @@ <h2 class="no-num no-toc" id=longstatus>Editor's Draft 12 May 2008</h2>
3645

3746
<dt>Editors:
3847

39-
<dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla
40-
Corporation)</a>
48+
<dd><a href="mailto:jdaggett@mozilla.com">John Daggett (Mozilla)</a>
4149

4250
<dd><a href="mailto:jason.cranfordteague@corp.aol.com">Jason Cranford
4351
Teague (AOL)</a>
@@ -191,6 +199,61 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
191199

192200
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
193201

202+
<p>Font properties determine which fonts are used during rendering. Fonts
203+
represent collections of letterforms, or glyphs, that uniquely describe
204+
the visual appearance of the underlying characters. Typographic traditions
205+
vary across the globe so there is no unique way to classify all fonts
206+
across languages and cultures. For even common Latin letters, wide
207+
variations are possible:
208+
209+
<div class=figure><img src=aaaaaa.png></div>
210+
211+
<p>Differences in the anatomy of letterforms is one way to distinguish
212+
fonts. For Latin fonts, flourishes at the ends of a character's main
213+
strokes, or serifs, can distinguish a font from those without. Similar
214+
comparisons exist in non-Latin fonts. For Japanese fonts, a Mincho face
215+
contains tapered strokes while a Gothic face does not:
216+
217+
<div class=figure><img src=serifvssansserif.png></div>
218+
219+
<p>Fonts contain letterforms and the data needed to map characters to these
220+
letterforms. Often this may be a simple one-to-one mapping but more
221+
complex mappings are also possible. The use of combining diacritic marks
222+
creates many variations for an underlying letterform:
223+
224+
<div class=figure><img src=aaaaaa-diacritics.png></div>
225+
226+
<p>A sequence of characters can be represented by a single glyph known as a
227+
ligature:
228+
229+
<div class=figure><img src=final-ligature.png></div>
230+
231+
<p>Visual transformations based on textual context like this may be a
232+
stylistic option for European langauges but are required to correctly
233+
render languages like Arabic. The lam and alef characters below
234+
<em>must</em> be combined when they exist in sequence:
235+
236+
<div class=figure><img src=lamaleflig.png></div>
237+
238+
<p>The relative complexity of these transformations requires additional
239+
data within the font to support shaping operations like this.
240+
241+
<p>Sets of font faces with various stylistic variations are often grouped
242+
together into font families. In the simplest case this can mean just bold
243+
and italic versions of a regular face but much more extensive groupings
244+
are possible. In the example below, each letter uses a different font face
245+
within the Univers font family. The width used increases from top to
246+
bottom and the weight increases from left to right:
247+
248+
<div class=figure><img src=weightwidthvariations.png></div>
249+
250+
<p>Italic faces are commonly thought of as sloped variations but the
251+
distinction is actually more subtle than that. Italics are generally more
252+
cursive style letterforms. Compare the artificially sloped version of the
253+
regular face in grey to the actual italic face:
254+
255+
<div class=figure><img src=realvsfakeitalics.png></div>
256+
194257
<ul>
195258
<li>fonts as containers of glyphs, supporting wide variety of languages
196259
and symbols
@@ -211,6 +274,16 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
211274
data or implied
212275
</ul>
213276

277+
<ul></ul>
278+
279+
<p>References
280+
281+
<ul>
282+
<li>ATSUI Programming Guide
283+
284+
<li>Unicode 5.0, Chap. 2
285+
</ul>
286+
214287
<h2 id=font-selection><span class=secno>2. </span>Font selection properties</h2>
215288

216289
<h3 id=font-family><span class=secno>2.1 </span>Font family: the &lsquo;<a
@@ -508,7 +581,7 @@ <h3 id=font-size><span class=secno>2.6 </span>Font size: the &lsquo;<a
508581
<tr>
509582
<td>Value:
510583

511-
<td>&lt;absolute-size> | &lt;relative-size> | &lt;lengtd> |
584+
<td>&lt;absolute-size> | &lt;relative-size> | &lt;length> |
512585
&lt;percentage> | inherit
513586

514587
<tr>
@@ -582,7 +655,7 @@ <h3 id=relative><span class=secno>2.7 </span>Relative sizing: the &lsquo;<a
582655
<tr>
583656
<td>Percentages:
584657

585-
<td>refer to parent element's font size
658+
<td>hmmmm
586659

587660
<tr>
588661
<td>Media:
@@ -1105,7 +1178,7 @@ <h2 class=no-num id=property-index>Property index</h2>
11051178
<tr valign=baseline>
11061179
<td><a class=property href="#font-size0">font-size</a>
11071180

1108-
<td>&lt;absolute-size> | &lt;relative-size> | &lt;lengtd> |
1181+
<td>&lt;absolute-size> | &lt;relative-size> | &lt;length> |
11091182
&lt;percentage> | inherit
11101183

11111184
<td>medium
@@ -1129,7 +1202,7 @@ <h2 class=no-num id=property-index>Property index</h2>
11291202

11301203
<td>yes
11311204

1132-
<td>refer to parent element's font size
1205+
<td>hmmmm
11331206

11341207
<td>visual
11351208

‎css3-fonts/aaaaaa-diacritics.png‎

5.63 KB
Loading

‎css3-fonts/aaaaaa.png‎

11.2 KB
Loading

‎css3-fonts/final-ligature.png‎

5.3 KB
Loading

‎css3-fonts/lamaleflig.png‎

4.31 KB
Loading

‎css3-fonts/realvsfakeitalics.png‎

10.3 KB
Loading

‎css3-fonts/serifvssansserif.png‎

21.5 KB
Loading

‎css3-fonts/weightwidthvariations.png‎

14 KB
Loading

0 commit comments

Comments
 (0)