-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathOverview.src.htm
More file actions
2249 lines (1908 loc) · 66 KB
/
Overview.src.htm
File metadata and controls
2249 lines (1908 loc) · 66 KB
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=Generator content="Microsoft Word 12 (filtered)">
<style>
</style>
<link rel="stylesheet" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" type="text/css">
</head>
<body lang=EN-US>
<div class=Section1>
<div >
<H1>CSS 3 Tables Algorithms</H1>
</div>
<p ><b><span >This version: </span></b></p>
<p ><a
href="http://www.w3.org/Style/Group/css3-src/css3-template/%5bVERSION%5d"><span>http://www.w3.org/Style/Group/css3-src/css3-template/[VERSION]</span></a><span
> </span></p>
<p ><b><span lang=DE >Latest version: </span></b></p>
<p ><a
href="http://www.w3.org/TR/css3-template"><span lang=DE >http://www.w3.org/TR/css3-template</span></a><span
> </span></p>
<p ><b><span >Previous version: </span></b></p>
<p ><a
href="http://www.w3.org/Style/Group/css3-src/css3-template/%5bhttp:/www.w3.org/PreviousVersionURI%5d"><span
>[http://www.w3.org/PreviousVersionURI]</span></a><span
> </span></p>
<p ><b><span >Editors: </span></b></p>
<p ><a
href="mailto:salonir@microsoft.com"><span >Saloni Mira Rai</span></a><span >
<salonir@microsoft.com> </span></p>
<p ><b><span >Authors: </span></b></p>
<p ><a
href="mailto:shuodong@microsoft.com"><span >Shuo Dong</span></a><span >
<shuodong@microsoft.com> </span></p>
<p ><a
href="mailto:edoyle@microsoft.com"><span lang=DE >Erika Doyle</span></a><span lang=DE
>
<edoyle@microsoft.com></span></p>
<p ><b><span >Former Editors: </span></b></p>
<p ><a
href="mailto:mmielke@microsoft.com"><span lang=DE >Markus Mielke</span></a><span
> </span><span
lang=DE >
<mmielke@microsoft.com> </span></p>
<p ><span >
</span></p>
<h1>Abstract</h1>
<p >The intent of this document is to provide a set of detailed
algorithms which describe certain table layout behaviors that are common to most
major browsers today and propose additional standard behaviors in order to
achieve full browser interoperability in table layout. The Table layout
algorithm is one of the most used and most difficult to understand features in
HTML, as there are no common behavior descriptions in either HTML or CSS. The
goal of this document is to introduce a focused discussion around a unified
table behavior with the goal of getting agreement on a set of scenarios for
integration into the CSS 3 Tables specification. </p>
<p >This document is not complete but it tries to capture the
most common scenarios in which browsers have achieved interoperability. Our
hope is that this document is seen as a starting point to provide at least a
partial definition of table layout behavior, ten years after its introduction
into the market. </p>
<h1>Captions in visual formatting model</h1>
<p >Captions above or below a 'table' element are formatted very
much as if they were a block element before or after the table, except that (1)
they inherit inheritable properties from the table, (2) they are not considered
to be a block box for the purposes of any 'compact' or 'run-in' element that
may precede the table, and (3) they use the width of the anonymous box as input
for its available width calculations. </p>
<p >The width of the anonymous box is the border-edge width of
the table box inside it, as described by CSS 2.1 section 17.4. Percentages on
'width' and 'height' properties of the table are relative to the anonymous
box's containing block, not the anonymous box itself.</p>
<p >This algorithm follows the CSS 2.1 specification of the
caption-side property, where the only possible values are top, bottom and
inherit. CSS 3 will also add left and right. Thus in the algorithm
presented here, the caption width will not affect the table auto layout
algorithm in any way. However, the output of the table auto layout algorithm
may affect the sizing of table caption, since it determines the anonymous table
box size.</p>
<p ><span >In
the following example, the </span><a href=""><span
>'caption-side'</span></a><span > property places captions on top of tables.
The caption will be as wide as the anonymous box of the table, and caption text
will be left-justified. </span></p>
<pre class="example"><span >caption { caption-side: top;<br>
<br>
width: auto;<br>
<br>
text-align: left }</span></pre>
<p><span >Example of
the visual model:</span></p>
<p><span ><img border=0
width=533 height=483
src="image002.jpg"
alt="A table with a caption above it"></span></p>
<p><span >Note: CSS3
might want to define a property that enables the developer to use the table's
parent width instead of the anonymous box width as an input in the caption
width algorithm.</span></p>
<h3>Considerations for the caption width algorithm</h3>
<ol start=1 type=1>
<li >Caption has either auto width
or a specified width unit value.</li>
<li >Padding, margin and border
should behave like a normal block box and are covered by the CSS Box Model
calculations. </li>
</ol>
<h3>Inputs</h3>
<ol start=1 type=1>
<li >Table used width </li>
<li >Caption specified width (if
any) </li>
</ol>
<h3>Output</h3>
<p >Caption's used width</p>
<h3>Naming conventions<span > </span></h3>
<table Table border=1 cellspacing=0 cellpadding=0 width="100%"
>
<tr >
<td width="21%" valign=top >
<p ><b>Name</b></p>
</td>
<td width="78%" valign=top >
<p ><b>Explanation</b></p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >captionSpecifiedWidth</p>
</td>
<td width="78%" valign=top >
<p >Input provided by the width property.</p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >captionUsedWidth</p>
</td>
<td width="78%" valign=top >
<p >Output that determines the width of the caption algorithm.</p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >contentMinWidth</p>
</td>
<td width="78%" valign=top >
<p >The minimal unit of breakable text (in most cases, the smallest
word in the caption).</p>
</td>
</tr>
<tr >
<td width="21%" valign=top >
<p >tableUsedWidth</p>
</td>
<td width="78%" valign=top >
<p >Input provided by table auto layout algorithm. This is the
width actually used by the table.</p>
</td>
</tr>
</table>
<p><span > </span></p>
<h3 >Algorithm</h3>
<p ><span >The
caption sizing algorithm can be summarized like this (ignoring possible constraints
set by the min-width and max-width properties)</span><span
class=MsoFootnoteReference><span > <a name="_ftnref1"></a><a href="#_ftn1" title=""><span
>[1]</span></a></span></span><span >:</span></p>
<p><span > </span></p>
<p ><span >IF
captionSpecifiedWidth exist <br>
captionUsedWidth =
captionSpecifiedWidth<br>
ELSE<br>
captionUsedWidth
= tableUsedWidth</span></p>
<h3 >Observations</h3>
<ol start=1 type=1>
<li >If captionSpecifiedWidth < contentMinWidth, caption's
content may stick out of the caption's box (overflow will then
apply). </li>
<li >When captionSpecifiedWidth >
tableUsedWidth, caption and its content may stick out of the table's inner
box (i.e., the caption will be wider than the table). </li>
<li >If tableUsedWidth <
contentMinWidth overflow will occur. This is the same as with normal block
level elements </li>
<li >Specified Percentage width will
be calculated based on tableUsedWidth </li>
</ol>
<p><span >In the
absence of a specified width, the caption is sized to the tableUsedWidth, which
in general follows the behavior of block level elements as described in 10.3.3
in the CSS2.1 specifications:</span></p>
<p><span > </span></p>
<p ><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left"><span
>'marg
621D
in-left'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-border-left-width"><span
>'border-left-width'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-left"><span
>'padding-left'</span></a> + <a
href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width"><span
>'width'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-padding-right"><span
>'padding-right'</span></a> + <a
href="http://www.w3.org/TR/CSS21/box.html#propdef-border-right-width"><span
>'border-right-width'</span></a> +
<a href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right"><span
>'margin-right'</span></a> +
scrollbar width (if any) = tableUsedWidth</p>
<p><span >If 'width'
is not 'auto' and 'border-left-width' + 'padding-left' + 'width' +
'padding-right' + 'border-right-width' + scrollbar width (if any) (plus any of
'margin-left' or 'margin-right' that are not 'auto') is larger than the width
of the tableUsedWidth, then any 'auto' values for 'margin-left' or
'margin-right' are, for the following rules, treated as zero. </span></p>
<p><span > If
all of the above have a computed value other than 'auto', the values are said
to be "over-constrained" and one of the used values will have to be
different from its computed value. If the </span><a
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction"><span
>'direction'</span></a><span > property of the containing block has the
value 'ltr', the specified value of </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right"><span
>'margin-right'</span></a><span > is ignored and the value is calculated so
as to make the equality true. If the value of </span><a
href="http://www.w3.org/TR/CSS21/visuren.html#propdef-direction"><span
>'direction'</span></a><span > is 'rtl', this happens to </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left"><span
>'margin-left'</span></a><span > instead. </span></p>
<p><span > If
there is exactly one value specified as 'auto', its used value follows from
the equality. </span></p>
<p><span >If </span><a
href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width"><span
>'width'</span></a><span > is set to 'auto', all other 'auto' values
become '0' and </span><a
href="http://www.w3.org/TR/CSS21/visudet.html#propdef-width"><span
>'width'</span></a><span > follows from the resulting equality. </span></p>
<p><span >If both </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-left"><span
>'margin-left'</span></a><span > and </span><a
href="http://www.w3.org/TR/CSS21/box.html#propdef-margin-right"><span
>'margin-right'</span></a><span > are 'auto', their used values are equal.
This horizontally centers the element with respect to the edges of the
tableUsedWidth. </span></p>
<p><span >The
"scrollbar width" value is only relevant if the user agent uses a
scrollbar as its scrolling mechanism. See the definition of the </span><a
href="http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow"><span
>'overflow'</span></a><span > property. </span></p>
<h1>Automatic Table Layout Algorithm Overview</h1>
<p >The design of the following algorithm is based upon the CSS
2.1 recommended algorithm (http://www.w3.org/TR/CSS21/tables.html#width-layout),
the HTML 4.1 recommended algorithm
(http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.5.2 ), and an
interoperability analysis of Internet Explorer 7, Firefox 3 Alpha, Opera 9,
and Safari 3 Beta. The goal of this design is to stick to the CSS 2.1 and
HTML 4.1 recommendations as close as possible while also accommodating the
common behaviors of the major browsers. </p>
<p >The algorithm proposed in this document uses several types of
inputs: the intrinsic characteristics of table cells (i.e., the minimum
and maximum widths of their content), the value of each cells column-spanning
(colspan) attribute (if any is set), and the specified width, minimum width
(min-width) and maximum width (max-width) of each table cell and the table
itself. The output of the algorithm is the final used width of the table and
each of its columns. </p>
<h1>List of scenarios handled by this algorithm</h1>
<p >This document is considering the following author <b>inputs</b>
into the algorithm:</p>
<table Table border=0 cellspacing=0 cellpadding=0
>
<tr>
<td width=160 valign=top >
<p ><b><span >Cell</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Unit value</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Percentage</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Auto</span></b></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >min-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p >N/A*</p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >max-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p >N/A*</p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >Width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
</table>
<p >* Due to the current lack of implementations, percentage
values are not defined</p>
<table Table border=0 cellspacing=0 cellpadding=0
>
<tr >
<td width=160 valign=top >
<p ><b><span >Col/ColGroup</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Unit value</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Percentage</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Auto</span></b></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >min-width</span></b></p>
</td>
<td width=160 valign=top >
<p >Cascaded **</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >max-width</span></b></p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >Width</span></b></p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
<td width=160 valign=top >
<p >Cascaded</p>
</td>
</tr>
</table>
<p >** A Cell value will overwrite Col value, which will overwrite
ColGroup as part of the cascade. This is an alternative proposal to the current
CSS2.1 definition</p>
<table Table border=0 cellspacing=0 cellpadding=0
>
<tr>
<td width=160 valign=top >
<p ><b><span >Table</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Unit value</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Percentage</span></b></p>
</td>
<td width=160 valign=top >
<p ><b><span >Auto</span></b></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >min-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >max-width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
<tr>
<td width=160 valign=top >
<p ><b><span >Width</span></b></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
<td width=160 valign=top >
<p ><span ></span></p>
</td>
</tr>
</table>
<p >The <b>output</b>
will be:</p>
<p class=MsoListParagraph ><span
></span><span >
</span>The tables final used width</p>
<p class=MsoListParagraph ><span
></span><span >
</span>Each columns final used width</p>
<p > </p>
<p >This will enable the following <b>scenarios</b>:</p>
<p class=MsoListParagraph ><span ></span><span >
</span>Table with the above specified inputs</p>
<p class=MsoListParagraph ><span ></span><span >
</span>Column-spanning scenarios, where the width on column spans can be expressed
in a unit value, auto or percentages</p>
<p class=MsoListParagraph ><span ></span><span >
</span>Simple nested table scenarios, as long as the intrinsic content width
can be determined</p>
<p >Still open issues:</p>
<div class="issue">
<p class="issue">Issue #1: <span > </span>Overlapping
spans (these work but do not produce an exact result) </p>
<p class="issue">Issue #2: <span > </span>Border
width(not taken into account, as it should be an easy addition)</p>
<p class="issue">Issue #3: <span > </span>Cell
padding (in both specified unit and percent values)</p>
<p class="issue">Issue #4: <span > </span>Cellspacing
/ border-spacing</p>
</div>
<h1> </h1>
<p > </p>
<p > </p>
<h1>Algorithm Summary </h1>
<p >Table auto layout calculation is achieved with the following
steps. </p>
<p class=MsoListParagraph >1.<span >
</span><b>Calculate each cells minimum width, preferred width and preferred
percent</b> by examining the cells content and its width/min-with/max-width
properties.</p>
<p class=MsoListParagraph >2.<span >
</span><b>Identify the minimum width, preferred width and preferred percent of
each column</b> in the table by finding the largest minimum width, largest
preferred width and largest preferred percent among all cells in the column. In
this step, the algorithm first goes over all cells with colspan equal to one,
and then distributes the minimum width, preferred width and preferred percent
of each cell with colspan > 1 among the columns it spans over. </p>
<p class=MsoListParagraph >3.<span >
</span>With each columns minimum width, preferred width<b> </b>and preferred
percent,<b> calculate the tables minimum width and preferred width</b></p>
<p class=MsoListParagraph >4.<span >
</span><b>Determine the tables final used width</b> by attempting to satisfy
each columns preferred width (or preferred percent if it has one) to the
greatest extent possible.</p>
<p class=MsoListParagraph >5.<span >
</span>Decide how to <b>distribute the tables final used width among all the
columns</b>. During this process, columns with specified
A0B2
percentage width are
given first priority, followed by the columns with specified unit value width.
Columns with unspecified width (or width set to auto) has the lowest
priority.</p>
<p class=MsoListParagraph >6.<span >
</span><b>Distribute any rounding errors</b> introduced during distribution in
the previous step and adjust each columns width accordingly. (This step is
currently not part of this proposal.)</p>
<p > </p>
<p >What follows is the proposed algorithm in finer detail.</p>
<p >We will <span >color code</span>
Terms that we will introduce for the first time. </p>
<span ><br
clear=all >
</span>
<p ><b><span > </span></b></p>
<h1 ><span >1.</span><span
>
</span>Calculate each cells minimum and preferred width </h1>
<p >This step calculates table width
limitation and preference at the cell level. These values are computed for each
cell based on its intrinsic minimum and preferred widths and its specified
width, min-width and max-width (if any). </p>
<p class=MsoListParagraph ><b>1.1</b><b><span
>
</span>Cell Intrinsic Min width (cellIntrinsicMinWidth) and Cell Intrinsic
Preferred Width (<span >cellIntrinsicPreferredWidth</span>)</b></p>
<p class=MsoListParagraph >cellIntrinsicMinWidth and cellIntrinsicPreferedWidth
should be calculated based on the regular CSS2.1 shrink to fit block model
calculations (see sections 10.3.5 and 10.3.7 for further details).</p>
<p class=MsoListParagraph ><b>1.2</b><b><span
>
</span>Cell Min Width (cellMinWidth)</b></p>
<p class=MsoListParagraph ><b>cellMinWidth = max(cellIntrinsicMinWidth,
cellSpecifiedMinWidth )</b></p>
<p class=MsoListParagraph >. . . where cellSpecifiedMinWidth is a cells specified
unit-value min-width.</p>
<p class=MsoListParagraph >Each cells minimum width sets the lower limit for that
cell. (A cell can never be narrower than its minimum width.) </p>
<p class=MsoListParagraph ><i>This is a design decision drawn from a backwards
compatibility / interoperability analysis. It could be argued that display:
table-cell does have an overflow property and that it is thus not necessary to
always honor minimum width. The algorithm here, however, suggests ignoring
overflow property on table cell in auto layout table and respect minimum width
for best backward compatibility and readability. This of course, is open for
discussion.</i></p>
<p class=MsoListParagraph >The cells minimum width is calculated before the cells
preferred width, so that the minimum width can set a lower limit for the
preferred width.</p>
<p class=MsoListParagraph ><b>1.3</b><b><span
>
</span>Cell Preferred Width (<span >cellPreferredWidth</span>)</b></p>
<p class=MsoListParagraph >When a cell has specified unit value width, its
preferred width is:</p>
<p class=MsoListParagraph ><b>cellPreferredWidth = max(cellMinWidth,
min(cellSpecifiedMaxWidth, cellSpecifiedWidth ))</b></p>
<p class=MsoListParagraph >When a cell has no specified unit value width, its
preferred width is:</p>
<p class=MsoListParagraph ><b>cellPreferredWidth = max(cellMinWidth,
min(cellSpecifiedMaxWidth, cellIntrinsicPreferredWidth ))</b></p>
<p class=MsoListParagraph > . . . where cellSpecifiedMaxWidth is a cells
specified unit value max-width and cellSpecifiedWidth is a cells specified
unit value width. </p>
<p >Each cells preferred width is
the width the algorithm tries its best to satisfy. The preferred width is not
an upper limit of the cell because other cells in the same column and the
tables overall preferred width could cause the cell to be assigned a width
exceeding this value.</p>
<p class=MsoListParagraph ><b>1.4</b><b><span
>
</span>Cell Preferred Percent (<span >cellPreferredPercent</span>)</b></p>
<p ><b>cellPreferredPercent =
cellSpecifiedWidth in percent</b></p>
<p >. . .where cellPreferredPercent
is only defined when the cell has specified width in percent. </p>
<p ><b>Issues</b></p>
<div >
<p class=issue >Issue #5: <span
>
</span><i> Specified percentage min-width and max-width are not
taken into consideration here. Their impact on the algorithm will be defined in
a future version of the document. Step 1.3 presents itself as a good place to
add in their impact</i></p>
<p class=issue >Issue #6: <span
>
</span><i>At the current stage, the algorithm hasnt considered any padding,
borders or border-spacing. These things will impact the calculation of
cellMinWidth / cellMaxWidth according to the CSS box model and can be added in
a future version of this document</i></p>
</div>
<p ><i> </i></p>
<h1 >2<span > </span>Identify
the minimum width, preferred width and preferred<sup> </sup>percent of each
column </h1>
<p >In this step, the algorithm collects
the width limitation and preference on a cell level and aggregates them up to
the column level. The goal of this step is to identify the minimum width,
preferred width and preferred percent of each column. </p>
<p >The algorithm first calculates
columnMinWidth, columnPreferredWidth, columnPreferredPercent based solely on
cells with colspan ==1. It then adjusts these three values with the minimum,
preferred width and preferred percent of colspan > 1 cells.</p>
<p class=MsoListParagraph ><b>2.1</b><b><span
>
</span>Calculate columnMinWidth, columnPreferredWidth, columnPreferredPercent
based on colspan == 1 cells</b></p>
<p class=MsoListParagraph ><b>2.1.1</b><b><span
>
</span>Column Mininum Width (<span >columnMinWidth</span>)</b></p>
<p class=MsoListParagraph ><b>columnMinWidth = max (cellMinWidth </b>of all
colspan == 1 cells in the column<b>)</b></p>
<p >The columns minimum width sets the lower limit on columns
used width. The column can never be smaller than its minimum width, in order to
prevent overflow of the text into neighboring cells. This is a design decision
to enable better readability. </p>
<p class=MsoListParagraph ><b>2.1.2</b><b><span
>
</span>Column Preferred Width (<span >columnPreferredWidth</span>)</b></p>
<p class=MsoListParagraph ><b>columnPreferredWidth = max
(cellPreferredWidth </b>of all colspan ==1 cells in the column<b>)</b></p>
<p >The columns preferred width defines the
width which the algorithm tries to honor.</p>
<p class=MsoListParagraph ><b>2.1.3</b><b><span >
</span>Column Preferred Percent (<span >columnPreferredPercent</span>)</b></p>
<p class=MsoListParagraph >Only columns with at least one cell with specified
width in percent will have a columnPreferredPercent value It is found by taking
the largest specified percent cell width:</p>
<p class=MsoListParagraph ><b>columnPreferredPercent = max (cellPreferredPercent </b>of
all colspan == 1cells in the column<b>)</b></p>
<p >To better understand the behavior, the algorithm defines
three types of columns:</p>
<p class=MsoListParagraph ><b>a.</b><b><span
>
</span>auto column</b>: all cells in the column have either width: auto
or no specified width</p>
<p >b.<span
>
</span><b>specified unit value column:</b> at least one cell in the column has
a specified width in unit value and no cell has specified width in percent.
(Specified width can be cascaded or inline.)</p>
<p >c.<span
>
</span><b>specified percent column:</b> at least one cell in the column has a
specified width in percent</p>
<p class=MsoListParagraph >A specified percentage cell has a higher priority than
a specified unit value cell. For instance, one specified percentage width cell
will make the column a specified percent column even if all the other cells
have specified unit value width. </p>
<p class=MsoListParagraph ><i>Only non-negative percentage values are taken into
consideration. It may happen that the percentage value exceeds 100%, or the sum
of all columns specified percentage value exceeds 100%. Cases like these will
be handled in step 5, when columns are assigned their final used widths.</i></p>
<p class=MsoListParagraph ><b>2.2</b><b><span
>
</span>adjust columnMinWidth, columnPreferredWidth, columnPreferredPercent</b></p>
<p class=MsoListParagraph >The proposed algorithm handles cell with colspan >
1 one by one without any optimization for overlapping colspan scenarios. An
optimized algorithm will be proposed in a future version of this document.</p>
<p >The algorithm first checks to see if any cells spanning
multiple columns will affect the minimum width, preferred width, or preferred
percent widths of the columns they span. If such is the case, theses widths of
the multi-column cell are distributed among the corresponding width values of
each of the columns it spans. There are several ways how this can be done, but
the method outlined in this spec was chosen based on browser interoperability.</p>
<p > In general, the algorithm will distribute the impact
evenly or proportionally with either (1) each columns preferred width, (2) the
difference between each columns preferred width and minimum width (i.e.,
preferred width min width), or (3) each columns minimum width,
depending on the case. When the algorithm distributes the impact of a
multi-column cell, the columns minimum and preferred widths are the sole
contributors to the distributionits specified width is not directly figured
in. This is because the impact of a multi-column cells specified unit
value width has already been calculated into its columns preferred width. The
impact of a multi-column cells specified percentage width will be distributed
proportionally to each non-percentage column that is spanned by the
multi-column cell.</p>
<p >When calculating the impact of the multi-column cell on the
columns, the algorithm adjusts the columns minimum width first, preferred
width second and preferred percent last.<b> </b>This follows the guidelines for
min/max width calculations of CSS2.1 (section 10.4). This enables the preferred
width to be restricted by the minimum width. The distribution of a multi-column
cells preferred percentage width will now depend on the newly adjusted minimum
and preferred widths of its columns. </p>
<p ><b><i>Issues</i></b></p>
<div >
<p class=issue >Issue #7: <span
>
</span><i> As mentioned above, the algorithm hasnt considered any
padding, borders or border-spacing. These inputs will impact the calculation of
columnMinWidth, columnPreferredWidth and columnSpecifiedWidth according to CSS
box model, and can be added in future version of this document</i></p>
</div>
<p ><b><i> </i></b></p>
<h1 >3.<span > </span>Calculate
tableMinWidth/tablePreferredWidth</h1>
<p >This step calculates the tables
minimum and preferred widths.</p>
<p class=MsoListParagraph ><b>3.1</b><b><span
>
</span>Table Minimum Width (<span >tableMinWidth</span>)</b></p>
<p ><b>tableMinWidth =
sum(columnMinWidth)</b></p>
<p class=MsoListParagraph ><b>3.2</b><b><span
>
</span>Table Preferred Width (<span >tablePreferredWidth</span>)</b></p>
<p ><i>As the following steps demonstrate,
tablePreferredWidth is only used in the absence of a table specified width,
when the table is sized according to the shrink-to-fit equation. The
calculation of tablePreferredWidth could therefore be ignored in some cases to
optimize performance.</i></p>
<p >There are three cases to address
when calculating tablePreferredWidth:</p>
<p class=MsoListParagraph ><b>a.</b><b><span
>
</span>When there is no specified percent columns,</b></p>
<p class=MsoListParagraph >The preferred table width is simply
the sum of columnPreferredWidths.</p>
<p class=MsoListParagraph ><b>tablePreferredWidth =
sum(columnPreferredWidth)</b></p>
<p class=MsoListParagraph ><b>b.</b><b><span
>
</span>When there is at least one specified percent column,</b></p>
<p class=MsoListParagraph >When there are specified percent
columns, the algorithm uses the largest column
columnPreferredWidth-to-columnPreferredPercent ratio to determine the table
width preferred by the percent columns: </p>
<p class=MsoListParagraph ><b>percentColumnPreferredTableWidth =
max (columnPreferredWidth/columnPreferredPercent). </b></p>
<p class=MsoListParagraph >Next the algorithm pretends that
the non-percent columns (i.e., the auto and specified unit value columns) were
just one big percent column with a preferred percentage equal to (100% -
percentColumnTotalSpecifiedPercent), and uses that value to find the ratio of
columnPreferredWidth-to-columnPreferredPercent, which represents the table
preferred width of the non-percent columns:</p>
<p class=MsoListParagraph ><b>NonPercentColumnPreferredTableWidth
= nonPercentColumnTotalPreferredWidth / (100% -
percentColumnTotalPreferredPercent)</b></p>
<p class=MsoListParagraph >The final tablePreferredWidth is the
larger one of the two values above</p>
<p class=MsoListParagraph ><b>tablePreferredWidth = max
(percentColumnPreferredTableWidth, nonPercentColumnPreferredTableWidth)</b></p>
<p >When the sum
of preferred percentages exceeds 100%, the algorithm recommends that the
browser ignore all specified percentages coming after the sum reaches 100% and
regard them as having 0% specified percent width (though this doesnt
necessarily prevent them from being rendered).</p>
<p >When there
are only specified percent columns and the sum of the percent is smaller than
100%, step 5 will provide a solution to distribute extra table used width.</p>
<p class=MsoListParagraph ><b>c.</b><b><span
>
</span>When percent columns are demanding the full table width (100%) and there
are also non-percent columns</b></p>
<p class=MsoListParagraph >Because the algorithm does not allow
the sum of specified percentages to be larger than 100%, a special case might
arise where the percent columns are demanding the full table width (100%) but
there are also non-percent columns which require at least their minimum<span
> </span>width. In this case, the tables preferred
width could never be satisfied. The algorithm treats tables preferred width as
infinitely large</p>
<p class=MsoListParagraph ><b>tablePreferredWidth = INFINITE</b></p>
<p ><b>Issue:</b></p>
<div >
<p class=issue >Issue #8: <span > </span><i>Again
in this step, the CSS padding, margin, border and border-spacing
properties and HTML cellpadding and cellspacing attributes will all have an
impact on the calculations, and need to be detailed in a future version of this
document</i></p>
</div>
<h1 >4.<span > </span>Determine
the tables final used width (<span >tableUsedWidth</span>)</h1>
<p >This step must differentiate two
cases: (1) when the table has a specified width, and (2) when the table is
auto-sized. </p>
<p class=MsoListParagraph ><b>4.1</b><b><span
> </span>When
the table has a specified width</b></p>
<p class=MsoListParagraph >In this case, the tables specified
width is taken as its used width, unless that width is smaller than the tables
minimum width, in which case its minimum width becomes the tables final used
width. If the table has a specified width in percentage, the algorithm converts
this to a unit value based on the tables available width.</p>
<p class=MsoListParagraph ><b>tableUsedWidth = max
(tableMinWidth, tableSpecifiedWidth)<a name="_ftnref2"></a><a href="#_ftn2"
title=""><span class=MsoFootnoteReference>[2]</span></a></b></p>
<p class=MsoListParagraph ><b>4.2</b><b><span
> </span>when
the table has auto (non-specified) width</b></p>
<p class=MsoListParagraph >In this case, the algorithm uses the
shrink-to-fit rule (using the tableminWidth and tablePreferredWidth values
found in step 3) to determine the tables used width:</p>
<p ><b>tableUsedWidth
= min(max(tableMinWidth, tableAvailableWidth), tablePreferredWidth)<a
name="_ftnref3"></a><a href="#_ftn3" title=""><span class=MsoFootnoteReference>[3]</span></a></b></p>
<p >. . . where tableAvailableWidth
is the width of the tables containing block.</p>
<p class=MsoListParagraph ><b>4.3</b><b><span
> </span>Adjust
tableUsedWidth against specified min-width/max-width</b></p>
<p >This
algorithm strictly follows the min-width/max-width rule defined in the CSS 2.1
spec (section 10.4) to adjust the tables used width by its specified
min-width and max-width as needed. When these values are in percentages,