[css-inline] add values to initial letter align to allow alignment to margin box or content box

Author: dauwhe

css-inline/Overview.bs

@@ -415,27 +415,38 @@ As mentioned earlier, the alignment of initial letters depends on the script use
 
 <pre class="propdef" id="initial-letter-align">
 Name: <dfn id="propdef-initial-letter-align">initial-letter-align</dfn>
-Value: [ auto | alphabetic | hanging | ideographic ]
+Value: auto | alphabetic | hanging | ideographic | margin-box | content-box
 Initial: auto
 Applies to: <code>::first-letter</code> pseudo elements and inline level first child of a block container
 Inherited: no
 Percentages: N/A
 Media: visual
-Computed value: ???
+Computed value: specified value
 </pre>
 
 
 <dl dfn-type="value" dfn-for="initial-letter-align">
 <dt>auto</dt>
 <dd>The user agent selects the value which corresponds to the language of the text. Western languages would default to ''alphabetic'', CJK languages to ''ideographic'', and some Indic languages to ''hanging''. </dd>
+
 <dt>alphabetic</dt>
 <dd>As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.</dd>
 
 <dt>hanging</dt>
 <dd>The hanging baseline of the initial letter aligns with the hanging baseline of the first line of text.  </dd>
 
 <dt>ideographic</dt>
-<dd>The initial letter is centered in the N-line area. </dd>
+<dd>The initial letter is centered in the N-line area. 
+
+<dt>margin-box</dt>
+<dd>Uses the <a>line-over</a> and <a>line-under</a> margin edges
+as the <a>over</a> and <a>under</a> alignment points, respectively.
+
+<dt>content-box</dt>
+<dd>Uses the <a>line-over</a> and <a>line-under</a> content edges
+as the <a>over</a> and <a>under</a> alignment points, respectively.
+(In most cases, these will correspond to
+the <a>over</a> and <a>under</a> edges of the glyph bounding box.)
 </dl>
 
 <p class="issue">Input from those knowledgeable about non-Western  typographic traditions would be very helpful in describing the appropriate alignments. More values may be required for this property.</p>

css-inline/Overview.html

@@ -897,7 +897,7 @@ <h3 class="heading settled" data-level="2.4" id="aligning-initial-letter"><span
       <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-initial-letter-align">initial-letter-align<a class="self-link" href="#propdef-initial-letter-align"></a></dfn>
      <tr class="value">
       <th>Value:
-      <td class="prod">[ auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> alphabetic <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> hanging <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> ideographic ]
+      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> alphabetic <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> hanging <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> ideographic <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> margin-box <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> content-box
      <tr>
       <th>Initial:
       <td>auto
@@ -915,7 +915,7 @@ <h3 class="heading settled" data-level="2.4" id="aligning-initial-letter"><span
       <td>visual
      <tr>
       <th>Computed value:
-      <td>???
+      <td>specified value
      <tr>
       <th>Animatable:
       <td>no</table>
@@ -928,6 +928,7 @@ <h3 class="heading settled" data-level="2.4" id="aligning-initial-letter"><span
 
     <dd>The user agent selects the value which corresponds to the language of the text. Western languages would default to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-alphabetic">alphabetic</a>, CJK languages to <span class="css">ideographic</span>, and some Indic languages to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-hanging">hanging</a>. 
 
+
     <dt>alphabetic
 
     <dd>As described above, the cap height of the initial letter aligns with the cap height of the first line of text. The baseline of the initial letter aligns with the baseline of the Nth text baseline.
@@ -941,6 +942,20 @@ <h3 class="heading settled" data-level="2.4" id="aligning-initial-letter"><span
     <dt>ideographic
 
     <dd>The initial letter is centered in the N-line area. 
+
+
+    <dt>margin-box
+
+    <dd>Uses the <a data-link-type="dfn">line-over</a> and <a data-link-type="dfn">line-under</a> margin edges
+as the <a data-link-type="dfn">over</a> and <a data-link-type="dfn">under</a> alignment points, respectively.
+
+
+    <dt>content-box
+
+    <dd>Uses the <a data-link-type="dfn">line-over</a> and <a data-link-type="dfn">line-under</a> content edges
+as the <a data-link-type="dfn">over</a> and <a data-link-type="dfn">under</a> alignment points, respectively.
+(In most cases, these will correspond to
+the <a data-link-type="dfn">over</a> and <a data-link-type="dfn">under</a> edges of the glyph bounding box.)
 </dl>
 
 
@@ -1721,14 +1736,14 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
      <td>as specified
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-initial-letter-align">initial-letter-align</a>
-     <td>[ auto | alphabetic | hanging | ideographic ]
+     <td>auto | alphabetic | hanging | ideographic | margin-box | content-box
      <td>auto
      <td>::first-letter pseudo elements and inline level first child of a block container
      <td>no
      <td>N/A
      <td>visual
      <td>no
-     <td>???
+     <td>specified value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-initial-letter-wrap">initial-letter-wrap</a>
      <td>none | all | first | auto