HTMLayout %% length units
In short, %% units are "percentage from free space". They also known as flex units or relative length units.
The engine supports two forms of flex units: "spring coil" notation - 100%% and star notation - 1* and these forms are related as:
100%% = 1*
%% units are applicable to border, padding, margin, width and height CSS
attributes only. HTMLayout will effectively compute them for all blocks in
'normal' flow. Thus width:100%% of floated block will not be interpreted at all
(will be treated as undefined).
Formal definition of %% length units computation:
When allotting space among element attributes competing for space along
axis, HTMLayout engine allot all values for attributes having other than %% lengths
first, then divide up remaining available space among %% lengths. Each %%
length receives a portion of the available free space that computed as a
percentage from total sum of all %% units along axis. If total sum of all %%
lengths along axis is less then 100 then 100%% value is used as a total sum of
all %% units. Thus, if 100 pixels of space are available after the user agent
allots pixel and percentage space, and the competing relative lengths are 10%%,
20%%, and 70%%, the 10%% will be alloted to 10 pixels, the 20%% will be alloted
20 pixels, and the 70%% will be alloted 70 pixels. If 100 pixels of space are
available, and the competing relative lengths are 10%%, 20%%, and 30%%, the
10%% will be alloted to 10 pixels, the 20%% will be alloted 20 pixels, the 30%%
will be alloted 30 pixels, and remaining 40 pixels will be left undistributed.
In the example below I am using HTML table to model layout which could be done
by %% units without need to use tables. Some %% use cases cannot be reproduced
even by HTML tables.
Imagine that four blocks below declared in CSS as:
Below is the same layout but with %% units use. Could be viewed properly only in HTMLayout
engine so far:
And following example is just one DIV having left and right border set to 30%% and
border-left:solid tan 30%%;
border-right:solid tan 70%%;
border-top:solid tan 4px;
border-bottom:solid tan 4px;
To see examples of %% units alive download
- HTMLayout engine and its demo application with samples.
How to use it:
Unzip the archive somewhere on disk drive of your Windows PC .
Start /bin/browse.exe and open html files in samples folder of the
distribution by using menu: File/Open of the application.
- copy of this file.
- mockup of UI of sample application. %% units are used there to position
elements horizontally and vertically.
- typical web page layout esciso.
html_samples/backgrounds.htm - sample of backgrounds supported by
HTMLayout engine. Gradient backgrounds and extended tiling demos.