Fluid Design
A Guide to Using MediaWiki in a Hosted Environment
An instructional website by the developer of mh370wiki.net - a MediaWiki site about Malaysia Airlines Flight MH370.
Fluid Design
Instead of fixed units like px, fluid design uses relative units.
Instead of break points used by responsive design, fluid design seeks continous proportionality.
Fluid Design and mh370wiki.net
MediaWiki is not particularly responsive. Some Skins (Pivot, Foreground and others) are 'mobile first' but I transitioned to Vector so I could use the Extension:CollapsibleVector. But the website never looked good on smaller devices. An Extension:MobileFrontEnd creates a separate website for mobile users (Wikipedia apparently uses it) but I did not want to do that. So the best I could start with was flexible-sized text and percentages for widths of elements such as images.
In 2021 I began with fluid typography as it was called then. I already had CSS variables for colors, so it was easy to add CSS variables for font sizes. It just took a bit of experimenting to determine a suitable root font size.
Root Font Size
The standard formula is based on the fact that the base font size in most browsers is 16px. This 'root font size' is a fixed size of 16 pixels.
The term rem means root em and it is a relative unit, based on the root font-size. So 1rem is equivalent to 16px.
The table below shows font sizes in px and equivalent size in rem.
| px | 8 | 12 | 16 | 20 | 24 | 28 | 32 |
| rem | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 1.75 | 2 |
Clamp Function and Root Font Size
The formula used on the mh370wiki.net website since 2021 uses the clamp function (see below).
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); }
The syntax is clamp(min, preferred, max). The W3C website states:-
The CSS clamp() function is used to set a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport.
The clamp() function has three parameters: a minimum value, a preferred value, and a maximum value.
If the preferred value is smaller than the minimum value or larger than the maximum value, the preferred value is used. (emphasis added)
The min and max values are optional.
In CSS, vw refers to the Viewport Width.
The Viewport is the visible area of a web page in a browser window. Some definitions suggest that the viewport excludes the browser toolbars, scrollbars etc., so the viewport width for a MediaWiki-based website is the user sees - and for a Vector-based site that includes the Sidebar. The article width is therefore significantly less than the viewport width.
By definition, 1vw is equal to 1% of the viewport width.
Specify Font Sizes
The formula for a root font size and the relative font sizes for text, headings etc., is added to MediaWiki:Common.css. These are the values used on the mh370wiki.net website:-
/* root font size */
:root { font-size: clamp( 1vw, 1.05rem, 1.2vw ); }
/* font sizes as variables */
:root { --font-size-625: 62.5%; /* 62.5% of root font size */
--font-size-875: 87.5%; /* 87.5% x root font size */
--font-size-090: 90%; /* 90% x root font size */
--font-size-095: 95%; /* 95% x root font size */
--font-size-100: 100%; /* 100% = root font size */
--font-size-105: 105%; /* 105% x root font size */
--font-size-110: 110%; /* 110% x root font size */
--font-size-115: 115%; /* 115% x root font size */
--font-size-120: 120%; /* 120% x root font size */
--font-size-125: 125%; /* 125% x root font size */
}
/* Font Sizes */
body { font-size: var(--font-size-100); }
p { font-size: var(--font-size-100); }
dl dt dd { font-size: var(--font-size-100); }
ul ol li { font-size: var(--font-size-100); }
/* Headings are sized by percentage over the base font and also resize based on viewport width */
h1 {font-size: var(--font-size-125);}
h2 {font-size: var(--font-size-120);}
h3 {font-size: var(--font-size-115);}
h4 {font-size: var(--font-size-110);}
h5 {font-size: var(--font-size-105);}
h6 {font-size: var(--font-size-100);}
h6 {font-size: var(--font-size-090);}
Padding and Margins
I recently searched MediaWiki:Common.css and MediaWiki:Vector.css to locate any pixel units that should have been replaced by relative units. The majority were used for padding and margins, and also border widths and border radius. Any values less than 5px I left unchanged, but the remainder I started to convert to rem before I realised that could be a mistake...
Units of measurement expressed as rem are relative to a root value (as formulated for font size) and is relative to the viewport, so rem is best used for global settings.
But em is more appropriate for padding and margins because it is relative to the size of a parent element, so it should be used for local settings.
But how to convert from pixels px to em?
It seems that the same formula px to rem is used to convert px to em. Hopefully the padding and margins will resize relative to whatever the parent element is and how that is displayed.
Apart from values less than 5px, the sizes I used for padding, margins, border radius etc are shown in the table below, with the equivalent size in em.
| px | 5 | 6 | 7 | 8 | 10 | 12.5 | 15 | 20 | 25 |
| em | 0.3125 | 0.375 | 0.4375 | 0.5 | 0.625 | 0.78125 | 0.9375 | 1.25 | 1.5625 |
I had also used values of 0.05em, 0.1em, 0.2em, 0.5em, 1em, 1.1em, 1.2em, 1.5em, 2em, 3em
It would not be sensible to use units to 5 decimal places, so I developed another conversion table, from em to px, and then rounded the px units to whole numbers:-
| em | 0.25 | 0.3 | 0.35 | 0.4 | 0.45 | 0.5 | 0.55 | 0.6 | 0.65 | 0.7 | 0.75 | 0.8 | 0.85 | 0.9 | 0.95 | 1.0 |
| px | 4 | 4.8 | 5.6 | 6.4 | 7.2 | 8 | 8.8 | 9.6 | 10.4 | 11.2 | 12 | 12.8 | 13.6 | 14.4 | 15.2 | 16 |
| px | 4 | 5 | 6 | 6 | 7 | 8 | 9 | 10 | 10 | 11 | 12 | 12 | 14 | 14 | 15 | 16 |
| em | 1.1 | 1.2 | 1.25 | 1.3 | 1.4 | 1.5 | 1.55 | 1.6 | 1.7 | 1.8 | 1.9 | 2.0 | 2.5 | 3 | ||
| px | 17.6 | 19.2 | 20 | 20.8 | 22.4 | 24 | 24.8 | 25.6 | 27.2 | 28.8 | 30.4 | 32 | 40 | 48 | ||
| px | 18 | 19 | 20 | 21 | 22 | 24 | 25 | 26 | 27 | 29 | 30 | 32 | 40 | 48 | ||