This demo works in Gecko-based browsers only. It's a proof-of-concept written on a dare from hixie, to prove that I understood the complications of tab layout. The algorithm took about 20 minutes to spec out, the coding little more than half a day. (This includes looking up things like "how to loop through an array in JS", as I haven't really done much web page scripting before.)
Resize your window a few times and see what happens.
Assumptions:
- All computed sizes are returned in pixels
Algorithm:
- Use floats for tabs. Clear after floats and add bottom border.
Loop:
- Take all floats with the same y-position -> one row
- Calc tallest box. Force height fo all tabs in row to this height
(This will force the next row to adopt a uniform y position)
- Store the border-box height as the row height
- Store the y-position of the row within the container
- Calculate remaining space on this line and split among the
left and right paddings
- Determine which row has focussed tab
- Determine y-position of conainer's bottom
- Calc dist from focussed row bottom to container bottom
- Relatively position focussed row down by dist
- Relatively position all following rows up by focussed row height
- For focussed tab
- reduce all margins by border-width
- increase all padding by this amount
Notes:
- Active tab uses larger font to test perverse conditions :)
The algorithm can handle it just fine, though it's not particularly
recommended where navigation between tabs is frequent. (The tabs
reshuffle themselves when you switch from increasing text size on a
just a short tab to increasing it on a long one.)