[css-ui-4] Allow authors to control the shape of the caret

Author: frivoal

css-ui-4/Overview.bs

@@ -165,20 +165,143 @@ textarea {
 
 	The simulated rendering below illustrates how this would look.
 	<style>
-@keyframes caret-alternate {
-	from { border-color: blue; }
-	50% { border-color: red; }
-}
+@-webkit-keyframes caret-alternate { from { border-color: blue; } 50% { border-color: red; } }
+@keyframes caret-alternate { from { border-color: blue; } 50% { border-color: red; } }
 	</style>
 	<div style="border:inset; background: white; width: 10em;">
 		Text area
-		with color-alternating caret<span style="border-right: 2px solid blue;animation: caret-alternate 2s step-end infinite;"></span>
+		with color-alternating caret<span style="border-right: 2px solid blue;animation: caret-alternate 2s step-end infinite;-webkit-animation: caret-alternate 2s step-end infinite;"></span>
 	</div>
 </div>
 
 
+<h4 id="caret-shape">Shape of the insertion caret: 'caret-shape'</h4>
+
+<pre class='propdef'>
+Name: caret-shape
+Value: ''auto'' | ''bar'' | ''block'' | ''underscore''
+initial: auto
+Applies to: elements that accept input
+Inherited: yes
+Percentages: N/A
+Media: interactive
+Computed value: Same as specified value
+Animatable: no
+</pre>
+
+This property allows authors to specify
+the desired shape of the text insertion caret.
+
+Within the context of this definition, <dfn>character</dfn> is
+to be understood as <em>extended grapheme cluster</em>,
+as defined in [[!UAX29]], and <dfn>visible character</dfn>
+means a character with a non-zero advance measure.
+
+<dl dfn-type=value dfn-for=caret-shape>
+	<dt><dfn>auto</dfn>
+	<dd>The UA determine the shape of the caret.
+	It should match platform conventions,
+	and may be adjusted based on context.
+	For example, if a UA switches between insert mode and overtype mode when the
+	user presses the <em>insert</em> key on their keyboard,
+	it may show a ''caret-shape/bar'' caret in insert mode,
+	and a ''caret-shape/block'' caret in overtype mode.
+	<dt><dfn>bar</dfn>
+	<dd>The UA must render the text insertion caret
+	as a thin bar placed at the insertion point.
+	This means it is between, before, or after characters, not over them.
+	It should be perpendicular to the inline progression direction,
+	although UAs may render it slanted when inserting italic or oblique text.
+	<dt><dfn>block</dfn>
+	<dd>The UA must render the text insertion caret
+	as a rectangle overlapping the next visible character following the insertion point.
+	If there is no visible character after the insertion point,
+	the UA must render the caret after the last visible character.
+	UAs may render it as a slanted rectangle when inserting italic or oblique text.
+	<dt><dfn>underscore</dfn>
+	<dd>The UA must render the text insertion caret
+	as a thin line <a>under</a> (as defined in [[!CSS-WRITING-MODES-3]]
+	the next visible character following the insertion point.
+	If there is no visible character after the insertion point,
+	the UA must render the caret after the last visible character.
+</dl>
+
+The width of the ''caret-shape/block'' and ''caret-shape/underscore'' carets
+should be the advance measure of the next visible character after the insertion point,
+or ''1ch'' if there is no next visible character
+or if this information is impractical to determine.
+
+When determining the orientation and appearance of the caret,
+UAs must take into account the <a>writing mode</a> [[!CSS-WRITING-MODES-3]]
+and must apply transformations [[!CSS-TRANSFORMS-1]].
+If the edited text is laid out out on a path,
+for instance by using the SVG <{textPath}> element,
+UAs should also account for this.
 
+The stacking position of the caret is left undefined, within the following constraints:
+<ul>
+	<li>The caret must not be obscured by the background of the element
+	<li>UAs must render ''caret-shape/block'' carets so that the
+	character it overlaps with is not obscured by the caret
+</ul>
 
+<div class=example>
+	This illustrates the typical appearance of the various caret shapes.
+	In each of the sample renderings below,
+	the insertion point is between the letters u and m.
+
+	<style>
+@-webkit-keyframes caret-bar { from { outline-color: black; } 50% { outline-color: transparent; } }
+@-webkit-keyframes caret-block { from { background: #bbb; } 50% { background: transparent; } }
+@-webkit-keyframes caret-underscore { from { border-color: black; } 50% { border-color: transparent; } }
+@keyframes caret-bar { from { outline-color: black; } 50% { outline-color: transparent; } }
+@keyframes caret-block { from { background: #bbb; } 50% { background: transparent; } }
+@keyframes caret-underscore { from { border-color: black; } 50% { border-color: transparent; } }
+#caret-shape-example {
+	min-width: 25em;
+}
+#caret-shape-example,
+#caret-shape-example td,
+#caret-shape-example th {
+	border: solid 1px;
+}
+#caret-shape-example td+td {
+	background:white;
+}
+	</style>
+	<table id="caret-shape-example">
+		<tr><th>'caret-shape'<th>Sample rendering
+		<tr><td>''bar''<td>Lorem ipsu<span style="outline: 1px solid;animation: caret-bar 2s step-end infinite;-webkit-animation: caret-bar 2s step-end infinite;"></span>m
+		<tr><td>''block''<td>Lorem ipsu<span style="-webkit-animation: caret-block 2s step-end infinite;animation: caret-block 2s step-end infinite;">m</span>
+		<tr><td>''underscore''<td>Lorem ispu<span style="border-bottom: 2px solid; -webkit-animation: caret-underscore 2s step-end infinite; animation: caret-underscore 2s step-end infinite;">m</span>
+	</table>
+</div>
+
+
+<div class=example>
+	''caret-shape/underscore'' or ''caret-shape/block'' carets are commonly used
+	in terminals and command lines,
+	as in this example.
+	<pre><code class="lang-css">
+.console {
+	caret-shape: underscore;
+	background: black;
+	color: white;
+	font-family: monospace;
+	padding: 1ex;
+}
+	</code></pre>
+
+	<style>
+@-webkit-keyframes terminal-caret { from { border-color: white; } 50% { border-color: transparent; } }
+@keyframes terminal-caret { from { border-color: white; } 50% { border-color: transparent; } }
+	</style>
+	<pre style="background: black; color: white; font-family: monospace; padding: 1ex">
+	user@host:css-ui-4 $ ls -a
+	. .. Overview.bs Overview.html
+	user@host:css-ui-4 $ <span style="border-bottom: 2px solid white;animation: terminal-caret 2s step-end infinite;-webkit-animation: terminal-caret 2s step-end infinite;">&nbsp;</span>
+	</pre>
+</div>
 <h3 id="keyboard">Keyboard control</h3>
 
 <h4 id="nav-dir">Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4>