Interuniversitaire Samenwerking Tandheelkunde - (this title in H1)

interthk logo

You are here: www.interthk.be > Testpage

Testpage for trying-out HTML- and CSS-functionality

This testpage does not have any real contents! It only serves to try-out all sorts of HTML- and CSS-functions; and to evaluate new ideas. The style of this testpage may differ from the rest of the website.

You can reach the real interthk-website from here via the navigation bars on top and bottom.

Note: while testing the layout, tables, reflow, big images, etc...: try rescaling the browser-window to see the effect on these items. And use the shortcuts [Ctrl +] en [Ctrl -] to make text and other content bigger and smaller. Watch how it reflows and rescales. Also study the design-rules and priorities, listed at the bottom of the stylesheet interthk.css.


Various tests - (this title in H2)

Character-sets - (this title in H3)

Study the source-code to see how these characters are embedded in the text. Some are just typed-in, some are HTML-entities encoded according to the syntax: "ampersand - HTML-entity codename - semicolon"; and others are hexadecimally or decimally encoded unicode characters with syntax: "ampersand - cross - x - hexadecimal code - semicolon", or: "ampersand - cross - decimal code - semicolon".


Emoji-style (=colored icons) and text-style icons (=in text color) for unicode symbols:

Here a few characters shown in standard style, emoji-style and text-style. Note: text-style icons must be shown in the same color as the surrounding text, but this does not seem to work for all; and it can differ from system to system:

phone: ☎ ☎️ ☎︎ - cell phone: 📱 📱️ 📱︎ - fax: 📠 📠️ 📠︎ - printer: 🖨 🖨️ 🖨︎ - open book: 📖 📖️ 📖︎ - closed book: 📕 📕️ 📕︎ - calendar: 📅 📅️ 📅︎ - lock: 🔒 🔒️ 🔒︎ - open lock: 🔓 🔓️ 🔓︎ - hour-glass: ⌛ ⌛️ ⌛︎ - hour-glass flowing: ⏳ ⏳️ ⏳︎ - timer clock: ⏲ ⏲️ ⏲︎ - watch: ⌚ ⌚️ ⌚︎ - stopwatch: ⏱ ⏱️ ⏱︎ - lightning: ⚡ ⚡️ ⚡︎ - link: 🔗 🔗️ 🔗︎ - checkmark: ✔ ✔️ ✔︎ - cancelmark: ✖ ✖️ ✖︎ - fork and knife: 🍴 🍴️ 🍴︎ - enveloppe: ✉ ✉️ ✉︎ - email: 📧 📧️ 📧︎ - scissors: ✂ ✂️ ✂︎ - fax: ℻ ℻️ ℻︎ - poison: ☠ ☠️ ☠︎ - spades: ♠ ♠️ ♠︎ - clubs: ♣ ♣️ ♣︎ - hearts: ♥ ♥️ ♥︎ - diams: ♦ ♦️ ♦︎

Syntax for choosing between Emoji-style and Text-style display of a character can be done with a "variation selector" after the character (see the source code):


Reflow test

0MMMMMMMMM­1MMMMMMMMM­2MMMMMMMMM­3MMMMMMMMM­4MMMMMMMMM­5MMMMMMMMM­6MMMMMMMMM­7MMMMMMMMM

0123456789­0123456789­0123456789­0123456789­0123456789­0123456789­0123456789­0123456789


Test of text make-up

The next words of this bodytext are in "bold" or heavy, this is in "italics" or slanted, this part comes in "emphasis"; and this in "strong" or strong emphasis. And finally a few words in "code", usually displayed as fixed-width font. Code is used to display computer codes, or text that has to be copied literally. Links get their own style to be well visible, and to make a distinction between followed and unfollowed links. Further, characters in the text can be in superscript or in subscript , e.g. for math or chemical formulas as x2 + y2 or H2O + CO2. Names are sometimes written in smallcaps, as in Firstname Familyname. Old content might get a strikethrough, such as old prices.

These are the most important make-up styles for body text in normal paragraphs. Styles are defined in the CSS-stylesheet, and are for the whole website, unless they are locally overruled by inline-styles.


Scrolling text (marquee)

This is a test of a marquee- or scrolling text-function, thus a banner: This is a scrolling text made with the HTML "marquee" tag. Can be usefull for titles or subtitles in a videoclip, via the "HTML-overlay" filter.

Marquee with background color (name-encoded), box-shadow, white text and grey text-shadow: - - - © Geert Keteleer ☠ - - -

Marquee with background color (hex-encoded), box-shadow, black text and white text-glow: · · · © Geert Keteleer · · ·

However, the marquee tag was never standard, and is no longer supported in some browsers, although they did so in the past.

 


Comparison of font-sizes

Note: some browsers might set minima and maxima to limit font-sizes. All plain body text on this interthk-website uses "1.0em" as standard size, just like this paragraph. The relation between relative units "em" and "%", and physical units "pt" and "mm", can differ from system to system; and it can differ from the pixel-units "px". On my system, the following units have about the same size: 1.0em = 100% = 16px = 12pt = 4.5mm. But in other browsers and systems, this can be different. Further: the "4.5mm" as defined on this page is not necessarily 4.5mm on the screen, because that depends on screen-size: if this page is projected with a beamer, this "4.5mm" can easily be 30mm or more. But on a smartphone it might be only 1.2mm...

Font-size equivalents (in most standard browsers, not everywhere):

Font-size = 1.0em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 100%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 16px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 12pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 4.5mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M

Font-size in em-units (em) (relative sizes):

Font-size = 0.5em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 0.6em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 0.7em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 0.8em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 0.9em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 1.0em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 1.1em: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 1.2em: Lorem ipsum dolor sit amet, consectetur. X M
Font-size = 1.3em: Lorem ipsum dolor sit amet, consectetur. X M
Font-size = 1.4em: Lorem ipsum dolor sit amet. X M
Font-size = 1.5em: Lorem ipsum dolor sit amet. X M
Font-size = 1.6em: Lorem ipsum dolor sit amet. X M
Font-size = 2.0em: Lorem ipsum dolor. X M

Font-size in percent (%) (relative sizes):

Font-size = 50%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 60%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 70%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 80%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 90%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 100%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 110%: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 120%: Lorem ipsum dolor sit amet, consectetur. X M
Font-size = 130%: Lorem ipsum dolor sit amet, consectetur. X M
Font-size = 140%: Lorem ipsum dolor sit amet. X M
Font-size = 150%: Lorem ipsum dolor sit amet. X M
Font-size = 160%: Lorem ipsum dolor sit amet. X M
Font-size = 200%: Lorem ipsum dolor. X M

Font-size in pixels (px) (absolute sizes in screen resolution):

Font-size = 8px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 9px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 10px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 11px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 12px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 13px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 14px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 16px: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 18px: Lorem ipsum dolor sit amet. X M
Font-size = 20px: Lorem ipsum dolor sit amet. X M
Font-size = 24px: Lorem ipsum dolor sit amet. X M
Font-size = 32px: Lorem ipsum dolor. X M

Font-size in points (pt) (1mm = 2.8pt | 1pt = 0.35mm) (absolute sizes):

Font-size = 6pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 7pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 8pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 9pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 10pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 11pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 12pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 13pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 14pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 16pt: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 18pt: Lorem ipsum dolor sit amet. X M
Font-size = 20pt: Lorem ipsum dolor sit amet. X M
Font-size = 24pt: Lorem ipsum dolor. X M

Font-size in millimeter (mm) (absolute sizes):

Font-size = 2mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 2.5mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 3mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 3.5mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 4mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 4.5mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 5mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 5.5mm: Lorem ipsum dolor sit amet, consectetur adipiscing elit. X M
Font-size = 6mm: Lorem ipsum dolor sit amet. X M
Font-size = 7mm: Lorem ipsum dolor sit amet. X M
Font-size = 8mm: Lorem ipsum dolor sit amet. X M
Font-size = 9mm: Lorem ipsum dolor. X M
Font-size = 10mm: Lorem ipsum dolor. X M


Test of kerning and ligatures

Kerning is when the system displays character-combinations like "AV" a bit closer together, to create a nice uniform text density, without too dark or too light areas. Otherwise slanted legs could create too big visual gaps. Ligatures is when character combinations like "fl", which often touch each other in an ugly way, are combined into one nice character. Both are complicated subjects, and not all fonts do have these features, and not all operating systems and browsers can display them correctly. You don't notice these features when they are done well, but it visually hurts when they are absent or implemented poorly.

AVAWATefejfifjfl tf ti f i fi fj fl ff ffl ffi - oTo AWWoTAAOVOTG
AVAWATefejfifjfl tf ti f i fi fj fl ff ffl ffi - oTo AWWoTAAOVOTG
AVAWATefejfifjfl tf ti f i fi fj fl ff ffl ffi oTo
AVAWATefejfifjfl tf ti f i fi fj fl ff ffl ffi oTo


Comparison of different font faces

Note: these fonts are only displayed correctly if they are available on your system! The beautiful "Source Pro" font series is freeware from Adobe, but not standardly installed on most systems. So this will be downloaded via the font-definitions in the stylesheet, but if that function is disabled, this font may not be displayed. Helvetica is not standard on Windows and thus probably absent, but it is usually installed on Mac and Linux. Fonts Calibri and Cambria are probably not present on Mac and Linux, unless MS Office is installed. If not found on the system, and not defined for downloading in the stylesheet, fonts are automatically replaced by a similar font, or by the system defaults of the browser. This can differ a bit from browser to browser and system to system.

hoe gebruikte fonts in een webpagina vinden?
Generic fonts (genre: "serif") and non-installed fonts are replaced automatically by an existing font on a system. But by which one? Use this method to find out which font is actually used.

Sans-serif fonts:

Font: Arial - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: Calibri - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: Source Sans Pro - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: Helvetica - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: sans-serif (=generic browser default) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Serif fonts:

Font: Times New Roman - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: Cambria - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: Source Serif Pro - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: Georgia - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font: serif (=generic browser default) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Font-pairs: sans-serif (for body-text) and serif (for titles)

Source Sans Pro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.

Source Serif Pro: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.

Calibri: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.

Cambria: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.

Arial: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.

Georgia: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.

sans-serif (=sans-default van uw browser): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.

serif (=serif-default van uw browser): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur.


Test of page-layout and alignment - (this title in H3)

Lorem Ipsum for testing text layout - (this title in H4):

This testtext "Lorem Ipsum" is in use since hundreds of years, to evaluate the layout of printing: letterspacing, paragraph spacing, alignment, font-size, etc... The advantage of using old Latin is that the designer is not distracted by the contents of the text; and that it does not cause "white rivers" flowing through the text, contrary to simple sentences like "This is a testtext". Lorem Ipsum gives a similar layout to most Western languages.

Note that most designers prefer left-aligned text over justified or filled-out text, because on narrow columns, justified text can easily create ugly "white rivers" flowing through the page. For books this is less of a problem, as professional book setting software has way more tools to prevent this from happening.

Left aligned text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur nisl non eros pharetra, non facilisis augue faucibus. Aliquam feugiat arcu ut elit sagittis, a ullamcorper velit efficitur. Suspendisse vulputate libero ut ipsum ultrices fermentum. Etiam porttitor nunc ac imperdiet pellentesque. Nulla erat urna, ornare ut odio non, dapibus cursus urna. Ut luctus quam id sagittis euismod. Math and chemical formulas: x2 + y2; H2O + CO2. Maecenas enim nisl, gravida et enim vel, sagittis hendrerit sem. Nunc aliquam, ante vitae suscipit rhoncus, odio purus molestie ipsum, vel placerat purus orci sed turpis. Sed eleifend, nibh sed bibendum pretium, sapien erat accumsan purus, quis porta enim tortor eget sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Etiam auctor felis quis est efficitur, a gravida arcu feugiat. Suspendisse potenti. Fusce fermentum tincidunt pharetra. Pellentesque eros elit, aliquet at lorem vel, euismod pretium turpis. Praesent egestas viverra ligula, et volutpat enim dictum ac. Morbi nec elit et nunc tempus facilisis ac eget purus. Vivamus convallis magna quis lorem tincidunt, id lobortis nisi eleifend. Proin tristique felis in urna accumsan efficitur ac maximus tortor. Aliquam ligula urna, ornare quis odio id, egestas aliquet eros. Cras a elementum massa. Pellentesque sit amet pellentesque libero.

Justified text:

Aliquam mauris mauris, dignissim quis fermentum eget, sollicitudin ac metus. In maximus pretium tellus, ac aliquam ligula hendrerit ut. Phasellus vel est consequat, dictum augue quis, imperdiet purus. Quisque pharetra fermentum nibh, sit amet gravida elit placerat quis. Integer tempor purus diam, in accumsan ante elementum nec. Integer accumsan ligula lobortis congue ultrices. Vivamus eget scelerisque lacus, in venenatis dolor. Nunc maximus lectus tellus, vitae venenatis lacus aliquam non.

Nam vel molestie leo, lobortis mattis tortor. Fusce feugiat sed tortor a sagittis. Duis scelerisque ut libero a blandit. Morbi tincidunt bibendum dui et ullamcorper. Vivamus nec orci tempus, posuere nisi vel, egestas arcu. Sed turpis quam, ullamcorper id sollicitudin a, sagittis ac velit. Sed tincidunt lacus massa, sed interdum arcu rhoncus commodo.

Duis feugiat ex metus, tincidunt efficitur justo pretium a. Aenean porttitor ex vel viverra accumsan. Maecenas non dui leo. Ut interdum non enim non condimentum. Fusce condimentum pharetra turpis, tempus scelerisque urna congue nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin id velit ornare, tincidunt nisi et, vulputate velit. Morbi id odio a mauris porta rutrum. Suspendisse lorem augue, pulvinar quis tortor vitae, volutpat egestas felis. Nunc ut lectus erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam consectetur lorem ac ligula finibus facilisis. Vivamus congue scelerisque congue. Integer quis vehicula nibh, eget rhoncus elit. Duis sed velit dictum, scelerisque purus nec, mattis diam. Etiam lorem felis, iaculis sodales facilisis in, sollicitudin et massa.

Suspendisse tempus eget eros vitae sodales. Nulla sodales congue orci, eget maximus diam commodo sed. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vehicula nisl in mi tempor facilisis.


Test of icons and images with a caption


Flags and icons

verkeersbord begin lage emissie zone  verkeersbord einde lage emissie zone
Begin and end of Low Emission Zones

logo universiteit antwerpen    logo lab dental materials
Logos: Universiteit Antwerpen - Lab Dental Materials

big picture
Test of a big image - it should be rescaled to "100% page-width" automatically


Test of fieldset-borders

To group a number of items, you can draw a border around them. This is especially usefull for forms, but can also be used in other situations, for example to put more emphasis on items. It makes it pop-out of the rest.

Paragraph-tags in the fieldset

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget sem nec risus malesuada fringilla eleifend quis turpis. Aliquam ligula nibh, volutpat id est feugiat, tempor venenatis magna. Nullam efficitur, metus quis mattis vulputate, odio velit luctus leo, at ultrices elit lectus at justo. Mauris ipsum sem, lacinia eu rhoncus sit amet, mattis vitae mauris.

Aenean sit amet ante sed nisi convallis auctor et id est. Pellentesque luctus auctor ipsum, eget convallis ligula finibus nec. Maecenas vehicula augue tempor mauris feugiat semper. Suspendisse vehicula felis augue, id placerat elit blandit nec. Curabitur ullamcorper vel turpis quis convallis.

Paragraph-tags outside of the fieldset Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget sem nec risus malesuada fringilla eleifend quis turpis. Aliquam ligula nibh, volutpat id est feugiat, tempor venenatis magna. Nullam efficitur, metus quis mattis vulputate, odio velit luctus leo, at ultrices elit lectus at justo. Mauris ipsum sem, lacinia eu rhoncus sit amet, mattis vitae mauris.

Etiam dolor mi, semper eget tristique id, mollis vitae lectus. Maecenas convallis leo quis rhoncus tristique. Ut efficitur vel mi eget feugiat. Sed semper lectus id neque porttitor pulvinar. Praesent eleifend enim eget nisi pharetra, vel sollicitudin orci lobortis.


Test of tables

Mauris eget sem nec risus malesuada fringilla eleifend quis turpis. Aliquam ligula nibh, volutpat id est feugiat, tempor venenatis magna. Nullam efficitur, metus quis mattis vulputate, odio velit luctus leo.

Location Date Number Subject
Antwerpen 01/03/2018 12345 Radiology
Brussel 22/02/2018 12345 Radiology
Diepenbeek 08/03/2018 12345 eHealth
Gent 22/03/2018 12345 eHealth
Kortrijk 15/03/2018 12345 eHealth
Leuven 29/03/2018 12345 Radiology

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget sem nec risus malesuada fringilla eleifend quis turpis. Aliquam ligula nibh, volutpat id est feugiat, tempor venenatis magna. Nullam efficitur, metus quis mattis vulputate, odio velit luctus leo, at ultrices elit lectus at justo.


HTML- en CSS-Validators:

HMTL- en CSS-validators of the W3C, which can be very helpful to trace errors on a page. Unfortunately, they are not fully up-to-date and don't support variables, complex CSS-calculations, and some other new or experimental stuff.

W3C-validators:

Valid HTML 4.01 Transitional Valid CSS!


H1-title: Quisque aliquam ligula sed risus facilisis.

H2-title: Sit amet accumsan turpis pharetra.

H3-title: Mauris ultricies luctus vehicula.

H4-title: Curabitur vel nisl eu enim pretium fringilla.


End of tests!


Design: ©2015 Geert Keteleer   -   Last change: 7 oktober 2020
This website-design succesfully passed the "Unofficial Tripple PET-bottle Legibility Test", as defined by KG.

You are here: www.interthk.be > Testpage