[css-text-4] Add line-padding property. #1973

w3c · Sep 14, 2018 · 7fd0270 · nigelmegitt · Sep 14, 2018 · 7fd0270
1 parent 3685e64
commit 7fd0270
Showing 1 changed file with 54 additions and 0 deletions.
diff --git a/css-text-4/Overview.bs b/css-text-4/Overview.bs
@@ -936,6 +936,60 @@ Spacing</h2>
 
 	Issue: Add final level 3 word-spacing, letter-spacing
 
+<h3 id="line-padding-property">
+Line Start/End Padding: the 'line-padding' property</h3>
+
+	<pre class="propdef">
+	Name: line-padding
+	Value: <<length>>
+	Initial: 0
+	Applies to: <a>inline boxes</a>
+	Inherited: yes
+	Percentages: N/A
+	Computed value: absolute length
+	</pre>
+
+	Whereas 'letter-spacing' adjusts spacing
+	between <a>typographic letter units</a>
+	and does not apply at the start or end of a line,
+	this property adjusts spacing only at the start/end of a line.
+	The extra spacing is applied only
+	by the <em>innermost</em> <a>inline box</a>
+	at the start/end of the line box,
+	and is inserted between that <a>inline box</a>’s content edge
+	and the adjacent <a>inline-level</a> content
+	(text run <em>or</em> <a>atomic inline</a>).
+	This extra space is not a <a>justification opportunity</a>.
+
+	<div class="example">
+		Given the following HTML and CSS:
+		<xmp>
+			p    { line-padding: 0.5em; line-height: 1; text-align: center }
+			span { background: black; color: white; }
+			em   { background: green; color: white; }
+
+			<p><span>Here is <em>some text</em></p>
+		</xmp>
+
+		If it renders such that there is a break between “some” and “text”,
+		line-padding will be inserted such that
+		an extra 0.5em of inline background will be visible
+		on each side of each line:
+		on the first line, black on the left and green on the right,
+		and on the second line, green on both sides.
+
+		<style>
+			#line-padding-rendering         { line-height: 1; text-align: center; color: white; }
+			#line-padding-rendering span    { background: black; padding-left: 0.5em; }
+			#line-padding-rendering em      { background: green; padding-right: 0.5em; }
+			#line-padding-rendering em + em { padding-left: 0.5em; }
+		</style>
+		<pre class="figure" id="line-padding-rendering">
+			<span>Here is <em>some</em>
+			<em>text</em>
+		</pre>
+	</div>
+
 <h3 id="text-spacing-property">
 Character Class Spacing: the 'text-spacing' property</h3>