H-SMILE %% length units

In short, %% units are "percentage from free space".

%% units are applicable to border, padding, margin, width and height CSS attributes only. H-SMILE 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, H-SMILE 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.

Example:

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:

width:100px
width:30%% width:70%% width:150px

Below is the same layout but with %% units use. Could be viewed properly only in H-SMILE engine so far:

width:100px
width:30%%
width:70%%
width:150px

Two "tables" above have same structure and dimensions of "cells" in H-SMILE engine.

And following example is just one DIV having left and right border set to 30%% and 70%% respectively.

border-left:solid tan 30%%;
border-right:solid tan 70%%;
border-top:solid tan 4px;
border-bottom:solid tan 4px;
width:50%;
background: gold

DIV above takes all available width of its container in H-SMILE engine.

To see examples of %% units alive download HTMLayoutSDK.zip - H-SMILE engine and its demo application with samples.

How to use it:

  1. Unzip the archive somewhere on disk drive of your Windows PC .
  2. Start wtl_browse.exe and open html files in samples folder of the distribution by using menu: File/Open of the application.

Samples explanation:


Andrew Fedoniouk.
Terra Informatica Software, Inc.
http://terrainformatica.com
British Columbia, Canada.
2004-06-23