8000 Added issue about aligning a flow both at the top and the bottom · simonwuelker/csswg-drafts@8cca4c3 · GitHub
Skip to content

Commit 8cca4c3

Browse files
bert-githubbert-github
committed
Added issue about aligning a flow both at the top and the bottom
(stretching margins). Added example of pages text with two languages, each in one column.
1 parent b00af61 commit 8cca4c3

1 file changed

Lines changed: 65 additions & 4 deletions

File tree

‎css3-layout/Overview.src.html‎

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
profile="http://microformats.org/profile/hcard http://microformats.org/wiki/rel-license">
66
<title>CSS Grid Template Layout Module</title>
77
<meta content="text/html; charset=utf-8" http-equiv=content-type>
8-
<link href="default.css" rel=stylesheet type="text/css">
8+
<link href="../default.css" rel=stylesheet type="text/css">
99

1010
<style type="text/css">
1111
/* Just in case an incorrect max-width occurs in default.css */
@@ -2486,6 +2486,30 @@ <h3 id=vertical-alignment>Vertical alignment of the contents of slots</h3>
24862486
and <dfn>head edge</dfn> of a box as a writing-mode-dependent edge as
24872487
follows:
24882488

2489+
<div class=issue>
2490+
<p>Especially in paged material, it is very common for a column of
2491+
text to be not just aligned or centered, but vertically “justified” to
2492+
align at both top and bottom, by a combination of means: scaling an
2493+
image (if there is one available), changing the line height, changing
2494+
the vertical margins, etc. Probably the easiest to specify in CSS is
2495+
an elastic margin, e.g.:
2496+
2497+
<pre>margin-top: 1.2em + 1fill - 0.6em</pre>
2498+
2499+
<p>(Which could mean: preferred width is 1.2em, may be increased
2500+
without limit, may be decreased by no more than 0.6em.) To increase
2501+
the padding instead of the margin, the 'flex' property from css3-flex
2502+
might be useful:
2503+
2504+
<pre>flex: 1</pre>
2505+
2506+
<p>although that doesn't say at which side the padding is added and
2507+
thus requires another property to align the content inside the box. A
2508+
more direct way could be:
2509+
2510+
<pre>padding-top: 0.5em + 1fill</pre>
2511+
</div>
2512+
24892513
<table class=equiv-table>
24902514
<thead>
24912515
<tr><th>Value of 'writing-mode' <th>Meaning of “head” <th>Meaning of “tail”
@@ -2749,11 +2773,10 @@ <h3>Floating elements inside templates</h3>
27492773
extended to apply to slots: '@footnote :first::slot(a)' is the footnote
27502774
area of slot a on the first page.
27512775

2752-
<div class=level4>
2753-
27542776
<!--=================================================================-->
27552777

2756-
<h2 id=page-templates> Page-based grid templates</h2>
2778+
<div class=level4>
2779+
<h2 id=page-templates>Page-based grid templates</h2>
27572780

27582781
<p>A template can also be attached to a page, rather than an element.
27592782
Such a template is called a <dfn>page-based template</dfn> as opposed
@@ -2836,6 +2859,44 @@ <h2 id=page-templates> Page-based grid templates</h2>
28362859
that a UA has to print a page (force page breaks) even though some
28372860
slots aren't filled yet.
28382861

2862+
<div class=example>
2863+
<p>This example shows a document with text in two languages, which are
2864+
to be shown side by side:
2865+
2866+
<pre>
2867+
@page {grid: "a b"}
2868+
:lang(en) {flow: a}
2869+
:lang(fr) {flow: b}
2870+
</pre>
2871+
2872+
<p>This works with a document where the languages are separated like this:
2873+
2874+
<pre>
2875+
&lt;BODY>
2876+
&lt;DIV LANG=en>
2877+
&lt;H1>The blue house&lt;/H1>
2878+
...
2879+
&lt;/DIV>
2880+
&lt;DIV LANG=fr>
2881+
&lt;H1>La maison bleue&lt;/H1>
2882+
...
2883+
&lt;/DIV>
2884+
&lt;/BODY>
2885+
</pre>
2886+
2887+
<p>But also with a document where the languages are interleaved:
2888+
2889+
<pre>
2890+
&lt;BODY>
2891+
&lt;H1 LANG=en>
2892+
&lt;H1 LANG=fr>
2893+
&lt;P LANG=en>...
2894+
&lt;P LANG=fr>...
2895+
...
2896+
&lt;/BODY>
2897+
</pre>
2898+
</div>
2899+
28392900
<div class=example>
28402901
<p>This example shows how the first page may have a different layout
28412902
from the other pages. The slot ''a'' only occurs on the first page. If

0 commit comments

Comments
 (0)