Bert Bos | CSS
pour des livres (numériques)
CSS pour des livres (numériques)
●●●●●●●●●●●●●●●●●●●●●●●●
Statue de
Gutenberg à Strasbourg (photo de AlteRimoldi)
Ce que CSS peut déjà ou bientôt faire pour la
mise en page des livres (imprimés ou numériques)
Bert Bos (W3C) <bert@w3.org>
Presenté à : Kiwi Party 2013
Ville : Strasbourg, France
Date : 28 juin 2013
Demo
●●●●●●●●●●●●●●●●●●●●●●●●
Transformer un navigateur traditionnel en
un lecteur de livres numeriques
Ce demo montre une fonctionalité prevue pour CSS,
mais les propriétés et mots clés exacts sont encore en discussion.
Ce demo utilise une implementation experimentale dans Opera 12
(« Scroll is Pan »).
La fin de la barre de défilement ?
●●●●●●●●●●●●●●●●●●●●●●●●
De plus en plus de livres sont faits avec CSS
Les lecteurs de livres numériques utilisent CSS
On peut enfin imprimer une page d'HTML ?
Contexte historique: le début
●●●●●●●●●●●●●●●●●●●●●●●●
Avant ±2010…
- CSS :
- des documents interactifs (navigateurs,
aide en ligne…)
- XSL (XSLT + XSL-FO) :
- des documents et livres
imprimés
→ CSS peu développé pour des documents imprimés ou des
livres numériques
Contexte historique: aujourd'hui
●●●●●●●●●●●●●●●●●●●●●●●●
Maintenant :
- EPUB 2 et EPUB 3 basé sur CSS
- Des implementations experimentales
& des extensions propriétaires : entêtes,
notes en bas de page, références (« voir
page 7 »), points de conduite (…),
etc.
- Développement de XSL-FO 2 arreté → les editeurs de livres
se tournent vers CSS
Media interactifs et statiques
●●●●●●●●●●●●●●●●●●●●●●●●
Media (@media):
- Sur papier (non-continu, non-interactif):
- Sur écran (continu et non-continu, interactif):
screen (navigateurs, lecteurs e-books)
handheld
projection paginé par défaut
tv
Les colonnes : columns
●●●●●●●●●●●●●●●●●●●●●●●●
Deux façons:
- Nombre de colonnes :
columns : 2
- Largeur désirée/minimale :
columns : 20em
(Aussi sur écran, mais moins utile)
Sauts de page : page-break-*
●●●●●●●●●●●●●●●●●●●●●●●●
page-break-before, page-break-after,
page-break-inside
H2 { break-after: avoid }
Éviter des veuves & orphelines : widows/orphans
●●●●●●●●●●●●●●●●●●●●●●●●
P {
widows: 2;
orphans: 2 }
« 2 » est la valeur par défaut
Les marges de la page : @page
●●●●●●●●●●●●●●●●●●●●●●●●
@page { margin: 2cm 1.5cm 2.5cm 1.5cm }
@page {
margin-top: 2cm;
margin-right: 1.5cm;
margin-bottom: 2.5cm;
margin-left: 1.5cm }
(Aussi en media = projection)
Pages recto-verso
●●●●●●●●●●●●●●●●●●●●●●●●
@page :left { margin: 2cm 2.5cm 2.5cm 1.5cm }
@page :right { margin: 2cm 1.5cm 2.5cm 2.5cm }
@page :first { ... }
Les titres courants : @page-top etc.
●●●●●●●●●●●●●●●●●●●●●●●●
@page:right {
@top {
content: string(chapter);
font-style: italic }
@bottom-right {
content: counter(page, lower-roman) } }
h2 {
string-set: chapter contents;
page-break-before: right }
Césures : hyphens
●●●●●●●●●●●●●●●●●●●●●●●●
hyphens : none : - supprime toute césure
hyphens : manual : - seulement U+00AD
(
­), U+2010, U+002D (-)
hyphens : auto : - applique les règles pour
chaque langue
Copier les titres courants
●●●●●●●●●●●●●●●●●●●●●●●●
(En anglais : « running headers »
@page {
@page-top-right {
content: string(chap, first);
font-style: italic;
}
}
h1 { string-set: chap content }
Notes de bas de page
●●●●●●●●●●●●●●●●●●●●●●●●
![demo [PDF]](demo-footnote.jpg)
… and <ruby><rb>the March Hare and the
Hatter</rb ><rt><rp> (</rp>From the two expressions “as mad as a
march hare” and “as mad as a hatter.”<rp>)</rp></rt ></ruby> were having
tea…
ou:
… and <a
href="#n1">the March Hare and the Hatter</a > were having tea…
<p id=n1>From
the two expressions “as mad as a march hare” and “as mad as a
hatter.”
Des experimentations existent
… mais pas assez pour remplacer XSL-FO
Et aussi…
●●●●●●●●●●●●●●●●●●●●●●●●
- Notes dans les marges
- Plusieurs categories de notes
- « Float » vers le haut/bas de la page
- Construire des pages a partir d'une grille (gabarit)
- Références (« voir page 17 »)
- Aligner contre le bas d'une page/colonne
- Texte sur deux pages opposées
- Tables (de matière, d'illustrations…)
- Index alphabétique
- Points de conduite (…)
- Alignement des lettrines
- Numérotation des lignes
- « copyfitting »
- « change bars »
- Des textes et images non-rectangulaires
- Formules mathématiques
- …
Melanger les modalités
●●●●●●●●●●●●●●●●●●●●●●●●
CSS dit que overflow : scroll donne « a
scrolling mechanism »
… un ascenseur en est un,
… « marquee » aussi
… mais la pagination aussi !
Melanger les modalités : overflow
●●●●●●●●●●●●●●●●●●●●●●●●
Le document:
<div class=chapter>
<h2>Chapter 1…</h2>
<p>…
…
</div>
<div class=chapter>
<h2>Chapter 2…</h2>
…
</div>
…
Avec ou sans barre visible
●●●●●●●●●●●●●●●●●●●●●●●●
overflow (ou overflow-style ?)
|
| horizontal
| vertical
|
| invisible
| paged-x
| paged-y
|
| visible
| paged-x-controls
| paged-y-controls
|
Gauche/droite ou droite/gauche dépend de
direction
Gutenberg a habité longtemps ici, à Strasbourg. Regardons donc un peu si CSS permet déjà aux editeurs du Web d'être ses dignes successeurs…
HTML a été fait pour être independent des terminaux et de la mode de lecture : sur papier, sur écran, en synthèse vocale, en braille, sur un téléviseur… Et CSS aussi était prévu pour créer des styles pour chacun de ces « médias. » CSS a effectivement des propriétés pour la synthèse vocale, et quelques-uns pour des pages imprimés. Mais pour imprimés avec la même mise en page et la même qualité que Gutenberg au XVe siècle, il manque encore des fonctionalités.
Et pourtant les grands éditeurs utilisent de plus en plus CSS pour imprimés des livres. Et l'IDPF, l'organisation derrière la norme EPUB, aussi a choisi CSS pour la mise en pages des livres, des livres numériques (ou « e-books ») dans ce cas.
En fait, ils le font avec des fonctionalités encore en developpement, qui sont implementées expérimentalement.