csswg-drafts/css3-tables/css-tabs.html at 8c7d23c243a6ff5d116634f5e4ebc3b06c2dc616 · w3c/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html public '-//W3C//DTD HTML BB//EN'>
<html>
<head>
<title>CSS tabs</title>
</head>

<body>
<h1>CSS tabs</h1>

<p>A proposal for adding tab stops to CSS.</p>

<h4><a name="tab">'tab'</a></h4>

<p><em>Value:</em> [ &lt;length&gt; | &lt;percentage&gt; | none ] [
dots | line | blank ]? [ l | r | c | d ]?<br> <em>Initial:</em> none
blank L<br> <em>Applies to:</em> inline
elements<br> <em>Inherited:</em> no<br>
<em>Percentage values:</em> relative to
element's width</p>

<p>If an element has a tab property that doesn't start with 'none', it
means that the element is anchored to a certain horizontal position.
The four letters l, r, c, and d determine how it is anchored:</p>

<ul>
<li><p>l means that the left edge of the element is at the indicated
position</p></li>

<li><p>r means the right edge</p></li>

<li><p>c means the element is centered on this position</p></li>

<li><p>d means that the last occurrence of the decimal separator ('.'
in English) is centered at the indicated position. If there is no
decimal separator in the element, positioning is as with r.</p></li>
</ul>

<p>The position can be given in any of the normal length units, or as
a percentage of the enclosing block element's width. Positive numbers
start from the left margin, negative ones from the right.</p>

<p>Optionally, the space between the element and the preceding text
can be filled with a leader. The default is 'blank', meaning no leader
(i.e., just whitespace). 'dots' means that the space is filled with a
dot leader, 'line' means it is filled with a solid, horizontal
line.</p>

<p>Here is an example of a table of contents. The HTML could be:</p>

<pre>
&lt;B CLASS=toc-chp>1 The problem&lt;/B> &lt;span class="pgno">8&lt;/span>
&lt;EM CLASS=toc-sec>1.1 Definitions&lt;/EM> &lt;span class="pgno">9&lt;/span>
</pre>

<p>With this style sheet:</p>

<pre>
.toc-chp { tab: 0em /* default is left-align, no leaders */ }
.toc-sec { tab: 2em }
.pgno { tab: -0.001pt dots R }
</pre>

<p>(The position for pgno must be negative; -0pt doesn't work.) The
result would be similar to this:</p>

<pre>
1 The problem . . . . . . . . . 8
    1.1 Definitions . . . . . . 9
</pre>

<p>Leaders are not considered part of the element, and thus they don't
use the font, color, decoration, etc. of the element itself, but of
its parent.</p>

<p>An author can try to make sure that there is enough width by
setting the width property of the enclosing block to a fixed size, or
by selecting 'pre' or 'nowrap' for the block's whitespace property.
But even then there may be cases where the text doesn't fit in the
allocated columns (unavailable font sizes, different font metrics,
etc.). The following algorithm defines the behavior of tabs in such
cases.</p>

<p>The first principle is: if the text of a tabbed element would
overlap the preceding text (or indeed appear visually <em>before</em>
the preceding text), the tab is moved to the next line. In some cases
the tab may have to be moved down several lines. (This can occur if
line wrapping is not disabled.)</p>

<p>If line wrapping is disabled (whitespace set to 'pre' or 'nowrap'),
the width of the enclosing block element is automatically increased to
hold the longest line. However, the tab positions don't change: a
percentage value sets a tab at a position relative to the a-priori
width, based on the inherited width or the width property, if that has
been set explicitly.</p>

<p>If line wrapping is enabled (whitespace set to 'normal'), the
content of the element wraps when it reaches the margin (note that
this may be the right margin, the left margin or both). When it wraps,
the wrapped part should not be put at the opposite margin, but at the
tab position. An example with a left tab:</p>

<pre>
  |>.......>.........|      <--- the margins (|) and the tabs (>)
  |                  |
  |>abc    >short    |      <--- the normal case
  |                  |
  |>def    >a longer |      <--- with wrapping
  |         element  |
  |         will wrap|
</pre>

<p>An example with a right tab. Note how it wraps at the left margin
and at the tab position:</p>

<pre>
  |....<.........<...|      <--- the margins (|) and the tabs (<)
  |                  |
  | abc<    short<   |      <--- the normal case
  |                  |
  | def<        a    |      <--- with wrapping
  |longer element    |
  |     will wrap<   |
</pre>


<hr>
<address>
<p><a href="../"><img src="../Icons/WWW/w3c_48x48" alt="W3C"></a><a href="../People/Bos">Bert Bos</a><br> <a href="../Help/Webmaster.html">Webmaster</a><br> Updated 20 Mar 1996,
27 Nov 1996</p>
</address></hr>

</body>
</html>

<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-declaration:"~/SGML/html.decl"
sgml-default-doctype-name:"html"
sgml-minimize-attributes:t
sgml-nofill-elements:("pre" "style" "br")
sgml-live-element-indicator:t
End:
-->