[css-inline-3] Define the CSS inline layout model; stealing heavily from CSS2 section 9.4.2.

Author: fantasai

css-inline-3/Overview.bs

@@ -40,17 +40,6 @@ Introduction</h2>
 	replacing and extending the model as defined in CSS2.1.
 	It is very much a work-in-progress, and implementers should reference CSS2.1 for now.
 
-	The <dfn export>root inline box</dfn> is an anonymous inline box
-	which is automatically generated to hold
-	all of the <a>inline-level</a> contents of a <a>block container</a>
-	(if it has any).
-	It inherits from its parent <a>block container</a>,
-	but is otherwise unstyleable.
-
-	Note: Line boxes, like <a>column boxes</a> [[css-multicol-1]],
-	are <a>fragmentation containers</a> generated by their <a>formatting context</a>
-	and are not part of the CSS <a>box tree</a>.
-
 	ISSUE: Many aspects of layout here depend on font metrics.
 	While the relevant metrics exist in OpenType for Latin/Cyrillic/Greek and for CJK,
 	they are missing for many other writing systems.
@@ -60,6 +49,102 @@ Introduction</h2>
 	and that means both that OpenType needs to allow such metrics
 	and font designers need to provide accurate numbers.
 
+<h2 id="model">
+Inline Layout Box Model</h2>
+
+	A [=block container=] element that directly contains
+	[=inline-level=] content--
+	such as [=inline boxes=], [=atomic inlines=], and [=text runs=]--
+	establishes an [=inline formatting context=].
+	The [=block container=] also generates
+	a <dfn export>root inline box</dfn>,
+	which is an <a lt="anonymous box">anonymous</a> [=inline box=] that holds
+	all of its [=inline-level=] contents.
+	The [=root inline box=] inherits from its parent [=block container=],
+	but is otherwise unstyleable.
+
+	In an [=inline formatting context=],
+	content is laid out along the [=inline axis=],
+	ordered according to the
+	<a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">Unicode bidirectional algorithm and its controls</a> [[CSS-WRITING-MODES-3]]
+	and distributed according to the typesetting controls in [[CSS-TEXT-3]].
+	[=Inline-axis=] [=margins=], [=borders=], and [=padding=]
+	are respected between [=inline-level boxes=]
+	(and their margins do not <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>).
+	The rectangular area that contains the boxes
+	that form a line of [=inline-level content=]
+	is called a <dfn>line box</dfn>.
+
+	Note: <a>Line boxes</a> and <a>inline boxes</a> and <a>inline-level boxes</a>
+	are each different things!
+	See [[CSS-DISPLAY-3]] for an in-depth discussion of box types and related terminology.
+
+	[=Line boxes=] are created as needed
+	to hold inline-level content
+	within an inline formatting context.
+	When an [=inline box=] exceeds the [=logical width=] of a [=line box=],
+	or contains a <a spec="css-text-3">forced line break</a>,
+	it is split (see [[css-text-3#line-breaking]])
+	into several [=fragments=] [[css-break-3]],
+	which are distributed across multiple line boxes.
+	Like [=column boxes=] in [=multi-column layout=] [[CSS-MULTICOL-1]],
+	[=line boxes=] are [=fragmentation containers=]
+	generated by their [=formatting context=],
+	and are not part of the CSS [=box tree=].
+
+	Note: Inline boxes can also be <a href="https://www.w3.org/TR/css-writing-modes-3/#bidi-box-model">split into several fragments
+	within the same line box due to bidirectional text processing</a>.
+	See [[CSS-WRITING-MODES-3]].
+
+	Line boxes are stacked
+	as the direct contents of the [=block container box=]
+	in the [=block flow direction=]
+	and aligned within this container as specified by 'align-content' [[css-align-3]].
+	Thus, an [=inline formatting context=] consists of
+	a stack of line boxes.
+	Line boxes are stacked with no separation
+	(except as specified elsewhere,
+	e.g. for [=float=] <a href="https://www.w3.org/TR/CSS2/visuren.html#clearance">clearance</a>)
+	and they never overlap.
+
+	In general,
+	the [=line-left=] edge of a line box touches
+	the [=line-left=] edge of its [=containing block=]
+	and the [=line-right=] edge touches
+	the [=line-right=] edge of its [=containing block=],
+	and thus the [=logical width=] of a line box is equal to
+	the <a lt="inner size">inner</a> [=logical width=]
+	of its containing block
+	(i.e. the [=block container=]’s [=content box=]).
+	However, floating boxes or [=initial letter boxes=]
+	can come between the containing block edge and the line box edge,
+	reducing space available to, and thus the [=logical width=],
+	of any such impacted line boxes.
+	(See [[CSS2/visuren.html#inline-formatting|CSS2&sect;9.4.2]]/[[CSS2/visuren.html#floats|CSS2&sect;9.5]]
+	and [[#initial-letter-styling]].)
+
+	Within the line box,
+	inline-level boxes can be aligned
+	along the [=block axis=]
+	in different ways:
+	their over or under edges can be aligned,
+	or the baselines of text within them can be aligned.
+	See 'vertical-align' and its longhands.
+	The [=logical height=] of a line box is fitted to its contents
+	by the rules given in [[#line-sizing-property]].
+
+	Line boxes that contain no text,
+	no [=preserved white space=],
+	no [=inline boxes=] with non-zero [=margins=], [=padding=], or [=borders=],
+	and no other [=in-flow=] content
+	(such as [=atomic inlines=] or [=ruby annotations=]),
+	and do not end with a preserved newline
+	must be treated as zero-<a lt="logical height">height</a> line boxes
+	for the purposes of determining the positions of any elements inside of them
+	(such as [=absolutely positioned boxes=]),
+	and must be treated as not existing for any other purpose
+	(such as <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapsing margins</a>).
+
 <h2 id="line-height">
 Line Heights and Baseline Alignment</h2>
 
@@ -517,7 +602,7 @@ Line Spacing: the 'line-height' property</h3>
 	</div>
 
 	Note: When there is only one value of 'line-height'
-	(other than 'normal')
+	(other than ''line-height/normal'')
 	for all inline boxes in a block container box
 	and they all use the same first available font
 	(and there are no replaced elements, inline-block elements, etc.),