00:00:00
00:23:12
Mise en place de l’espace de travail
![](images/part-1/chap1_screenshots/part1_00-01-38.png)
![](images/part-1/chap1_screenshots/part1_00-05-32.png)
![](images/part-1/chap1_screenshots/part1_00-07-34.png)
![](images/part-1/chap1_screenshots/part1_00-10-22.png)
![](images/part-1/chap1_screenshots/part1_00-10-47.png)
![](images/part-1/chap1_screenshots/part1_00-11-22.png)
![](images/part-1/chap1_screenshots/part1_00-12-35.png)
![](images/part-1/chap1_screenshots/part1_00-14-31.png)
![](images/part-1/chap1_screenshots/part1_00-17-28.png)
![](images/part-1/chap1_screenshots/part1_00-17-42.png)
![](images/part-1/chap1_screenshots/part1_00-18-49.png)
![](images/part-1/chap1_screenshots/part1_00-19-58.png)
>@page :left
et >@page :right
)![](images/part-1/chap1_screenshots/part1_00-20-40.png)
![](images/part-1/chap1_screenshots/part1_00-21-36.png)
![](images/part-1/chap1_screenshots/part1_00-22-56.png)
background
pour la baselineChanger la taille des images [ 760px ]
Début du projet : création de la page HTML et du CSS, des dossiers Fonts et Images.
Je me base beaucoup sur la mise en page que j'ai réalisé sur le site web-to-print pour commencer. Je reprends les styles que j'avais choisis pour cette version pour constituer une base de travail pour ce livre. Je m'éloignerai de ce style plus tard si j'estime que c'est nécessaire.
J'ai mis en place un format de 150 x 200mm, j'ai trouvé comment afficher les traits de coupe et générer du fond perdu.
Je voulais aussi déjà afficher la grille de ligne de base. Il m'a fallu un peu de temps pour comprendre qu'il fallait aussi modifier le style de l'interface pour que cette grille apparaisse à l'écran.
Après avoir commencé à numéroter les images manuellement, je me suis souvenue que j'avais vu un exemple dans la documentation de Paged.js pour implémenter un compteur automatique et j'ai fait le changement.
00:00:00
00:23:12
>@page :left
et >@page :right
)background
pour la baseline00:23:14
00:33:14
00:33:20
00:52:56
font-weight: normal
pour h300:52:56
01:33:10
text-align: left
dans l'inspecteur01:32:14
02:02:00
figcaptions
)figcaption
, aperçu navigateurfigcaption
page: image
à figcaption pour placer la légende dans le gabarit de la page imagewidth
) de la figcaption dans l'inspecteurfigure
avec figcaption
numérotée dans l'HTML02:01:55
02:15:37
.pagedjs_page
avec modifications (il ne se passe rien dans l'aperçu)02:15:37
02:29:07
line-height: 14pt
aux paragraphesfigure
+ page: image
(supression des sauts avant les images)calc
pour le line-height des paragraphes02:28:51
02:49:36
02:49:32
02:57:51
@page titre
+ page: titre
à h3 et pAujourd'hui j'ai commencé à affiner la mise en page des premiers éléments coulés la fois précédente. Je suis revenue particulièrement sur les images des premiers articles. Je trouvais les pages trop vides et le rythme trop systématique en ayant à chaque fois une explication à gauche/une image à droite. J'ai donc replacé les images dans le flux de la page (plutôt que sur des pages nommées). Puis j'ai décidé d'ajouter pour certains enchaînements d'images des sections spéciales, des mises en exergue. En pivotant ces images de -90° j'ai dû chercher comment bien les aligner en inspectant longuement la découpe du flux par Paged.js dans le navigateur.
J'ai pour le moment supprimé le fond blanc des pages dans l'interface pour pouvoir visualiser les pages à fond de couleur comme elles doivent apparaître à l'impression.
J'ai voulu faire un test, afficher une bordure de couleur dans certaines pages nommées. J'ai dû inspecter la structure de la page générée par Paged.js pour trouver comment obtenir ce résultat. J'ai appliqué un fond de couleur aux marges de la page et un fond blanc au corps de la page.
00:00:00
00:02:46
.page_blanche
+ saut de page après et named page blanc
@page blanc
avec contenus des margin-boxes vide00:02:46
00:33:40
00:33:43
00:38:13
00:38:14
1:11:16
page: image
sur toutes les figuresbreak-inside: avoid
pour les figuresbox-shadow
aux imageswidth
des paragraphes et figures1:11:16
01:22:42
01:22:46
01:33:43
.code
@page encart
avec fond vert.encart
, CSS: page: encart
1:33:43
1:44:35
always
→ right
:empty
@page :empty
(qui ne marche pas avec paged.js)pagedjs_blank_page
), ses classes dans le DOM et ses variables dans le stylepagedjs_blank_page
(+ color: white
)1:48:53
2:12:19
figcaption
(avant sur les figue
).encart:first-of-type
.encart:first-of-type
→ h4 + .encart
02:12:19
02:30:00
Enregistrement video du chapitre, accéléré x6
border
à la déclaration @page encart
pagedjs_encart_page
avec border
bordure
.pagedjs_encart_page > ... > pagedjs_area
avec backgriund-color
blanc + background-color
vert pour @page encart
02:30:00
04:18:17
Enregistrement video du chapitre, accéléré x8
.encart > img
)h4
+ figcaption
figure
page-break-after: avoid
pout titre h4height
pour les figures (80mm)figcaption
dans l'outil d'inspection pour les placer dans la pagefigure
width
images.h4 + .encart
avec marges négativesh4 + .encart
@page encart
: color: white
→ width
et margin
des éléments encarts (code source et outils d'inspection)legende_page_droite
sur l'une des figcaptionlegende_page_droite
legende_page_droite
pour placer correctement l'élément dans la page (plusieurs essais dans le code source et dans l'inspecteur).encart
margin
et padding
des éléments pour les placer dans la page (plusieurs fois, dans le code source et dans l'inspecteur)width
, margin
et padding
... > div [data-split-from]
)... > div [data-split-from]
width
, margin
et padding
encart_premier
sur première figure après le titre h4h4 + .encart
→ encart_premier
page: encart
à la déclaration encart_premier
.encart > figcaption
avec ajout de .encart_premier > figcaption
+ pareil .encart > img
encart_droite
à plusieurs figures.encart_droite
.encart_droite
à 4 autres déclarationsJe me suis attardée sur la mise en page des sections de mise en exergue (captures d'écran pivotées de -90° sur fond vert). Je voulais que sur les pages de gauche, l'image apparaîsse avant sa légende, et sur les pages de droite l'inverse pour avoir un effet de symétrie sur les double pages. J'ai eu un peu de mal à trouver comment positionner ces images pivotées étant donné que l'élément que je voyais dans l'inspecteur ne correspondait pas exactement à l'image telle qu'elle était réellement placée. J'ai tenté d'utiliser un display flex sur les éléments figure pour voir si cela me facilitait la tâche mais ça ne fonctionnait pas comme je voulais. J'ai fini par trouver une solution en jouant sur les margin des images et des légendes.
J'ai travaillé les pages de titre de chaque projet, que j'ai pour le moment mises en bichromie bleu et blanc avec une bordure bleue à la page. Étant donné que je présente différents logiciels et outils dans ce livre, il me semblait intéressant d'afficher sur la page de titre de chaque projet le ou les outils qui y sont utilisés, ainsi qu'une introduction et une illustration de celui-ci. C'est en fait la structure que j'ai appliquée au site web d'origine d'où sont issus mes contenus. Il me semble que certains éléments y étaient intéressants et je les réutilise dans le livre
00:00:00
00:16:04
00:16:04
00:54:10
Enregistrement video des chapitres 20 et 21, accéléré x0.1
00:54:10
2:05:28
@page titre
margin
et padding
2:05:28
2:20:53
2:20:54
02:26:13
02:26:13
02:45:11
2:45:46
2:57:28
2:57:28
05:05:57
En revenant sur le projet après plus d'un mois de pause, il m'est apparu que certaines choses ne fonctionnaient pas bien dans le livre. Je trouvais les pages de titres de projets trop vides alors j'ai décidé d'ajouter des les restructurer et d'ajouter des blocs en jouant avec les propriétés de flexbox des blocs. Pour les projets électroniques je voulais essayer de montrer sur le page de titre les composants qui vont être utilisés dans le projet. Je les place dans un bloc en mode display:flex.
00:00:00
00:02:55
00:02:55
00:24:35
Enregistrement video du chapitre, accéléré x0.1
00:24:35
00:48:13
Enregistrement video du chapitre, accéléré x5
00:48:13
01:09:14
Enregistrement video du chapitre, accéléré x0.1
01:09:14
01:26:06
01:26:34
02:22:41
Enregistrement video du chapitre, accéléré x0.1
En relisant le contenu du livre, il m'a semblé que les étapes des explications n'étaient pas suffisamment identifiables. J'ai donc décidé d'ajouter un compteur à chaque paragraphe pour marquer les étapes, et en regard du texte de mettre un compteur et une légende à toutes les images pour reprendre ces étapes dans le bon ordre, ce qui me semblait plus logique car les images sont justement des captures d'écran de toutes les étapes à suivre.
J'ai redressé toutes les images qui avaient été pivotées de 90 degrés et ai passé toutes les pages d'images sur fond vert pour les démarquer. Je ne trouvais plus la logique de mettre seulement certaines images en exergue pertinente.
J'ai également décidé d'harmoniser les couleurs du livre : je trouvais qu'il y avait trop de couleurs différentes. J'ai donc supprimé le bleu des pages de titre et le rose des pages de circuit pour les passer en vert.
Il m'a fallu remettre en place la grille de ligne de base dans le CSS. Je l'avais fait disparaître pour bien visualiser les pages sur fond de couleur, mais comme j'arrive à la mise en page des projets électroniques, j'ai besoin de la grille pour m'aider. Pour ces projets, je mets sur la page de gauche les explications du code, et sur la page de droite le code. Tout l'enjeu est de faire en sorte que chaque explication tombe bien en face du bloc de code auquel elle correspond. C'est en cela que la grille m'aide.
Je continue la mise en page des projets électroniques. Pour chaque projet qui fait appel à un nouveau composant, j'exporte une image PNG du composant depuis Fritzing que je dois bien dimensionner pour l'harmoniser avec les autres sur la page de titre.
J'ai modifié le pas de la grille de ligne de base. Je me suis dit qu'elle pourrait me servir de règle en quelque sorte. Je l'ai calée sur le haut de la page (9mm, ce qui correspond au margin des pages) et l'espacement est de 10mm, comme ça je visualise mieux de combien je dois faire descendre mes blocs de code ou mes explications pour les aligner.ai également décidé d'harmoniser les couleurs du livre : je trouvais qu'il y avait trop de couleurs différentes. J'ai donc supprimé le bleu des pages de titre et le rose des pages de circuit pour les passer en vert.
class="numero"
[pourquoi ajouter cette div?]@page encart
: toutes les figures sont dans les pages encarts vertes@page encart
encart
class="projet"
), pas encore de styleclass="projet"
)titre
titre
titre
titre
.remplissage
contient les éléments arduino)titre
titre
intro_longue
@page circuit
(images) et @page circuitTexte
(listes ol
)circuit
(à gauche) et une pagecircuitTexte
(à droite)@page code
Je continue de couler le contenu. Je pensais avant de commencer le projet que les CSS regions seraient parfaitement indiquées pour obtenir le résultat que je recherchais sur les projets électroniques du livre (sur une double page, d'un côté le code, de l'autre les explications). Mais en le faisant, je me rends compte que cela m'aurait peut-être compliqué la tâche puisque l'overflow des contenus, que ce soit le code ou les explications aurait automatiquement coulé vers d'autres blocs et j'aurais quand-même eu à intervenir manuellement pour découper le contenu des pages de façon cohérente. Avec le système que j'utilise dans Paged.js, j'ai des pages nommées pour les explications et pour le code en face, ce qui fait que je sais précisément quel seront les blocs sur chaque double-page. C'est donc plus de travail dans le coulage du contenu que je dois faire alterner moi-même mais ça convient bien à la mise en page que je veux faire.
Pour ce qui est de bien aligner en hauteur dans la page les explications en face du code, j'y arrive assez facilement grâce à la grille de ligne de base qui me sert de repère.
À la fin de certains projets je place une capture d'écran pleine page du rendu du projet. Pour mettre une image en pleine page j'ai trouvé comme solution de la placer sur une page nommée dont les marges sont à 0, et de mettre des marges négatives à l'image pour qu'elle arrive dans la zone de fond perdu.
encart
(Commit master)encart
+ les figures du bas figure:nth-child(even)
sont positionnées avec absolute
class="p_img_bas"
et 2 figures pour faire des pages en regard texte / image.p_img_bas
sont positionnés avec absolute
encart
+ les figures du bas figure:nth-child(even)
sont positionnées avec absolute
.expl_break
, .expl_nn
, .expl_sh
, ...) code
(Commit master)circuit
(Commit master)@page circuit
circuit
margin
et des width
spécifiques selon des IDcircuit
: à gauche, image circuit et à droite, liste ol
img_full_page
[Pour mettre une image en pleine page j'ai trouvé comme solution de la placer sur une page nommée dont les marges sont à 0, et de mettre des marges négatives à l'image pour qu'elle arrive dans la zone de fond perdu.]@page imgFull
img_full_page
J'ai passé beaucoup de temps sur un petit problème : j'ai ajouté dans la mise en page d'un projet une capture d'écran de l'IDE Arduino qui intervient au début du code (c'est une manipulation à faire dans l'IDE avant de scripter), donc je ne pensais pas avoir à créer de page nommée pour ça puisque l'image reste dans le flux du contenu. Je voulais avoir l'image seule sur la page de droite, je lui avais mis comme propriétés page-break-before:always et page-break-after:always, mais le page-break-after n'était pas pris en compte, j'avais toujours le h4 de la page suivante qui restait sur la page. Alors j'ai essayé de le pousser de la page en ajoutant du margin-bottom à l'image et du margin-top au h4 mais ça ne fonctionnait pas, le h4 restait sur la page. Je n'ai toujours pas compris si c'était une propriété de Paged.js qui empêchait cela de fonctionner ou s'il y avait autre chose que je n'avais pas saisi. Mais j'ai fini par régler mon problème en créant une page nommée pour l'image.
.img_tuto
(commit master).img_tuto
avec page nommée associée.img_tuto
(à gauche)Après avoir coulé l'intégralité du contenu je voulais mettre en place des césures car de nombreux drapeaux du texte n'étaient pas très harmonieux. J'ai d'abord essayé avec la fonctionnalité Hyphen en CSS mais elle ne marchait pas en français dans ma version de Chromium. J'ai donc cherché un polyfill pour gérer les césures en Javascript et j'ai fini par tomber sur Hypher. Ne sachant pas vraiment utiliser un serveur Node.js, je me suis dirigée sur la version plugin Jquery de ce polyfill. J'ai dû faire un hook au début de mon document HTML pour que la césure des mots soit appliquée à afterPageLayout (sinon Hypher ne fonctionnait pas). Après quelques réglages sur le nombre de lettres de part et d'autre des césures, j'ai fini les corrections ortho-typographiques par quelques césures manuelles avec des (?) dans le HTML dans des cas de figures précis (mot de 2 lettres en début de phrase en fin de ligne, drapeau disgrâcieux...). Plus d'autres petits réglages manuels de modification des width de certains blocs (parfois directement dans la propriété style en HTML).
partie
(commit master) pagedjs_area
) pour les pages de titre des parties@page partie
partie
partie_gauche
h2
contenu dans div partie_droite
@page :blank
et .page_blanche
@page garde
et @page sommaire