{* SPDX-FileCopyrightText: © 2021 Olivier Meunier SPDX-License-Identifier: AGPL-3.0-only *} {{ extends "./base" }} {{- block title() -}}Typography{{- end -}} {{ block mainContent() }}

Testing typography

Typography

This page lists you major HTML elements and gives you some hints on how to use them.

Block level elements

Paragraph

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"

So she was considering in her own mind, (as well as she could, for the hot day made her feel very sleepy and stupid,) whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a white rabbit with pink eyes ran close by her.

Download Alice's Adventures in Wonderland

Use <br> for line breaks.

All in the golden afternoon
Full leisurely we glide;
For both our oars, with little skill,
By little arms are plied,
While little hands make vain pretence
Our wanderings to guide.

Heading

Heading are made of <h1> to <h6> tags. You can also use classes with the same name (.h1, .h2, etc.).

Heading 4

Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.

Heading 5
  1. Everyone has the right to freedom of peaceful assembly and association.
  2. No one may be compelled to belong to an association.
Heading 6

All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.

Unordered and ordered lists

To present items in lists, use <ul> and <ol> tags.

  1. There are established as the principal organs of the United Nations:
    • a General Assembly
    • a Security Council
    • an Economic and Social Council
    • a Trusteeship Council
    • an International Court of Justice
    • a Secretariat.
    • and many other services
      • Police
      • Customs
      • Interpreters
      • ...
  2. Such subsidiary organs as may be found necessary may be established in accordance with the present Charter.

Definition lists

purpose (plural purposes)
A result that is desired; an intention
recursion
the act of recurring
pleasure
  • A state of being pleased.
  • A person, thing or action that causes enjoyment.
  • One's preference
  • The will or desire of someone or some agency in power

Quoting

To make long quotes, use <blockquote> tag.

There was only one student in the room, who was bending over a distant table absorbed in his work. At the sound of our steps he glanced round and sprang to his feet with a cry of pleasure: "I've found it! I've found it," he shouted to my companion, running towards us with a test-tube in his hand. "I have found a re-agent which is precipitated by hæmoglobin, and by nothing else." Had he discovered a gold mine, greater delight could not have shone upon his features.

A Study in Scarlet by Arthur Conan Doyle

Code blocks

To show some code, use <pre> tag.

static void nf_conntrack_double_unlock(unsigned int h1, unsigned int h2)
{
    h1 %= CONNTRACK_LOCKS;
    h2 %= CONNTRACK_LOCKS;
    spin_unlock(&nf_conntrack_locks[h1]);
    if (h1 != h2)
        spin_unlock(&nf_conntrack_locks[h2]);
}

Figure

R code example
sumofsquares <- function(x){
  return(sum(x^2))
}

Text level elements

<strong> and <em>
How will the struggle for existence, discussed too briefly in the last chapter, act in regard to variation?
<i>
Since the ancients (as we are told by Pappus) made great account of the science of mechanics in the investigation of natural things…
<b>
Let AFL be a sphere turning uniformly about the axis S, and let the concentric circles BGM, CHN, DIO, EKP, &c. divide the fluid into innumerable concentric orbs of the same thickness.
<abbr>
Non UN states are identified as such. Works related to states, counties etc are collected on linked pages.
<dfn>
Barking is an area of east London, England, and forms part of the London Borough of Barking and Dagenham.
<del> and <ins>
Shall we have a channel tunnel? To this question I would reply "No," "Yes," decidedly and emphatically "No," "Yes,"
<u>
"Cast Away Illusions, Prepare for Struggle" 毛泽东 said.
<mark>
I drew my chair a little nearer. "Now, how did you know that I was going to propose?" I asked in genuine wonder.
<code> and <kbd>
On UNIX you can clear your terminal by typing clear or with Ctrl+l shortcut.
<small>
She looked at me with a wondering distrust which was much more to my mind than her whole-hearted confidence.
<sub> and <sup>
Water is the chemical substance with chemical formula H2O. He is best known for his mass–energy equivalence formula E = mc2 (which has been dubbed "the world's most famous equation")
<q>
Many inline quotations. Default one or German one or even embeded quotes with another language.

Tables

Basic table

Clara Barton 1821 U.S.
Marie Curie 1867 Kingdom of Poland
Grace Hopper 1906 U.S.
Grace Hopper 1906 U.S.

Fancy table

A table with <caption>, <thead>, <tbody> and <tfoot>.

Great scientists
Name Date of birth Country of birth
Footer Footer Footer
Isaac Newton 1643 England
Albert Einstein 1879 German Empire
Stephen Hawking 1942 England

Wide tables

Dignissimos debitis accusantium a sapiente incidunt. Praesentium optio architecto aliquid expedita reiciendis quae dicta fugit minus dignissimos. Voluptatum accusamus fugiat ratione dignissimos! Omnis ipsa obcaecati dolorum voluptatem magnam accusamus tempora doloremque, tenetur quibusdam! Minus labore eaque laudantium, ex quis quia recusandae officia architecto deserunt. Architecto dolores sed provident sequi officia praesentium, magni cum, ut aut repudiandae incidunt cumque aspernatur dolorem facilis consequatur blanditiis alias at est. Suscipit voluptatem eveniet velit quidem soluta excepturi tempora dolorem non in obcaecati praesentium expedita delectus ut, itaque officia quae alias impedit. Atque. Perspiciatis architecto, nobis quidem dignissimos temporibus nulla sequi, libero natus illo praesentium unde tempora provident, facere dolor ratione quam sunt! Voluptas, repellat! Labore ducimus non, quibusdam odio error fuga? Dolores recusandae natus eveniet expedita? In officiis id asperiores quaerat iure numquam deleniti et facere! Quas tempore eos accusantium provident, ex delectus numquam, doloribus repellendus reiciendis dolorem eligendi illum, doloremque dolorum ipsum inventore cupiditate laborum omnis voluptates. Dicta, esse quisquam! Iure, illo? Corporis nobis laudantium facilis inventore in, iste et quod est iure aperiam porro molestias nulla tempora odit?
A wide table
head a head b head c head d head e head f head g head h
foot a foot b foot c foot d foot e foot f foot g foot h
Dignissimos debitis accusantium a sapiente incidunt. Praesentium optio architecto aliquid expedita reiciendis quae dicta fugit minus dignissimos. Voluptatum accusamus fugiat ratione dignissimos! Omnis ipsa obcaecati dolorum voluptatem magnam accusamus tempora doloremque, tenetur quibusdam! Minus labore eaque laudantium, ex quis quia recusandae officia architecto deserunt. Architecto dolores sed provident sequi officia praesentium, magni cum, ut aut repudiandae incidunt cumque aspernatur dolorem facilis consequatur blanditiis alias at est. Suscipit voluptatem eveniet velit quidem soluta excepturi tempora dolorem non in obcaecati praesentium expedita delectus ut, itaque officia quae alias impedit. Atque. Perspiciatis architecto, nobis quidem dignissimos temporibus nulla sequi, libero natus illo praesentium unde tempora provident, facere dolor ratione quam sunt! Voluptas, repellat! Labore ducimus non, quibusdam odio error fuga? Dolores recusandae natus eveniet expedita? In officiis id asperiores quaerat iure numquam deleniti et facere! Quas tempore eos accusantium provident, ex delectus numquam, doloribus repellendus reiciendis dolorem eligendi illum, doloremque dolorum ipsum inventore cupiditate laborum omnis voluptates. Dicta, esse quisquam! Iure, illo? Corporis nobis laudantium facilis inventore in, iste et quod est iure aperiam porro molestias nulla tempora odit?
{{ end }}