[css-fonts-4] Break up font-synthesis into longhands

w3c#1641

Author: litherum

css-fonts-4/Overview.bs

@@ -1303,12 +1303,102 @@ Shorthand font property: the 'font' property</h3>
 		</pre>
 	</div>
 
-<h3 id="font-synthesis-prop">
-Controlling synthetic faces: the 'font-synthesis' property</h3>
+<h3 id="font-synthesis">
+Controlling synthetic faces</h3>
+
+<h4 id="font-synthesis-weight">
+Controlling synthesized bold: The 'font-synthesis-weight' property</h4>
+
+    <pre class="propdef">
+    Name: font-synthesis-weight
+    Value: auto | none
+    Initial: auto
+    Applies to: all elements
+    Inherited: yes
+    Percentages: N/A
+    Computed value: as specified
+    Media: visual
+    Animatable: yes
+    </pre>
+
+    This property controls whether user agents are allowed
+    to synthesize bold font faces
+    when a font family lacks bold faces.
+
+    <dl dfn-for=font-synthesis-weight dfn-type=value>
+        <dt><dfn>auto</dfn>
+        <dd>
+            Synthesis of bold faces is allowed
+
+        <dt><dfn>none</dfn>
+        <dd>
+            Synthesis of bold faces is not allowed
+    </dl>
+
+<h4 id="font-synthesis-style">
+Controlling synthesized oblique: The 'font-synthesis-style' property</h4>
+
+    <pre class="propdef">
+    Name: font-synthesis-style
+    Value: auto | none
+    Initial: auto
+    Applies to: all elements
+    Inherited: yes
+    Percentages: N/A
+    Computed value: as specified
+    Media: visual
+    Animatable: yes
+    </pre>
+
+    This property controls whether user agents are allowed
+    to synthesize oblique font faces
+    when a font family lacks oblique faces.
+
+    <dl dfn-for=font-synthesis-style dfn-type=value>
+        <dt><dfn>auto</dfn>
+        <dd>
+            Synthesis of oblique faces is allowed
+
+        <dt><dfn>none</dfn>
+        <dd>
+            Synthesis of oblique faces is not allowed
+    </dl>
+
+<h4 id="font-synthesis-small-caps">
+Controlling synthesized small caps: The 'font-synthesis-small-caps' property</h4>
+
+    <pre class="propdef">
+    Name: font-synthesis-small-caps
+    Value: auto | none
+    Initial: auto
+    Applies to: all elements
+    Inherited: yes
+    Percentages: N/A
+    Computed value: as specified
+    Media: visual
+    Animatable: yes
+    </pre>
+
+    This property controls whether user agents are allowed
+    to synthesize small caps font faces
+    when a font family lacks small caps faces.
+
+    <dl dfn-for=font-synthesis-small-caps dfn-type=value>
+        <dt><dfn>auto</dfn>
+        <dd>
+            Synthesis of small caps faces is allowed
+
+        <dt><dfn>none</dfn>
+        <dd>
+            Synthesis of small caps faces is not allowed
+    </dl>
+
+<h4 id="font-synthesis">
+Controlling synthetic faces: the 'font-synthesis' shorthand</h4>
 
 	<pre class="propdef">
 	Name: font-synthesis
-	Value: none | [ weight || style || small-caps ]
+	Value: none | [ weight || style ]
 	Initial: weight style small-caps
 	Applies to: all elements
 	Inherited: yes
@@ -1318,18 +1408,33 @@ Controlling synthetic faces: the 'font-synthesis' property</h3>
 	Animatable: no
 	</pre>
 
-	This property controls whether user agents are allowed
-	to synthesize bold, oblique  or small-cap font faces
-	when a font family lacks bold, italic  or small-cap faces.
-	The initial value allows all types of synthesis.
-	If ''weight'' is not specified,
-	user agents must <em>not</em> synthesize bold faces.
-	If ''style'' is not specified,
-	user agents must <em>not</em> synthesize italic faces.
-	If ''small-caps'' is not specified,
-	user agents must <em>not</em> synthesize small-caps faces
-	<em>nor</em> all-small-caps faces.
-	A value of ''font-synthesis/none'' disallows all synthetic faces.
+	This property is a shorthand for the 'font-synthesis-weight'
+    and 'font-synthesis-style' properties. Values are mapped as following:
+
+    <table class='data'>
+    <thead>
+        <tr>
+            <th>'font-synthesis' value
+            <th>'font-synthesis-weight' value
+            <th>'font-synthesis-style' value
+    <tbody>
+        <tr>
+            <th>none
+            <td>none
+            <td>none
+        <tr>
+            <th>weight
+            <td>auto
+            <td>none
+        <tr>
+            <th>style
+            <td>none
+            <td>auto
+        <tr>
+            <th>weight style
+            <td>auto
+            <td>auto
+    </table>
 
 	<div class="example">
 		The style rule below disables the use of synthetically obliqued Arabic: