Description

Overview

book.css is a CSS framework designed to make HTML content resemble a book. It includes features for implementing chapters, sections, and subsections, along with an auto-numbering function.

Not convinced? Take a look at the source code of this page!

How a book is designed, what it does not do and why: book-design.html.

The custom classes

book.css has a built-in feature that automatically assigns numbers to chapters, sections, or subsections without manual intervention. Let's show how to do it!

Add the following classes into your document, and book.css does the rest:

chapter
ssection
subssection

Example of use:

<section class="chapter">
<h1> Chapter title </h1>
    <section class="ssection">
    <h2> Section title </h2>
        <section class="subssection">
        <h3> Sub-Section title </h3>
        <section>
    <section>
<section>

The <section> element is used here instead of the nonsensical <div>. Both will be displayed the same way, but screen readers interpret a section in a more appropriate manner, unlike a div!

The <section> element in HTML is semantic and indicates a thematic grouping of content, making it useful for screen readers to understand the structure and context of the content. This can assist users who rely on screen readers to navigate and understand web pages more effectively. It is then perfectly suitable to indicate the chapters and sections. Fot the h3 level, the section can effectively be replaced by article.

Notice that a proper semantic markup, including correct usage of "section", "article", "header", "footer", etc., can significantly enhance accessibility for users of assistive technologies like screen readers.

The variables

Variable	Description	Default	Customization Example
`--numbers-bg-color`	Background color of generated section number badges.	`rgb(140, 40, 40)`	`--numbers-bg-color: rgb(25, 128, 180);`
`--numbers-fg-color`	Foreground (text) color of generated section number badges.	`rgb(250, 248, 252)`	`--numbers-fg-color: rgb(255, 255, 255);`
`--toc-width`	Width reserved for the table of contents (left margin of the document).	`0`	`--toc-width: 16rem;`

Table of Contents navigation

book.css provides a fixed side navigation panel styled with the class book-toc. Its width is controlled by the --toc-width variable (default 0; set it to something like 16rem to reveal the panel). The body left margin adjusts automatically via margin-left: var(--toc-width) on html.

The minimal HTML structure for a side ToC panel is:

<nav class="book-toc" aria-label="Table of contents">
    <h1>Document title</h1>
    <ul id="toc"></ul>
</nav>

The list can be filled manually, or automatically from the document headings using the Wexa.Book JavaScript class — see autotoc.html for a live demonstration.

Coexistence with menu.css. Since version 3.0, all base nav resets in menu.css are scoped to nav.nav-wexa. Loading both menu.css and book.css on the same page (as this page does) is therefore safe: the ToC nav.book-toc element is unaffected by the menu reset rules.

La Ville Sans Nom

La ville et ses habitants

Géographie de l’incertitude

Dans une ville sans nom posée entre deux reliefs indécis, les habitants avaient cessé depuis longtemps de distinguer ce qui relevait du souvenir, de l’invention ou de l’habitude. Chaque matin, les rues semblaient réarrangées selon une logique que personne ne contestait mais que personne ne comprenait non plus. Les façades changeaient subtilement de teinte, les fenêtres apparaissaient parfois décalées d’un étage, et les portes donnaient sur des pièces dont la fonction variait selon l’heure. On acceptait cela comme un fait naturel, au même titre que la gravité ou le vent.

Langues et silences

En este entorno, la comunicación se había convertido en una mezcla constante de idiomas superpuestos. Les phrases commençaient en français, se poursuivaient en español, puis glissaient vers un latin approximatif utilisé autrefois dans des documents administratifs oubliés. Les conversations n’avaient pas pour but d’être comprises immédiatement, mais de créer une texture sonore stable dans laquelle chacun pouvait se reconnaître. Même les silences étaient codés différemment selon les quartiers, certains étant perçus comme des réponses complètes, d’autres comme des questions ouvertes.

Savoirs instables

La bibliothèque centrale

Il existait aussi une bibliothèque centrale dont les rayonnages ne cessaient de s’étendre sans intervention humaine. Les livres s’y réorganisaient seuls, modifiant parfois leur propre contenu entre deux consultations. Un même ouvrage pouvait contenir une histoire de navigation maritime le matin, puis un traité de botanique le soir, sans que personne ne puisse déterminer à quel moment la transformation avait eu lieu. Les lecteurs expérimentés ne lisaient plus les textes de manière linéaire, mais par fragments, cherchant des cohérences temporaires plutôt que des vérités stables.

Archives vivantes

En paralelo, una serie de archivos vivientes almacenaban información sin soporte matériel stable. Les documents n’étaient pas stockés mais maintenus dans un état de disponibilité latente, accessibles uniquement lorsqu’un lecteur formulait une intention suffisamment précise. Cela produisait des variations constantes dans les connaissances disponibles, car deux personnes ne pouvaient jamais accéder exactement au même contenu au même moment. Les historiens ont tenté de reconstruire des versions cohérentes du passé, mais leurs travaux divergeaient systématiquement après quelques heures de consultation.

La couche invisible

Comportements émergents

The computational layer beneath the city was never officially acknowledged, yet its effects were observable everywhere. Data streams intersected with physical events in ways that could not be fully separated. A delay in information propagation could alter the outcome of a conversation; a misaligned timestamp could shift the position of an object. Engineers stopped trying to correct these anomalies and instead documented them as “emergent behaviors." Some even suggested that reality itself had become a distributed system with inconsistent synchronization.

Signal encodé

01010100 01101000 01100101 00100000 01100010 01110101 01101001 01101100 01100100 01101001 01101110 01100111 00100000 01101001 01110011 00100000 01101110 01101111 01110100 00100000 01110011 01110100 01100001 01110100 01101001 01100011 00101100 00100000 01101110 01101111 01110010 00100000 01101001 01110011 00100000 01101001 01110100 00100000 01100110 01101001 01101110 01101001 01110011 01101000 01100101 01100100

Nuit, temps et économie

Observations nocturnes

夜になると、街の構造はさらに曖昧になる。 Les lampadaires projetaient des ombres qui ne correspondaient pas toujours aux objets présents, et certains habitants affirmaient avoir vu des versions alternatives d’eux-mêmes traverser les places sans interaction. Ces phénomènes étaient décrits dans des rapports internes jamais diffusés publiquement, car leur simple lecture semblait modifier légèrement la perception de l’environnement. Les autorités locales avaient donc adopté une politique de non-interprétation, laissant les événements exister sans explication officielle.

Architecture attentionnelle

In the peripheral districts, architecture followed a principle of gradual uncertainty. Buildings were not constructed but “stabilized," and their form depended on collective attention rather than structural design. When a building was frequently observed, it became more coherent; when neglected, it slowly dissolved into ambiguous geometry. Residents adapted by developing routines of observation, ensuring that essential infrastructure remained sufficiently “real" to function. Over time, this created a social economy of attention where perception itself became a resource.

Contrats probabilistes

The economy of the city had adapted to these instabilities without collapsing. Transactions were no longer based solely on fixed values but on probabilistic agreements that accounted for potential future shifts in meaning. Contracts included clauses that anticipated reinterpretation, and disputes were resolved by examining not the facts, but the stability of narratives over time. This approach, initially considered impractical, became the only viable method for maintaining social coordination in a system where certainty could not be guaranteed.

Persistance

Dissolution du temps

最後に、街の中心部では時間の概念そのものが緩やかに解体されつつあった。 Certains événements se produisaient avant leur cause apparente, et d’autres semblaient rester en suspens jusqu’à ce qu’un observateur décide de les interpréter. Cette flexibilité temporelle n’était pas perçue comme une anomalie mais comme une extension naturelle des capacités du système urbain. Les habitants vivaient donc dans une continuité relative, suffisante pour fonctionner, mais jamais assez stable pour être totalement décrite.

Équilibre distribué

Ultimately, the city did not require coherence in the classical sense. Its stability came from redundancy, overlapping contradictions, and the continuous recalibration of meaning through usage. What appeared as chaos from the outside functioned internally as a form of distributed equilibrium, where every inconsistency was compensated by another. No central authority controlled this process; it emerged from the accumulation of countless local adjustments.

Continuité relative

Et pourtant, malgré cette complexité, les habitants continuaient à vivre, à parler, à travailler, et à oublier. Chaque jour réécrivait légèrement le précédent, sans rupture visible. La mémoire collective agissait comme un filtre adaptatif, supprimant les incohérences trop fortes et conservant uniquement ce qui permettait la continuité minimale de l’expérience. Ainsi, la ville persistait, non pas comme une structure stable, mais comme un processus en cours.