[css-text-decor-3] Add some explanatory notes about text-decoration-position, per #1178

Author: fantasai

css-text-decor-3/Overview.bs

@@ -219,6 +219,11 @@ Text Decoration Lines: the 'text-decoration-line' property</h3>
 	  <span class=note>It is often rendered as a green wavy underline.</span>
   </dl>
 
+    Note: In <a>vertical writing modes</a>,
+    'text-decoration-position' can cause the underline and overline to switch sides.
+    This allows the position of underlines to key off of language-specific preferences
+    automatically.
+
     When the value of 'text-decoration-line' is either ''spelling-error'' or ''grammar-error'',
     the UA may disregard the values of the other <a>sub-properties</a> of 'text-decoration',
     as well as those of other properties affecting the appearance of the text-decoration such as 'text-underline-position'.
@@ -295,6 +300,11 @@ Text Decoration Shorthand: the 'text-decoration' property</h3>
 <!-- -->}</code></pre>
   </div>
 
+  Note: The shorthand purposefully omits the 'text-decoration-position' property,
+  which is a language/writing-system–dependent setting that keys off the content,
+  so that it can cascade and inherit independently
+  from the (uninherited) stylistic settings of the 'text-decoration' shorthand.
+
 <h3 id="text-underline-position-property">
 Text Underline Position: the 'text-underline-position' property</h3>
 
@@ -314,8 +324,10 @@ Text Underline Position: the 'text-underline-position' property</h3>
     <p>The following example styles modern Chinese, Japanese, and Korean
       texts with the appropriate underline positions in both horizontal
       and vertical text:
-    <pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
-<!--   -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
+    <pre>
+      :root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
+      :root:lang(zh), [lang|=zh] { text-underline-position: under left; }
+    </pre>
     <p>(Note that these rules are part of the suggested
       <a href="#default-stylesheet">default UA style sheet</a>.)
   </div>