Lab: HTML Layout

About this experiment

This page presents possible implementation of the HTML layout system for interactives.

Try to resize interactive container (take a look at its lower right corner). This layout is based on width. Height is adjusted appropriately to manage required aspect ratio.

It allows to set whole layout using typical HTML. The only difference is usage of data-width and data-height attributes for components. They are automatically turned into CSS rules. This is justified by two things:

• Special values like model-width or model-height can be used.
• Layout system is able to determine if width and / or height was explicitly set by user. This is probably impossible while using typical CSS, as CSS values are *always* provided for each DOM element (e.g. defaults set by browser).

Why do we need to know if width / height are set explicitly by user? See the description of the layout algorithm below.

Layout algorithm

Each component is being processed separately. There are three possible cases:

• Both data-width and data-height attributes are provided, so use them.
• There is only one of these attributes, so use it and calculate the second one using following rules:
  • Use aspect ratio if it is provided.
  • If not, try to use canonical dimension from the component definition.
• Both data-width and data-height attributes are missing, so use canonicalWidth and canonicalHeight from the component definition.

model-with and model-height special values are always replaced with real model width and height.

Note that

• canonicalWidth and canonicalHeight are exposed directly in component options only in this prototype. In the real life, these values would be managed by component class which should implement interface: getPreferredWidth(), getPreferredHeight()
• aspectRatio - the same situation. It should be managed by component class also.