[css-inline] Add <lenth>|<percentage> to initial-letter-wrap as requested by Google

Author: fantasai

css-inline/Overview.bs

@@ -628,11 +628,11 @@ Note: 'initial-letter-wrap' is at risk.
 
 <pre class="propdef">
 Name: <dfn id="propdef-initial-letter-wrap">initial-letter-wrap</dfn>
-Value: none | first | all | grid
+Value: none | first | all | grid | <<length>> | <<percentage>>
 Initial: none
 Applies to: <code>::first-letter</code> pseudo-elements and inline-level first child of a block container
 Inherited: yes
-Percentages: N/A
+Percentages: relative to <a>logical width</a> of (last fragment of) initial letter
 Media: visual
 Computed value: as specified
 </pre>
@@ -700,6 +700,40 @@ is larger than its glyph in order to preserve inline-axis alignment.
 Note: This value is also at-risk.
 
 
+<dt><dfn><<length>></dfn>
+<dt><dfn><<percentage>></dfn>
+<dd>This value behaves the same as ''first''
+except that the adjustment to the first line is given explicitly
+instead of being inferred from the glyph shape.
+
+Issue: This really needs font-relative lengths to be relative to the used size.
+
+Note: This value exists because it is easier to implement.
+Authors are encouraged to use the ''first'' value
+and to set margins to control spacing,
+and to use this as a fallback for glyph detection if necessary.
+
+<div class="example">
+	In the following example, UAs that support ''first'' will use the glyph outline
+	plus the specified margin in order to place the first line,
+	whereas UAs that only support <<length>> or <<percentage>> values
+	will pull in the first line by 40% of the initial letter's width
+	(and then add the margin to that point).
+	<pre>
+		h1 + p:first-letter {
+			initial-letter: 3; /* 3-line drop-cap */
+			initial-letter-wrap: first;
+			margin-right: 0.1em;
+		}
+		@supports (not (initial-letter-wrap: first)) {
+			/* Classes auto-generated on paragraphs to match first letter. */
+			p.A:first-letter {
+				initial-letter-wrap: -40%; /* Start of glyph outline, assuming correct font. */
+			}
+		}
+	</pre>
+</div>
+
 </dl>
 
 Issue: Edit figure to show how auto behaves in varying contexts

css-inline/Overview.html

@@ -707,7 +707,7 @@ <h3 class="heading settled" data-level="2.8" 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> 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> grid
+      <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> grid <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value">&lt;length></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a>
      <tr>
       <th>Initial:
       <td>none
@@ -719,7 +719,7 @@ <h3 class="heading settled" data-level="2.8" id="initial-letter-wrapping"><span
       <td>yes
      <tr>
       <th>Percentages:
-      <td>N/A
+      <td>relative to <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#logical-width">logical width</a> of (last fragment of) initial letter
      <tr>
       <th>Media:
       <td>visual
@@ -779,6 +779,35 @@ <h3 class="heading settled" data-level="2.8" id="initial-letter-wrapping"><span
      <p class="note" role="note">Note: In this example, the exclusion area for the drop initial
 is larger than its glyph in order to preserve inline-axis alignment.</p>
      <p class="note" role="note">Note: This value is also at-risk.</p>
+    <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-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-initial-letter-wrap-length"></a></dfn> 
+    <dt><dfn class="css" data-dfn-for="initial-letter-wrap" data-dfn-type="value" data-export="" id="valdef-initial-letter-wrap-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-initial-letter-wrap-percentage"></a></dfn> 
+    <dd>
+     This value behaves the same as <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> except that the adjustment to the first line is given explicitly
+instead of being inferred from the glyph shape. 
+     <p class="issue" id="issue-645378a9"><a class="self-link" href="#issue-645378a9"></a> This really needs font-relative lengths to be relative to the used size.</p>
+     <p class="note" role="note">Note: This value exists because it is easier to implement.
+Authors are encouraged to use the <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> value
+and to set margins to control spacing,
+and to use this as a fallback for glyph detection if necessary.</p>
+     <div class="example" id="example-e11c0dc6">
+      <a class="self-link" href="#example-e11c0dc6"></a> In the following example, UAs that support <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> will use the glyph outline
+	plus the specified margin in order to place the first line,
+	whereas UAs that only support <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#length-value">&lt;length></a> or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#percentage-value">&lt;percentage></a> values
+	will pull in the first line by 40% of the initial letter’s width
+	(and then add the margin to that point). 
+<pre>h1 + p:first-letter {
+  initial-letter: 3; /* 3-line drop-cap */
+  initial-letter-wrap: first;
+  margin-right: 0.1em;
+}
+@supports (not (initial-letter-wrap: first)) {
+  /* Classes auto-generated on paragraphs to match first letter. */
+  p.A:first-letter {
+    initial-letter-wrap: -40%; /* Start of glyph outline, assuming correct font. */
+  }
+}
+</pre>
+     </div>
    </dl>
    <p class="issue" id="issue-c4ff3304"><a class="self-link" href="#issue-c4ff3304"></a> Edit figure to show how auto behaves in varying contexts</p>
    <div class="example" id="example-768e3a03">
@@ -1018,7 +1047,12 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
    <li><a href="#initial-letter">initial letter box</a><span>, in §2.3</span>
    <li><a href="#propdef-initial-letter-wrap">initial-letter-wrap</a><span>, in §2.8</span>
    <li><a href="#valdef-initial-letter-integer">&lt;integer></a><span>, in §2.3</span>
-   <li><a href="#valdef-baseline-shift-length">&lt;length></a><span>, in §1.2.2</span>
+   <li>
+    &lt;length>
+    <ul>
+     <li><a href="#valdef-baseline-shift-length">value for baseline-shift</a><span>, in §1.2.2</span>
+     <li><a href="#valdef-initial-letter-wrap-length">value for initial-letter-wrap</a><span>, in §2.8</span>
+    </ul>
    <li>
     mathematical
     <ul>
@@ -1029,7 +1063,12 @@ <h3 class="no-num heading settled" id="index-defined-here"><span class="content"
    <li><a href="#valdef-initial-letter-wrap-none">none</a><span>, in §2.8</span>
    <li><a href="#valdef-initial-letter-normal">normal</a><span>, in §2.3</span>
    <li><a href="#valdef-initial-letter-number">&lt;number></a><span>, in §2.3</span>
-   <li><a href="#valdef-baseline-shift-percentage">&lt;percentage></a><span>, in §1.2.2</span>
+   <li>
+    &lt;percentage>
+    <ul>
+     <li><a href="#valdef-baseline-shift-percentage">value for baseline-shift</a><span>, in §1.2.2</span>
+     <li><a href="#valdef-initial-letter-wrap-percentage">value for initial-letter-wrap</a><span>, in §2.8</span>
+    </ul>
    <li><a href="#raised-initial">raised initial</a><span>, in §2.1.3</span>
    <li><a href="#valdef-baseline-shift-sub">sub</a><span>, in §1.2.2</span>
    <li><a href="#sunken-initial">sunken initial</a><span>, in §2.1.2</span>
@@ -1102,6 +1141,7 @@ <h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="con
      <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/#logical-width">logical width</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>
@@ -1245,11 +1285,11 @@ <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 | first | all | grid
+     <td>none | first | all | grid | &lt;length> | &lt;percentage>
      <td>none
      <td>::first-letter pseudo-elements and inline-level first child of a block container
      <td>yes
-     <td>N/A
+     <td>relative to logical width of (last fragment of) initial letter
      <td>visual
      <td>no
      <td>as specified
@@ -1274,6 +1314,7 @@ <h2 class="no-num heading settled" id="issues-index"><span class="content">Issue
    <div class="issue"> Are there other things we need to consider here?<a href="#issue-bef56215"> ↵ </a></div>
    <div class="issue"> Do we need an unconditional <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a>?
 (I.e. Should we rename this value to <a class="css" data-link-type="maybe" href="#valdef-dominant-baseline-auto">auto</a> and add a <a class="css" data-link-type="maybe" href="#valdef-initial-letter-wrap-first">first</a> value that does not check for spaces?)<a href="#issue-a826765c"> ↵ </a></div>
+   <div class="issue"> This really needs font-relative lengths to be relative to the used size.<a href="#issue-645378a9"> ↵ </a></div>
    <div class="issue"> Edit figure to show how auto behaves in varying contexts<a href="#issue-c4ff3304"> ↵ </a></div>
    <div class="issue"> Handle glyph ink above cap height of font.<a href="#issue-f77cbeb9"> ↵ </a></div>
    <div class="issue"> Is this the behavior we want? What if the float is on the same line as the initial letter?<a href="#issue-2ad0a0cb"> ↵ </a></div>