[css-inline] Add character-grid value to initial-letter-align, to show how it could be done.

Author: fantasai

css-inline/Overview.bs

@@ -589,7 +589,7 @@ Initial Letter Wrapping</h3>
 
 <pre class="propdef">
 Name: <dfn id="propdef-initial-letter-wrap">initial-letter-wrap</dfn>
-Value: none | all | first | auto
+Value: none | first | all | auto | grid
 Initial: auto
 Applies to: <code>::first-letter</code> pseudo-elements and inline-level first child of a block container
 Inherited: yes
@@ -607,12 +607,13 @@ or follow the contour of its end-edge glyph outline.
 <dd>No contour-fitting is performed:
 each impacted line is aligned flush to the end margin edge of the <a>initial letter</a>.</dd>
 
+<dt><dfn>first</dfn>
+<dd>Behaves as for ''all'' on the first line of the block containing the initial letter and as ''none'' on the rest.</dd>
+
 <dt><dfn>all</dfn></dt>
 <dd>For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the <a>initial letter</a>’s end-side border+padding+margin.</dd>
 
-
-<dt><dfn>first</dfn>
-<dd>Behaves as for ''all'' on the first line of the block containing the initial letter and as ''none'' on the rest.</dd>
+This value is at-risk.
 
 <dt><dfn>auto</dfn>
 <dd>Behaves as ''none'' if
@@ -621,7 +622,7 @@ the first <a>typographic character unit</a> after the <a>initial letter</a> belo
 the last <a>typographic character unit</a> of the <a>initial letter</a>
 <ul>
 	<li>belongs to the Symbols <a>Unicode General Category</a> (<code>S</code>)
-	<li>has an <a>East Asian Width</a> property of <code>Wide</code> or <code>Fullwidth</code>
+	<li>has an East Asian Width property of <code>Wide</code> or <code>Fullwidth</code>
 	<li>belongs to a script that is commonly used without spaces between words.
 	(Such scripts include:
 	Cham,
@@ -634,8 +635,23 @@ the last <a>typographic character unit</a> of the <a>initial letter</a>
 </ul>
 Behaves as ''first'' otherwise.
 
-Issue: Do we want to make this script-dependent? 
+Issue: Do we want to make this script-dependent?
+
+<dt><dfn>grid</dfn>
+<dd>This value is the same as ''none'',
+except that the exclusion area of the impacted lines
+is increased as necessary for its end-edge to land on the character grid.
+The 'justify-self' property can then be used to align the initial letter box
+within the exclusion area.
+
+The heuristic for matching the character grid is
+1em &times; <var>n</var> + 'letter-spacing' &times; (<var>n</var> - 1),
+where <var>n</var> is the size of the initial letter
+as specified by the 'initial-letter' property,
+and 1em represents the typical character advance width for ideographic characters
+(and may be replaced by a more accurate value if known).
 
+This value is also at-risk.
 </dl>
 
 

css-inline/Overview.html

@@ -606,12 +606,12 @@ <h4 class="heading settled" data-level="1.2.2" id="baseline-shift-property"><spa
 
    <dl>
 
-    <dt><dfn class="css" data-dfn-for="baseline-shift" data-dfn-type="value" data-export="" id="valdef-baseline-shift-length"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value" title="Expands to: ">&lt;length></a><a class="self-link" href="#valdef-baseline-shift-length"></a></dfn>
+    <dt><dfn class="css" data-dfn-for="baseline-shift" data-dfn-type="value" data-export="" id="valdef-baseline-shift-length"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value">&lt;length></a><a class="self-link" href="#valdef-baseline-shift-length"></a></dfn>
 
     <dd>Raise (positive value) or lower (negative value) by the specified length.
 
 
-    <dt><dfn class="css" data-dfn-for="baseline-shift" data-dfn-type="value" data-export="" id="valdef-baseline-shift-percentage"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value" title="Expands to: ">&lt;percentage></a><a class="self-link" href="#valdef-baseline-shift-percentage"></a></dfn>
+    <dt><dfn class="css" data-dfn-for="baseline-shift" data-dfn-type="value" data-export="" id="valdef-baseline-shift-percentage"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a><a class="self-link" href="#valdef-baseline-shift-percentage"></a></dfn>
 
     <dd>Raise (positive value) or lower (negative value) by the specified percentage of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">line-height</a>.
 
@@ -678,7 +678,7 @@ <h4 class="heading settled" data-level="2.1.1" id="drop-initial"><span class="se
 </figure>
 
 
-   <p>The alignment constraints for drop initials depend on the writing system. In ideographic scripts, the initial letter extends from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#block-start">block-start</a> edge of the first line to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#block-end">block-end</a> edge of the Nth line.</p>
+   <p>The alignment constraints for drop initials depend on the writing system. In ideographic scripts, the initial letter extends from the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#block_start">block-start</a> edge of the first line to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#block_end">block-end</a> edge of the Nth line.</p>
 
 
    <figure>
@@ -812,11 +812,11 @@ <h3 class="heading settled" data-level="2.3" id="sizing-drop-initials"><span cla
 
     <dd>No special initial-letter effect. Text behaves as normal.
 
-    <dt><dfn class="css" data-dfn-for="initial-letter" data-dfn-type="value" data-export="" id="valdef-initial-letter-number"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value" title="Expands to: ">&lt;number></a><a class="self-link" href="#valdef-initial-letter-number"></a></dfn>
+    <dt><dfn class="css" data-dfn-for="initial-letter" data-dfn-type="value" data-export="" id="valdef-initial-letter-number"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#number-value">&lt;number></a><a class="self-link" href="#valdef-initial-letter-number"></a></dfn>
 
     <dd>This first argument defines the size of the initial letter, in terms of how many lines it occupies. Negative values are not allowed.
 
-    <dt><dfn class="css" data-dfn-for="initial-letter" data-dfn-type="value" data-export="" id="valdef-initial-letter-integer"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" title="Expands to: ">&lt;integer></a><a class="self-link" href="#valdef-initial-letter-integer"></a></dfn>
+    <dt><dfn class="css" data-dfn-for="initial-letter" data-dfn-type="value" data-export="" id="valdef-initial-letter-integer"><a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value">&lt;integer></a><a class="self-link" href="#valdef-initial-letter-integer"></a></dfn>
 
     <dd>This optional second argument argument defines the number of lines the initial letter should sink. Values must be greater than zero. If omitted, it duplicates the first argument, floored to the nearest positive whole number.
 </dl>
@@ -946,13 +946,13 @@ <h3 class="heading settled" data-level="2.4" id="aligning-initial-letter"><span
 
     <dt>margin-box
 
-    <dd>Uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line-over">line-over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line-under">line-under</a> margin edges
+    <dd>Uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line_over">line-over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line_under">line-under</a> margin edges
 as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#over">over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#under">under</a> alignment points, respectively.
 
 
     <dt>content-box
 
-    <dd>Uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line-over">line-over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line-under">line-under</a> content edges
+    <dd>Uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line_over">line-over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#line_under">line-under</a> content edges
 as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#over">over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#under">under</a> alignment points, respectively.
 (In most cases, these will correspond to
 the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#over">over</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#under">under</a> edges of the glyph bounding box.)
@@ -1130,7 +1130,7 @@ <h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span
       <td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-initial-letter-wrap">initial-letter-wrap<a class="self-link" href="#propdef-initial-letter-wrap"></a></dfn>
      <tr class="value">
       <th>Value:
-      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> all <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> first <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> auto
+      <td class="prod">none <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> first <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> all <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> grid
      <tr>
       <th>Initial:
       <td>auto
@@ -1167,15 +1167,17 @@ <h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span
 each impacted line is aligned flush to the end margin edge of the <a data-link-type="dfn" href="#initial-letter">initial letter</a>.
 
 
-    <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-all">all<a class="self-link" href="#valdef-initial-letter-wrap-all"></a></dfn>
+    <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-first">first<a class="self-link" href="#valdef-initial-letter-wrap-first"></a></dfn>
 
-    <dd>For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the <a data-link-type="dfn" href="#initial-letter">initial letter</a>’s end-side border+padding+margin.
+    <dd>Behaves as for <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-all">all</a> on the first line of the block containing the initial letter and as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none">none</a> on the rest.
 
 
+    <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-all">all<a class="self-link" href="#valdef-initial-letter-wrap-all"></a></dfn>
 
-    <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-first">first<a class="self-link" href="#valdef-initial-letter-wrap-first"></a></dfn>
+    <dd>For each line of text impacted by the initial letter, the line box adjacent to the intial letter starts at the start-most point that touches the ink of the initial letter, plus the amount of the <a data-link-type="dfn" href="#initial-letter">initial letter</a>’s end-side border+padding+margin.
 
-    <dd>Behaves as for <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-all">all</a> on the first line of the block containing the initial letter and as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none">none</a> on the rest.
+
+    <p>This value is at-risk.</p>
 
 
     <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-auto">auto<a class="self-link" href="#valdef-initial-letter-wrap-auto"></a></dfn>
@@ -1189,7 +1191,7 @@ <h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span
 
       <li>belongs to the Symbols <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#unicode-general-category">Unicode General Category</a> (<code>S</code>)
 
-      <li>has an <a data-link-type="dfn">East Asian Width</a> property of <code>Wide</code> or <code>Fullwidth</code>
+      <li>has an East Asian Width property of <code>Wide</code> or <code>Fullwidth</code>
 
       <li>belongs to a script that is commonly used without spaces between words.
 	(Such scripts include:
@@ -1206,6 +1208,25 @@ <h3 class="heading settled" data-level="2.10" id="initial-letter-wrapping"><span
 
      <p class="issue" id="issue-36a8e5f0"><a class="self-link" href="#issue-36a8e5f0"></a> Do we want to make this script-dependent?</p>
 
+
+    <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-grid">grid<a class="self-link" href="#valdef-initial-letter-wrap-grid"></a></dfn>
+
+    <dd>This value is the same as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-none">none</a>,
+except that the exclusion area of the impacted lines
+is increased as necessary for its end-edge to land on the character grid.
+The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">justify-self</a> property can then be used to align the initial letter box
+within the exclusion area.
+
+
+     <p>The heuristic for matching the character grid is
+1em × <var>n</var> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing">letter-spacing</a> × (<var>n</var> - 1),
+where <var>n</var> is the size of the initial letter
+as specified by the <a class="property" data-link-type="propdesc" href="#propdef-initial-letter">initial-letter</a> property,
+and 1em represents the typical character advance width for ideographic characters
+(and may be replaced by a more accurate value if known).</p>
+
+
+     <p>This value is also at-risk.</p>
 </dl>
 
 
@@ -1584,6 +1605,7 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
    <li><a href="#propdef-dominant-baseline">dominant-baseline</a><span>, in §1.1</span>
    <li><a href="#dropped-initial">dropped initial</a><span>, in §2.1.1</span>
    <li><a href="#valdef-initial-letter-wrap-first">first</a><span>, in §2.10</span>
+   <li><a href="#valdef-initial-letter-wrap-grid">grid</a><span>, in §2.10</span>
    <li><a href="#valdef-dominant-baseline-hanging">hanging</a><span>, in §1.1</span>
    <li><a href="#propdef-initial-letter">initial-letter</a><span>, in §2.3</span>
    <li><a href="#initial-letter">initial letter</a><span>, in §2.3</span>
@@ -1622,9 +1644,14 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
   </ul>
   <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
   <ul class="indexlist">
+   <li><a data-link-type="biblio" href="#biblio-css-align-3">[css-align-3]</a> defines the following terms:
+    <ul>
+     <li><a href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">justify-self</a>
+    </ul>
    <li><a data-link-type="biblio" href="#biblio-css-text-3">[css-text-3]</a> defines the following terms:
     <ul>
      <li><a href="https://drafts.csswg.org/css-text-3/#propdef-hanging-punctuation">hanging-punctuation</a>
+     <li><a href="https://drafts.csswg.org/css-text-3/#propdef-letter-spacing">letter-spacing</a>
      <li><a href="https://drafts.csswg.org/css-text-3/#propdef-text-indent">text-indent</a>
      <li><a href="https://drafts.csswg.org/css-text-3/#typographic-character-unit">typographic character unit</a>
      <li><a href="https://drafts.csswg.org/css-text-3/#unicode-general-category">unicode general category</a>
@@ -1642,11 +1669,11 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
    <li><a data-link-type="biblio" href="#biblio-css-writing-modes-3">[css-writing-modes-3]</a> defines the following terms:
     <ul>
      <li><a href="https://drafts.csswg.org/css-writing-modes-3/#block-axis">block axis</a>
-     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#block-end">block-end</a>
-     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#block-start">block-start</a>
+     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#block_end">block-end</a>
+     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#block_start">block-start</a>
      <li><a href="https://drafts.csswg.org/css-writing-modes-3/#inline-axis">inline axis</a>
-     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#line-over">line-over</a>
-     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#line-under">line-under</a>
+     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#line_over">line-over</a>
+     <li><a href="https://drafts.csswg.org/css-writing-modes-3/#line_under">line-under</a>
      <li><a href="https://drafts.csswg.org/css-writing-modes-3/#valdef-text-orientation-mixed">mixed</a>
      <li><a href="https://drafts.csswg.org/css-writing-modes-3/#over">over</a>
      <li><a href="https://drafts.csswg.org/css-writing-modes-3/#valdef-text-orientation-sideways">sideways</a>
@@ -1667,6 +1694,8 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
   <dl>
    <dt id="biblio-css21"><a class="self-link" href="#biblio-css21"></a>[CSS21]
    <dd>Bert Bos; et al. <a href="http://www.w3.org/TR/CSS2">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="http://www.w3.org/TR/CSS2">http://www.w3.org/TR/CSS2</a>
+   <dt id="biblio-css-align-3"><a class="self-link" href="#biblio-css-align-3"></a>[CSS-ALIGN-3]
+   <dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-align-3/">CSS Box Alignment Module Level 3</a>. 18 December 2014. WD. URL: <a href="http://www.w3.org/TR/css-align-3/">http://www.w3.org/TR/css-align-3/</a>
    <dt id="biblio-css-text-3"><a class="self-link" href="#biblio-css-text-3"></a>[CSS-TEXT-3]
    <dd>Elika Etemad; Koji Ishii. <a href="http://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 10 October 2013. LCWD. URL: <a href="http://www.w3.org/TR/css-text-3/">http://www.w3.org/TR/css-text-3/</a>
    <dt id="biblio-css-values"><a class="self-link" href="#biblio-css-values"></a>[CSS-VALUES]
@@ -1765,7 +1794,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
      <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
+     <td>none | first | all | auto | grid
      <td>auto
      <td>::first-letter pseudo-elements and inline-level first child of a block container
      <td>yes