« Pas à pas » relatif au projet Text Edit. Chaque étape est documentée en /* commentaires */ dans les fichiers CSS. Télécharger les fichiers.
/* commentaires étape 1 */
Choix typographique.
Mise en page minimale du texte.
Corrections orthotypographiques : intégration d’espaces fines insécables ( ) avant les ponctuations doubles (! ; « ») et d’espaces mot insécables entre les deux derniers mots d’un paragraphe pour éviter les mots isolés en début de ligne.
/** commentaires étape 2 */
Ajout de max-width aux paragraphes.
Intégration de media queries : @media (min-width: 40em) {} qui permettent de modifier les corps de caractères, les marges et la mise en page du document au delà d’une certaine largeur d’écran.
Utilisation de propriétés personnalisées (“variables” CSS : --padding: 1em) et de pseudo-éléments (::after, ::before) pour injecter des contenus dédiés à la mise en forme.
Ajout d’une lettrine pour le premier paragraphe.
Intégration de tirets de césure conditionnels (­).
/*** commentaires étape 3 */
Décisions formelles (images, arrières-plans, couleurs, mise en page du titre et des intertitres). Modifications mineures du HTML (dans le titre et les intertitres ou pour l’ajout des images). Utilisation de javascript pour la mise en exergue de certaines phrases du texte grâce à la fonte variable.
/**** commentaires étape 4 */
Intégration de la librairie Paged.js (js/paged.polyfill.js) et de la CSS pour la prévisualisation du document imprimé (css/interface.css). Ajout du script js/paged.reload-in-place.js pour faciliter les prévisualisations au fil du document.
👉 Paged.js requiert que le document soit lu depuis un serveur web (MAMP, XAMP, ou l’extension “Go Live” de VS Code).
Le HTML est modifié pour introduire une page de “faux-titre” (.half-title), qui intègre le contenu de la section .cover-4.
Le HTML est également modifié afin d’extraire les intertitres des sections, et pouvoir en faire des doubles-pages plus autonomes. Pour plus de souplesse dans la mise en forme de ces double-pages, les intertitres sont dupliqués et une classe spécifique est attribuée à chacun (.intertitre-left et .intertitre-right).
Le lien vers le fichier CSS css/vibration.css est maintenu, mais une autre feuille de style (css/printit.css) va venir compléter et modifier les styles initiaux.
Dans la CSS : abandon des unités relatives au viewport (vh et vw) au profit d’unités absolues établies en px ; la section d’introduction est singularisée et quitte l’association à la classe .text.
Certains éléments (les <section>, notamment) se voient attribuées des déclarations @page {} qui permettent de définir des gabarits de pages types, possédant leurs marges, leur arrière-plan ou encore le positionnement des titres courants ou des folios.
Pour améliorer la microtypographie, une fois le corps de texte précisément établi, on peut venir améliorer la justification en insérant des tirets de césure manuels ou conditionnels aux endroits problématiques.
Si ça n’est pas forcément très adapté au contenu textuel de l’article, il est possible de designer des affiches en HTML / CSS, ici à l’aide de CSS Grid et de positionnements absolus.
Un <script> est intégré en fin de document HTML pour créer une “interface” qui permette de zoomer dans la page.