Test of a simple adaptive layout concept (H1)

This concept should work well on all operating systems, all browsers, and all screen sizes, if they do follow the international standards of HTML and CSS. It should adapt smoothly to all sizes, and print well, or print-to-pdf well.

Instructions for testing (H2)

Rescale the browser window from full-screen to very narrow, and watch how the margins and padding resize, and how text reflows. Use [Ctrl +] and [Ctrl -] at various window sizes, and watch again how content resizes and text reflows. Note: margin is the empty area outside of the border, padding is the empty area inside the border. Also try the print-preview, or print-to-pdf, to see how it would print.

Styling design rules (H3)

Test of make-up and rescaling (H3)

This is in bold text, this is in italics text, this is in emphasis, this in strong emphasis, and this is in code as in computer-code. This is a link and another link, and this is strike through. Formulas and notes can have super- and subscripts, as in x2 + y2 and H2O + CO2.

Test of a table

Test of a fieldset This text sits in the fieldset, surrounded by a border. This is handy for forms or important things.

Too big pictures should automatically scale down to fit within the body-width. But the functions "Save As" or "View Image" should save or show it in its original size.
test rescaling of big pictures

Design: © Geert Keteleer - 2022-12-28