[css-fonts-5] Copy font-size-adjust definition from css-fonts-4

Author: fantasai

css-fonts-5/Overview.bs

@@ -93,6 +93,187 @@ Issue(4044):
 <h3 id="font-size-adjust-prop">
 Relative sizing: the 'font-size-adjust' property</h3>
 
+	<pre class="propdef">
+	Name: font-size-adjust
+	Value: none | <<number>>
+	Initial: none
+	Applies to: all elements and text
+	Inherited: yes
+	Percentages: N/A
+	Computed value: a number or the keyword ''font-size-adjust/none''
+	Animation type: by computed value type
+	</pre>
+
+	For any given font size, the apparent size and effective legibility of text
+	varies across fonts.
+	For bicameral scripts such as Latin or Cyrillic that
+	distinguish between upper and lowercase letters,
+	the relative height of lowercase letters
+	compared to their uppercase counterparts
+	is a determining factor of legibility.
+	This is commonly referred to as the <dfn>aspect value</dfn>
+	and is equal to the x-height of a font
+	divided by the font size.
+
+	Note: For text which uses diacritics,
+	too large an x-height will actually decrease legibility
+	as the diacritics become cramped.
+
+	In situations where font fallback occurs,
+	fallback fonts might not share the same aspect value
+	as the desired font family
+	and will thus be less readable.
+	The 'font-size-adjust' property is a way
+	to preserve the readability of text when font fallback occurs.
+	It does this by adjusting the font-size
+	so that the x-height is the same
+	regardless of the font used.
+
+	<div class="example">
+		The style defined below defines Verdana as the desired font family,
+		but if Verdana is not available Futura or Times will be used.
+		One paragraph also has font-size-adjust specified.
+
+		<pre>
+			p {
+				font-family: Verdana, Futura, Times;
+			}
+			p.adj {
+				font-size-adjust: 0.545;
+			}
+
+			&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
+			&lt;p class="adj">Lorem ipsum dolor sit amet, ...&lt;/p>
+		</pre>
+
+		Verdana has a relatively high aspect value of 0.545,
+		meaning lowercase letters are relatively tall
+		compared to uppercase letters,
+		so at small sizes text appears legible.
+		Times has a lower aspect value of 0.447,
+		and so if fallback occurs,
+		the text will be less legible at small sizes than Verdana
+		unless font-size-adjust is also specified.
+	</div>
+
+	How text rendered in each of these fonts compares is shown below,
+	the columns show text rendered in Verdana, Futura and Times.
+	The same font-size value is used across cells
+	within each row and red lines are included to show the differences in x-height.
+	In the upper half, each row is rendered in the same font-size value.
+	The same is true for the lower half,
+	but in this half the 'font-size-adjust' property is also set
+	to 0.545,
+	so that the actual font size is adjusted
+	to preserve the x-height of Verdana across each row.
+	Note how small text remains relatively legible across each row in the lower half.
+
+	<figure>
+		<img alt="text with and without 'font-size-adjust'" src="images/fontsizeadjust.png" >
+		<figcaption>Text with and without the use of 'font-size-adjust'</figcaption>
+	</figure>
+
+	This property allows authors to specify an <a>aspect value</a> for an element
+	that will effectively preserve the x-height of the first choice font,
+	whether it is substituted or not.
+	Values have the following meanings:
+
+	<dl dfn-type=value dfn-for=font-size-adjust>
+		<dt><dfn id="font-size-adjust-none-value">none</dfn>
+		<dd>
+			Do not preserve the font's x-height.
+
+		<dt><dfn id="aspect-ratio-value"><<number>></dfn>
+
+		<dd>
+			Specifies the <a>aspect value</a> used in the calculation below
+			to calculate the adjusted font size:
+
+			<pre>c  =  ( a / a' ) s</pre>
+
+			where:
+
+			<pre>
+			s  =  font-size value
+			a  =  <a>aspect value</a> as specified by the 'font-size-adjust' property
+			a' =  <a>aspect value</a> of actual font
+			c  =  adjusted font-size to use
+			</pre>
+
+			Negative values are invalid.
+
+			This value applies to any font that is selected
+			but in typical usage it should be based on the <a>aspect value</a>
+			of the first font in the font-family list.
+			If this is specified accurately,
+			the <code>(a/a')</code> term in the formula above
+			is effectively 1 for the first font
+			and no adjustment occurs.
+			If the value is specified inaccurately,
+			text rendered using the first font in the family list
+			will display differently in older user agents
+			that don't support 'font-size-adjust'.
+	</dl>
+
+	The value of 'font-size-adjust' affects the used value of 'font-size'
+	but does not affect the computed value.
+	It affects the size of relative units
+	that are based on font metrics
+	such as <code>ex</code> and <code>ch</code>
+	but does not affect the size of <code>em</code> units.
+	Since numeric values of 'line-height'
+	refer to the computed size of 'font-size',
+	'font-size-adjust' does not affect the used value of 'line-height'.
+
+	Note: In CSS, authors often specify 'line-height'
+	as a multiple of the 'font-size'.
+	Since the 'font-size-adjust' property affects the used value of 'font-size',
+	authors should take care setting the line height
+	when 'font-size-adjust' is used.
+	Setting the line height too tightly can result in
+	overlapping lines of text in this situation.
+
+
+	<div class="example">
+		Authors can calculate the <a>aspect value</a> for a given font
+		by comparing spans with the same content
+		but different 'font-size-adjust' properties.
+		If the same font-size is used, the spans will match
+		when the 'font-size-adjust' value is accurate for the given font.
+
+		Two spans with borders are used to determine the <a>aspect value</a> of a font.
+		The 'font-size' is the same for both spans
+		but the 'font-size-adjust' property is specified only for the right span.
+		Starting with a value of 0.5,
+		the aspect value can be adjusted
+		until the borders around the two letters line up.
+
+		<pre>
+		p {
+			font-family: Futura;
+			font-size: 500px;
+		}
+
+		span {
+			border: solid 1px red;
+		}
+
+		.adjust {
+			font-size-adjust: 0.5;
+		}
+
+		&lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
+		</pre>
+
+		<figure>
+			<img alt="Futura with an aspect value of 0.5" src="images/beforefontsizeadjust.png" >
+			<figcaption>Futura with an <a>aspect value</a> of 0.5</figcaption>
+		</figure>
+
+		The box on the right is a bit bigger than the one on the left, so the <a>aspect value</a> of this font is something less than 0.5.
+		Adjust the value until the boxes align.
+	</div>
+
 The 'font-size-adjust' property is applied after the 'size-adjust' descriptor.
 
 Note: The consequence of applying 'font-size-adjust' after 'size-adjust' is that