[Here will be included the file "../copyright.inc"]
This module defines display: tab, a display type that
handles the visual layout geometry of tabs in a tabbed interface.
This is an unapproved working draft and has no official status at the moment.
Comments on, and discussions of this draft can be sent on the (archived) public mailing list www-style@w3.org (see instructions).
This is a working draft and may therefore be updated, replaced or rendered obsolete by other documents at any time. It is inappropriate to use Working Drafts as reference material or to cite them as other than "work in progress". Its publication does not imply endorsement by the W3C membership or the CSS Working Group (members only).
To find the latest version of this working draft, please follow the "Latest version" link above.
The layout requirements for tabs are complex and at this moment cannot be implemented in existing CSS without heavy scripting to adjust the layout. Among the requirements are: flowing into one or many lines depending on the width of the container, justifying to fill the width of the container, and moving the row containing the active tab to the front.
| Name: | display |
| New Values: | tab | front-tab |
| Initial: | same as CSS 2.1 |
| Applies to: | same as CSS 2.1 |
| Inherited: | same as CSS 2.1 |
| Percentages: | same as CSS 2.1 |
| Media: | same as CSS 2.1 |
| Computed value: | same as CSS 2.1 |
Tabs are elements with a display value of either 'tab' or 'front-tab' Tab layout occurs within a tab formatting context. If all elements within a containing block are tab elements, then that containing block is the tabs' containing block. Otherwise, all consecutive tab elements are enclosed in an anonymous block, which becomes the tabs' containing block.
Tabs are laid out by grouping them into rows: as many tabs as will fit side-by-side are flowed, in document order, into a row before moving on to fill the next. Margins do collapse between tabs and 'auto' widths are handled as for display: inline-block. The UA may then balance rows by shifting the last tab (or several tabs) of a previous row into the next.
Tabs within a row are horizontally justified as follows: if any side margins are 'auto', then the remaining space on the line (the distance from the furthest margin edge of the last tab to the far edge of the containing block) is split amongst the auto margins. Two 'auto' margins that collapse are counted as one. If an 'auto' margin and a fixed-size margin collapse, then the 'auto' margin assumes the width of the fixed-size margin plus the extra space from justification. If instead none of the side margins are 'auto', then the extra space is split among and added to the left and right padding of every tab in the row. If the extra space is negative, no justification happens.
Tabs within a row are vertically justified by increasing the height of every tab such that its margin box is the same height as the tallest margin box in the row.
The rows of tabs are normally ordered to match their document order. If, however one of the tabs has a display value of 'front-tab', then the row to which it belongs is shifted down to become the bottom row. If more than one tab has a display value of 'front-tab', then only the first one is honored; subsequent front-tab elements are treated exactly as if they had display: tab.
There are no gaps between rows. Margin collapsing, however, does occur. The effective margin size for vertical collapsing is the smallest margin, by absolute value, on the relevant side of the relevant row.
Formatting of content within a tab is done exactly as for an inline block.
Setting 'float' on a tab to either 'left' or 'right' does not take the tab out of normal flow. It instead shifts the tab within the row's box order as far to the left (for 'left') or as far to the right (for 'right') as it can without going further left than any previous boxes with 'float: left' or further right than any previous boxes with 'float: right'. Margin collapsing and box justification occur as if this modified order were the row's original box order.