Transcription Audio

Transcription Audio

Video (all)

Notes

Notes Transcription Audio

Notes

Transcription

Transcription

[NE1A4969.MOV]

Julie: on peut faire un tour de table et chacun dit ce qu'il a trouvé le plus intéressant dans tout ce qu'on a montré ce matin. Comme je disais, je préfèrerais qu'on travaille sur la mise en page plutôt que le workflow – l'amélioration avec les hooks. Ensuite, on se décide sur qui travaille sur quoi, avec qui; et on travaillle, on met les mains dans le cambouilli.

Julie: Moi, j'aimerais travailler sur les images et les images pleins pages, finir les scripts qui ont été entamer parce qu'ils ne sont pas très optimisés. Qui veut prendre la parole ?

Robin: Moi, l'histoire des traitements sur les images je trouvais ça marrant. Canevaser / décanevaser et compagnie. La mise en page des notes ça m'intéresse mais je sais pas à quel point il y a besoin de faire quelque chose; vous êtes déjà allés super loin.

Julie : C'est pas du tout mis en place. Il y a des floats d'un côté comme j'ai montré mais c'est pas du tout relié au script des footnotes qui marche vraiment.

Robin: Ok. Après, j'étais assez curieux sur ce que Julien avait présenté, sur la manipulation de l'AST au moment du parsing du CSS; essayer des choses, voir ce qu'on faire avec cette manière de travailler. Mais c'est plutôt une curiosité technique en l'état que une idée précise.

Julien: Je rebondis juste parce que j'y penses. À partir du moment où on a un hook qui aurait besoin d'aller vérifier quelque chose dans une feuille de style, on peut partir de là pour en faire quelque chose. Si bêtement on décide, comme moi j'ai fait pour les float, d'avoir une propriété spécifique qui est hors W3C, on peut la traiter. Que bêtement, au lieu de définir les images par une classe, on définit les images par une propriété CSS et si l'image elle est full spread par exemple... Donc, on peut, on peut voir comment ça marche par là. C'est assez simple dans le principe: navigation dans la feuille style.

Julie: Tu parles de ce que vous avez fait avec les variables ?

Julien: Lire le CSS pour pouvoir développer des fonctionnalités à partir du CSS.

Julie: OK. Manu, il y a des trucs qui t'intéressent ?

Manu: Moi, je pense que c'est les notes qui m'intéressent le plus. Mais par contre, je pense que j'ai pas le même niveau que vous au niveau script, code; du coup, je ne sais pas comment me positionner là-dessus. Il vaut mieux que je travaille en groupe peut-être.

Julien: T'inquiètes.

Julie: Julien ?

Julien: Je sais pas, je parlerais en dernier, quand j'aurais trouvé. Mais le canevas... En fait, l'intégration de bibliothèques. Typiquement, aller chercher une carte, de planter un p5.js dedans et ce genre de trucs. L'intégration des bibliothèques JavaScript. Bêtement, creuser un peu la question des césures avec hyphenopoly par exemple, histoire de se sortir de ce que fait Chrome, pour avoir un peu plus de contrôle sur la microtypo et pour que Sarah elle arrête de passer de heures à faire ses césures.

Sarah: Et bien du sais, j'ai pas mal creusé mais ça marchait pas très bien hyphenopoly. J'arrivais pas très bien à comprendre.

Julien: En fait, mon idée c'est de passer Hyphenopoly au moment où tu rends l'élément. Tu fais l'élément, tu passes Hyphenopoly et tant qu'Hyphenopoly n'a pas fini sur cette élément-là, tu passes pas au suivant. Il faut voir si c'est possible ou si c'est moi qui imagine encore un truc. Sarah: Ok. Beh moi, il y a pleins de trucs... Les notes ça m'intéresse; le traitement des images en canevas aussi; la question des césures aussi et la question des grilles et des lignes de base mais ça j'ai l'impression que tu avais l'air d'avoir un peu résolu ça Julien?

Julien: J'ai un début d'un semblant de base de résolution. Un semblant. Et il y a une propriété CSS de snap aussi sur laquelle on pourrait se baser pour implémenter ça en suivant ce qui a déjà était fait par le W3C, il faut que je regarde.

Sarah: Ha, et tu as pas explique le bug – enfin bug, je sais pas si c'était un bug – ...

Julie: Ha oui non, c'est le onOverflow... On finit le tour de table et on revient dessus parce que ça va être important pour tout le monde.

Julien: Oui, j'ai retrouvé mon beau script lisible, je vais pouvoir vous le faire un peu moins speed.

Julie: Il reste Louis.

Louis: Oui, moi, c'est vrai que sur le côté canevas, ça me posait question. Notamment, j'avais en tête un cas de figure qui me parait pas délirant, qui serait d'utiliser des vrais données, genre API, et à chaque fois que tu rafraichis le bouquin, ça met à jour les visualisations en question. Je me dis que ça peut être un cas de figure intéressant. Au-delà de l'expérimentation un peu gratuite, peut-être qu'on peut imaginer un contexte un peu crédible. En plus, ça montre tout l'intérêt d'avoir un outil comme Paged.js. Parce que dans vos présentations, j'ai certainement dans tous les cas moins creusé Paged.js, mais ça me fait un peu mal au cœur de voir quand il y a besoin de rompre le côté contenu et forme; de perdre un peu cette dissociation. Donc c'est des trucs comme ça. Voir, une question qui m'intéresserait, c'est de voir comment est-ce qu'on peut garder – je crois que c'est toi Robin qui en parlait – garder les drapeaux sans s'éloigner du contenu originzl; trouver des moyens d'augmenter... en se disant, par exemple, si ce bloc bouge pas, les drapeaux que je voudrais ils sont là, mais si jamais le bloc bouge parce que le contenu est modifié, ça supprime peut-être les drapeaux manuels que j'ai mis. Et ça me met un flag, ça veut dire que ce bloc-là a été bougé. Il y a peut-être des systèmes intéressant à trouver pour palier à des manques.

Sarah: Tu as une idée de début de résolution de ça ?

Louis: Pas vraiment, mais comme j'ai pas eu besoin de m'en servir en production je m'en rends pas compte, mais j'ai l'impression que toutes les petites améliorations comme ça rendront plus jouable l'utilisation pour des grands bouquins.

Julie: Après, la vraie utilisation qui changerait tout, c'est de pouvoir faire les drapeaux dans le navigateur, dans l'aperçu.

Sarah: Pas que les drapeaux, toute la microtypo en fait.

Julie: Toute la microtypo, oui. Que à un moment, tu puisses le faire dans l'aperçu et que ça l'enregistre sur ton fichier. C'est ça qui ferait basculer l'utilisation; tous les graphistes avec qui je parle, c'est ça.

Sarah: Ça c'est clair. Parce que, en fait, le problème, c'est que c'est long parce que quand tu fais un bouquin de 300 pages et que tu te tapes la microtypo – notamment les césures – et que quand tu en mets une, beh évidemment ça change tout – ça rechange la suite – et bien quand tu recharges ta page, ça met une minute...

Julie: On t'a pas montré le script de Nicolas qui permet d'aller directement à la bonne page.

[...]

Le reste de la transcription n'est pas disponible en version publique.

[ videos: NE1A4970.mov / NE1A4971.mov]

[DR0000_0091.mp3, 19:40]

 

Julien: Alors, voyons si celui-là il a un OnOverflow, non. On va en regarder deux. J'ai deux scripts que je veux regarder, le premier c'est le floatTop et le deuxième c'est le floatNext. On va commencer par le floatNext parce que c'est le plus simple; c'est celui qui envoie directement le document sur la page d'après. Donc, la façon dont un hook se fabrique: c'est une classe, qui est PagedjsHandler qui est étendue par le script que je vais lui mettre dans le ventre, celui là s'appelle floatNext. Je récupère le constructeur de mon PageHandler dans lequel il y a le chuncker, le polisher et le caller. Je fais super() pour pouvoir récupérer les fonctions de ces éléments-là.

Robin: J'ai une question de compréhension de Paged.js. Le polisher, c'est celui qui met en forme les éléments, on est d'accord ?

Julien: On est d'accord.

Robin: Je comprends pas pourquoi le chuncker arrive avant sachant que le polisher va peut-être changer la taille de l'élément. Du coup,le faire plus gros ou plus petit. Ça j'ai pas compris.

Julien: Il arrive pas avant, c'est la façon dont les scripts ont été découpés. Mais ça n'a rien à voir avec l'ordre dans lequel il sont passés. J'ai mis je sais pas combien de temps avant de comprendre ça. Donc en fait tu as des fonctions qui appartiennent au bloc chuncker parce que c'est des fonctions de découpe, et des fonctions qui appartiennent au bloc polisher parce que c'est des fonctions de [stylisation de page]. Mais en vrai c'est pas aussi linéaire: d'abord le chuncker et ensuite le polisher. Et après, on pourra aller voir dedans à quel moment les hooks arrivent. C'est vriament une question d'organisation du code plus que d'organisation des évènements.

[...]

Le reste de la transcription n'est pas disponible en version publique.

[NE1A4980.mov]

Louis: Alors, j'ai bricolé des trucs, j'ai testé des trucs. En fait, la première chose que je voulais voir c'est ... En fait, j'ai le template dans la page et j'ai créé une petite div controler à gauche là – que j'ai appelé controler – et à droite j'ai Paged.js. Comme ça, j'ai à la fois le texte un peu brut et le rendu avec une petite navigation par page là, en haut. Ça me met un peu plus à l'aise parce que je suis toujours un stressé des performance, de la stabilité des onglet(?)s. Et du coup, quand il y a trop de trucs dans un onglet ça me fait des sueurs froides. Donc j'ai fait ça. Ensuite, je me suis dit que ça pouvait être cool de pouvoir voir en live ce qui est à droite, où est-ce que c'est à gauche. Donc en fait, quand on clique sur un paragraphe, ça passe en vert. Donc en fait, si je fais à droite, ça m'affiche dans l'espace un peu brut de texte où se trouve le paragraphe en question.

Julie: (?)

Louis: Non mais c'est que j'ai un effet d'apparition/disparition pour éviter que ce soit génant. Et si je clique à gauche, c'est pareil. Ça s'allume à gauche et à droite ça s'allume et ça change de page. Donc là par exemple, je suis page 18, mais si je descend beaucoup plus bas dans le document et que je clique à nouveau, ça va me changer la page, trouver la bonne page et m'afficher le bon passage en question. Donc voilà, l'idée, c'est d'avoir cette possibilité de switcher. Et ensuite... Vous voyez, il y a des petits bugs, c'est tout à fait normal. Vous voyez, je suis à la page 38 là et il y a toujours marqué page 1 en bas. Ça j'imagine que c'est parce que ça utilise un counter CSS ou un truc comme ça. C'est typiquement ce genre de soucis avec ce système de pagination. Là, je fais tout simplement un display: nonesur toutes mes pages; enfin, je me suis pas attaqué au moteur à l'intérieur. Je me suis dit, on va éviter les bugs type de rendre qu'une seule page; même si l'idéal serait de rendre qu'une seule page comme on avait dit. Pour l'instant je passe tout en display: none, comme ça elles sont pas chargées dans le DOM, c'est toujours ça en terme de performance. Les navigateurs gèrent plutôt bien maintenant les display: none pour pas juste les mettre en RAM, c'est mieux.

Louis: Et alors du coup après il y a d'autres trucs. Comme par exemple, là, je remonte tout à haut, la deuxième phrase. Imaginons qu'ici, je voudrais changer le drapeau. Donc, à gauche si j'identifie par exemple "It is a way", troisième ligne. Je le prend à gauche, il est là, et là si je fais un retour à la ligne, tac, comme ça, de manière un peu dégeu et que je clique sur reflow. En fait, en cliquant sur reflow, il refait tout le process Paged.js et donc, coilà, mon petit «a way» qui vient de passer à la quatrième ligne. Et donc, quitte à faire ça, je me suis dit que ça pourrait être marrant de faire un truc un peu plus bourrin. Et donc, ça peut devenir un outil de composition live. Dans l'idée ern tous cas... Je crois que j'avais déjà vu un truc comme ça sur Paged.js, mais je voulais voir ce que ça pouvait donner d'avoir ce bloc brut et ce rendu à droite. Idéalement, il y a pas besoin de ce bloc brut à gauche et toutes les modifs qu'on fait à droite se répercutent dans la source originale et, peut-être qu'il y a juste un copier-coller pour récupérer la source originale, plutôt que de se taper à avoir un serveur Node qui remplace les fichiers HTML, ce qui peut être un problème. Il suffirait jsute de faire un copier-coller. Pour l'instant, c'est juste dans la page, donc si je recharge la page, rien n'est enregistré. Voilà, c'était juste pour voir ce qui pouvait être intéressant à développer et si ça suscitait des réactions chez vous, des pistes.

Julien: Le vrai soucis, c'est que tu es obligé de relancer un reflow à chaque fois que tu fais un changement.

Louis: Ouai. Alors, si le moteur est plus intelligent et ne génère que la page en question, ça va vite. Mais si c'est pas le cas...

Julien: Oui oui. Mais comment dire... En fait ça serait jouable. Comme chaque page a son identifiant. Je suis en train de réfléchi

Louis: C'est pas sûr. Parce que si jamais ton retour à la ligne signifie que ta page prend plus de place que prévue (geste) et chasse des choses à la page suivante...

Julien: Mais tu peux repartir de la page que tu modifies, et les trucs d'avant ne sont pas coupées.

Louis: C'est ça; on peut considérer que.

Julien: Donc ça veut dire que si tu récupères la page où tu fais le changement. Regardes dans l'inspecteur si tu as l'information de l'overflow. Parce que si c'est le cas, tu as l'offset; du coup tu peux recréer un break token et dire "c'est ici que je fais ma coupe" et relancer la page d'après à partir de là où tu as fait ta coupe.

Louis: Ha oui, je comprends.

Julien: Je suis pas sûre, mais peut-être.

Louis: Ja sais pas si vous avez fait ça mais est-ce que ça vaudait pas le coup de récupérer tous les hooks, de tous les brancher, de mettre un petit log de performance et de regarder concrètement sur un bouquin de 200 pages qu'est-ce qui prends vraiment des ressources, qu'est-ce qui consomme le plus.

Julie: Les images.

Louis: Et là par exemple, j'ai aucune images, ça prend quand même 4 secondes. Qu'est-ce qui fait que ça prend 4 secondes ? C'est le fait d'insérer tout ce HTML dans la page ? C'est le fait de tester pour arriver à faire les bonnes coupes d'une page à l'autre ? C'est quoi ?

Julien: En fait, le soucis qu'on avait eu vraiment, qui était un vrai soucis de performance, c'est le fait qu'il faisait un repaint. C'était assez marrant, il créé la page, il faisait un repaint à chaque fois qu'il calculait les numéros de page. Il faisait un repaint du DOM à chaque fois. Mais ça, c'était vraiment un truc qui bouffait... qui était vraiment pas top en terme de performance. Mais là pour toi, je pense qu'une partie du CSS, de tout ce qui est compteurs CSS à mon avis, ça doit bouffer un peu. Après, il faudrait qu'on prenne un peu le temps de creuser. En fait, Paged.js créé une colonne, il remplit cette colonne et il fait la suite. C'est la création du DOM en lui-même qui prend du temps; le fait que ce soit des div dans des divs, dans des div, dans des div... Il y a tout un tas de div qui sont créées qui sont pas nécessaires en fait; tous les margin boxs qui sont vides, ils ont pas vocation à être là typiquement.

Louis: C'est sûre que moi qui ai l'habitude de travailler avec un famwork de type Vue.js, ce qui me rendrait plus facile l'intégration, ça serait de pouvoir balancer genre un objet JSON bien formé à Paged.js... Enfin non, récupérer de Paged.js un objet JSON bien formé et de transformer moi-même ça en HTML. Je suis toujours un peu mal à l'aise quand un truc modifie le DOM et quand il y en a plusieurs dans la même page. J'ai tellement l'habitude de bosser avec des frameworks commeVue que je trouve ça tellement souple. Et là du coup, je suis un peu obligé de passer par... enfin, j'ai du mal à voir où est-ce que je peux récupérer tout le travail de Paged.Js sans forcément devoir utiliser exactement les mêmes...

Julien: Tu utilises le polyfill ?

Louis: Non, j'utilise juste le .js il me semble. Il faut que je regarde, après render, je peux peut-être récupérer une sorte de modèle; faire une abstraction de ce qu'il a rendu et je sais pas, avoir un tableau et chaque rendu du tableau c'est une page.

Julien: En fait, à chaque fois qu'il a fini une page, Paged.js a un breakToken, l'élément par lequel la page commence, l'élément par lequel la page fini. En plus de ça, tu as un template; un élément template qui est là. Tu pourrais remapper le template sur chaque page en fait. Et du coup, tu pourrais complètement dire, "cette page-là tu la démare par le token qui est celui-ci". Et du coup, tu aurais plus que cette page à rendres.

Louis: oui, d'accord. Après, il faut exactement reproduire la même mise en page avec les mêmes marges sinon ça n'a aucun sens. C'est pratique d'avoir tout ce système de data.

Julien: Oui, il faut que tu récupères si c'est une page de droite, une page de gauche, mais ça c'est dans les classes. Non, c'est jouable en fait. C'est jouable d'avoir du page à page. Mais d'un coup, on passe dans autre chose, on passe dans un outil de mise en page. Et plus du tout dans un outil de ce qu'est Paged.js. ce qui est nécessaire. On est plus dans un outil de prévisualisation d'un contenu dans le DOM; on est dans un outil de travailpour les designers qui doivent mettre en page un livre. On quitte le côté tout automatisé pour aller vers l'intégration de possibilité manuelles.

Sarah: En même temps, c'est un peu ça qui manque.

Julien: Je suis tout à fait d'accord. Je suis pas en train de dire qu'il faut pas être là, je suis en train de dire que c'est plus du tout le même truc. Mais, au contraire.

Julie: C'est ça qui manque pour les drapeaux et la micro-typo

Julien: Pour tout.

Sarah: Ce qui manque c'est que, quand même, quand tu bosses avec des éditeurs justement, c'est l'exception. C'est de pouvoir faire des exceptions dans ta mise en page. Enfin, je trouve.

Julien: Et en fait, tu pourrais même l'amener plus loin que ça, parce que le... On pourrait même considérer que l'overflow n'existe pas dans ce doc-là. Tu bloques l'overflow, ce qui voudrait dire que le reste de ton contenu, il est dans des colonnes. Il est invisible, mais il est là. C'est-à--dire que si tu enlèves complètement deux paragraphes, il intègrerait le contenu qu'il avait pas la place d'intégrer. / En fait, quand tu démarres ta page, il créé ta âge, il commence à mettre les contenus et après il passe à la colonne suivante et il met le contenu dans les colonnes et ainsi de suite. Ce que Paged.js fait, c'est "hop, il y a un overflow, je coupe". Mais on pourrait dire, overflow, tu fais pas; tu vas laisser le auteur ou le metteur en page faire ses changements sur la page et si tu cliques sur "page suivante", d'un seul coup tu fais le reflow avec (???).

Sarah: Comme un les sliders d'image quoi.

Julien: C'est exactement ça en fait. Et du coup, ça commence à devenir un peu sérieux quand même. Et si en plus tu as un back change pour chaque page de contenu, c'est pas mal.

Louis: Je commit et je passe la main. Qui veut récupérer la main ?

Julie: C'est sur quel repo ?

Louis: Un repo local.

Sarah: Nous, on a commencé à parler des baseline, enfin de la ligne de base qui est la ligne de texte. En fait, on s'est rendu compte assez vite que ce qui était peut être le mieux c'était de faire une documentation détaillée des différentes possibilités. Il y a plusieurs possibilités et finalement c'est probablement au designer de le faire. Mais on a quand même fait des petits scripts. On a fait un script qui permet d'avoir la hauteur de l'image proportionnelle à la taille de la grille de base. Voilà le code, c'est le bordel, ne m'en voulez pas parce que j'étais en train de tester des trucs. Donc c'est ce script. On est parti d'un script qu'avait fait Julien pour pouvoir récupérer la taille de l'image et pour pouvoir ensuite la modifier par rapport à la taille de la ligne de base. Donc ça, ça marche. Le problème c'est qu'ensuite, une fois qu'on a fait ça... Attendez, je vais commenter ça.

Robin: Ça marche ?

Sarah: Oui ça marche. Là, l'image, elle fait pile la taille de la ligne de base. Elle est pas calée dessus, mais là c'est volontaire. Le problème, c'est que comme elle se cale pas dessus parce que la taille des descendantes de la typo fait que la marge en dessous fait un petit décalage avec l'image, l'image n'est pas calée sur la grille de ligne de base. Donc, ensuite, ça décale le texte. Donc, Julien m'a filé un petit script, qui permet de faire ça. C'est-à-dire, de recaler les éléments sur la ligne de base. Donc, ça ressemble à ça. Ça calcule le padding selon l'élément avant... Non, d'ailleurs il s'en fou de l'élément avant. Il positionne l'élément sur la ligne la plus proche de lui.

Louis: Et comment il le sait ?

Sarah: C'est ça Julien, je dis pas de conneries ? C'est ça (Sarah surligne 6 lignes de code à l'écran)

Louis: Ha, il prend l'offsetTop et il pousse comme il faut.

Sarah: C'est ça.

Julien: J'avais dit à Julien Bidoret, "c'est des maths". Il m'a répondu "Oui, enfin t'es gentil c'est des additions"

Sarah: (rire) Ouai.

Julie: Ça prend l'offsetTop duquel ?

Sarah: De l'élément.

Julie: Mais l'élément c'est l'image ?

Sarah: Non, le texte. Il prend l'offsetTop de lui. Donc, si je l'enlève. Il prends l'offsetTop du paragraphe et il va chercher l'offsetTop de la ligne en dessous; et il recale.

Julie: Mais comment il trouve l'offsetTop de la ligne ? C'est ça que je comprends pas.

Julien: Parce qu'en fait, la page.. En fait, il calcule par rapport au positionnement... En fait...

Julie: Ha oui, parce que tu as fait offsetTop pour le background où il y a la baseline, pour le décaler. Et vu que c'est par rapport à ce qu'il y a en haut... J'ai compris, ça y est, c'est pas mal.

Julien: Si on reprend au début, ce qu'on disait "il faut se positionner par rapport à l'élément d'avant", c'était un piège dans lequel on est resté.

Sarah: Oui. Donc, il positionne l'élément d'après. Ce qui fait que, par contre, ce que j'étais en train de faire... Là, toi tu le fais seulement sur les p et là j'ai rajouté pour le faire là c'est un h3. Comme c'est des tests, il faudra le faire sur tout quoi.

Julien: En fait, je l'ai fait sur les p parce que c'est compliqué de travailler sur grille. Parce que soit, tu as tout sur grille et dans ce cas là c'est au millimètre et tu te poses même pas la question, tu fais tout en CSS. Ou alors tu te dis, j'ai une grille qui me sert de point de départ et puis s'il y a des décalage, (???)

Sarah: Oui, c'est ça, c'est un peu le choix du designer.

Julie: Elle est trop intélligente cette astuce en fait.

Sarah: Oui, c'est trop bien. Parce que nous, on se prenait la tête comme des oufs alors que c'était simple à faire. Donc finalement, en fait, ça (10 lignes de codes pour calculer la hauteur de l'image), ça sert à rien. Enfin, si je l'enlêve, ça marche quand même à priori. J'ai enlever le fait que ça change la hauteur de l'image.

Julie: Beh si, tu en as quand même besoin.

Sarah: Beh ça dépend ce que tu veux faire en fait. Parce que là le truc se cale de toutes façons. (...) En tous cas, là, l'idée, c'est plutôt de faire une boite à outil et de documenter ça pour que, après, et bien si finalement, si on veut plutôt faire à la main pour régler correctement les trucs avant/après, et bien on le fait. Je crois qu'on était plutôt parti là-dessus.

Julie: Oui, et expliquer aussi que... Beh, par exemple, Amélie quand elle faisait son livre, elle était restée bloquée parce que ça s'aligner pas sur la ligne de base parce qu'elle utilisait des points.

Sarha: Oui, c'est ça. Par exemple, moi, ça, je le savais pas, qu'il fallait pas utliser les points pour la ligne de base.

Louis: Il faut utiliser quoi ?

Sarah: Le pixel.

Louis: Ha oui ? Pourtant il y a pas une convertion ?

Julie: Oui mais elle est imprécise en fait. Parce que le point est plus précis que le pixel, du coup le navigateur arrondi forcément. Et c'est pas la même chose quand tu fais en point pour la ligne de base qui est un dégradé et en point pour le texte qui est typo. Et du coup, t'arrivais jamais à caler exactement sur la ligne, ça se décalait toujours au fur et à mesure.

julien: (En parlant de ce qu'il y a à l'écran)Tu vois là, c'est intéressant parce que sur le calcul je suis pas censé être mauvais et il y a un pixel d'écart.

Sarah: Oui, il y a un petit pixel d'écart. (...)

Julien: La question c'est de savoir si le décalage il est dans le rendu ou dans le calcul. En fait, je pense que si tu regardes le haut de ta page, tu as pas une ligne complète en haut.

Sarah: Oui, c'est peut-être pour ça.

Julien: En même temps; je vois pas pourquoi tu aurais un si petit décalage avec un si gros décalage au-dessus. Mais la théorie et la pratique étant deux choses différentes... Et puis, de toutes façons, ça sera imprimé par un mec qui aura pas calibré correctement sa machine, donc un point c'est pas si grave.

Sarah: (rire) Et puis les gens qui lisent ils voient pas.

Louis: Non, ou alors il va massicoter comme un porc.

Julie: il va mal relier.

Louis: Ça sera jamais notre faute.

Julie; J'ai déjà eu la relieure qui m'a décalé des pages; c'était mal relié quoi.

Julien: Les mecs, ils posent des cahiers à l'envers.

Julie: Merci Sarah. Du copu, demain tu veux continuer sur ça ? Sur la documentation de la baseline ?

Sarah: Oui, je veux bien documenter.

Louis: En fait chaque (???) c'est la même chose. Parce que tu regardes ce qu'il manque pour aller sur la ligne. Ça veut dire que même le calcul...

Sarah: Oui, mais là j'ai calculé la hauteur de l'image, mais après il y a un décalage avec les marges entre le texte et l'image. Je pense que tout ça c'est intéressant à expliquer et à documenter.

Choses auxquelles il faut penser:
- Reset des margin/padding par d'afaut
- Caler la première ligne de texte sur la ligne de base depuis des pages de textes de labeur (plus petite unité)
- Travailler en pixel plutôt qu'en point
- Toujours travailler dans le même navigateur (différence d'un navigateur à l'autre)

-1:54:52
Julie: Si on commence sur Chrome, on finit sur Chrome. Les navigateurs ne gèrent pas de la même manière le line-height
Sarah: D'ailleurs, j'ai eu des problème sur Chrome qui ont été résolu par Chromium

-1:53:03
Article blog Vincent De oliveira "CSS avancé: métriques des fontes, line-height et vertical-align"
Si plusieurs fontes sont définies selon une hauteur de 100px, elles ont pas la même hauteur de bloc et on ne sait pas où se trouve la ligne de base visuelle du bloc (faire shéma)
Chrome et Firefox ne prennent pas la même métrique encodée dans la typographie pour calculer l'interlignage
Conclusion: c'est compliqué de calculer la hauteur des lettres entre différentes typographies selon une ligne de base commune

-1:50:54
Julie: on travaille toujours en point parce que le point est plus précis que le pixel mais qu'il est arrondi lors de l'affichage à l'écran, ce qui risque de donner des différence lorsque le PDF est généré et se décale toujours très légèrement. Donc on garde la même unité pour l'écran et l'imprimé
Sarah: avec Raphaël, on a aussi travaillé une typo en millimètres; en fait on a tout travaillé en millimètre. Notre grille elle fait 5mm et on a tout basé là dessus
Sarah: je savais pas le truc des points et pixels

-1:48:56
Julie: Dans " l'interface " il est possible de décaler la ligne de base

-1:47:28
Julie: Le secret c'est que tout soit un multiple de la ligne de base (marges de la pages sont un multiple, marges et des éléments, interlignages )

1:46:25
Julie: La difficulté c'est quand tu changes de famille de caractère, même si tu as le même interlignage, ce n'est plus aligné sur la ligne de base visuel
Là il y a deux solution
- soit tu ajoutes un pudding pour pousser l'élément sur la ligne mais il faut reporter le pudding en bas et en haut (et que l'addition des deux fasse la hauteur de la baseline)// pudding ne s'annulent pas comme les margin
- Soit position relative

1:43:24
Julie: les paragraphes avant et après le titre sont bien calés sur la ligne de base, car interlignage du titre est un multiple mais la typo du titre en elle-même ne semble pas caler sur la ligne de base

1:43:02
Julie: Script qui automatise 2 choses: mets tous les interlignages et les marges selon un multiple de la ligne de base (arrondi supérieur) + cale les typos différentes sur la ligne de base avec position relative (ou padding?)
Utilise un autre script complexe qui a besoin de rendre une première fois la typo hors de la page pour calculer ses métriques et récupérer les valeurs nécessaires pour connaître la ligne de base
Puis ajout position relative
Ce script présente des dysfonctionnement et ne marche pas très bien

1:41:00
Julie: Pour moi, c'est un travail de graphiste clairement
Sarah: Oui, oui mais peut être qu'il ya une documentation à faire, qui donne simplement des conseils; ou un gabarit en expliquant... pour pas recommencer tout le temps les mêmes erreurs

1:41:25
Sarah: Et après, les techniques par rapport aux images.
Nous [avec Raphaël] on a fait un truc qui fait que toutes les images ont la même hauteur et évidement, la hauteur est calée sur la ligne de base
On a fait un script qui recale la hauteur pour que la hauteur soit toujours calée sur la taille de la ligne de base, on utilise le multiple de la baseline qui est le plus proche
Julie: Oui, mais ça dépend comment tu veux cette hauteur. Par exemple, moi je la cale sur l'oeil de la typo. Là par exemple, ça veut dire que ma hauteur c'est pas tout à fait un multiple de la ligne de base. Par exemple là, c'est un multiple moins 4pixels, et je rajoute un padding de 16px en dessous (pour faire 20px de la ligne de base)

1:38:30 /
tentative de développement d'un script: script qui recale la hauteur des images pour que la hauteur soit toujours calée sur la taille de la ligne de base, on utilise le multiple de la baseline qui est le plus proche

1:38:30
Manu: on peut faire un script qui permet de caler les images en fonction de la baseline
Julie: En fait, c'est quand est-ce qu'on lance le script ? Sur quel hooks ? Sur le OnRender ? Tu es obligé de poser l'image pour la page pour savoir sa largeur et donc sa hauteur

1:36:14
Julie: On va voir el tableau de hooks fourni par Julien. C'est entre renderNode et LayoutNode mais j'ai du mal à savoir ce que ça veut dire
On demande la différence entre les deux à Julien

-1:24:20
On cherche à récupérer la hauteur de l'image depuis l'élément Node du hook LayoutNode mais ça ne marche pas puisque l'image n'est pas encore rendu
Difficulté à savoir quel est le bon hook quand l'image est rendu
On s'appuie sur des scripts développés par Julien pour trouver le bon hook (floatNextBis.js)

1:15:24
Envoie du fichier sur lequel on est en train de travailler à Sarah pour qu'elle puisse aussi tester en parallèle

1:09:04
Ouverture fichier Julien snap-text-baseline.js

-1:04:09
Julie: Après, la solution c'est peut être de le faire après le pageLayout mais ça veut dire que tu dois pas trop bouger l'images c'est pas idéal
Ou alors faire avant en ayant la taille de la page Area et le ratio de l'image > solution complexe

1:01:48
Sara: Julien, on peut t'embêter ? Tu sais ta promesse "awaitImageLoaded", on arrive pas à l'utiliser

-54:30
Sarah a réussi a récupérer la hauteur et la largeur de l'image en se basant sur le script de Julien
Beug: Firefox renvoie bien la hauteur de l'image mais pas chrome (discussion avec Louis sur pourquoi ça marcherait sur l'un ou sur l'autre)

...

[DR0000_0091.mp3, 43:18]

Robin: En fait, les notes c'est ce qui me paraît le plus dur, le plus long.

Julie: Il y a déjà des bouts qui sont posés, mais après ça veut dire qu'il faut se poser sur comment fonctionne les footnotes pour réussir à le faire. Et ça, personne ne l'a fait pour le moment.

Julien: Est-ce qu'on aurait pas plutôt intérêt à démarrer... à trouver des choses à trouver des choses assez simples pour se mettre les mains dedans ? Générer un canevas... Julie: C'est simple ?

Julien: Par rapport à la manipulation des notes, oui.

Julie: Moi, j'aimerais finir le script des images en spread pour qu'il soit partageable et faisable. Donc, je pense que je vais faire ça cet aprem. Si tu veux Manu, ça peut te mettre en jambe parce que c'est facile. Et ça me force à le finir.

Manu: Oui.

Julie: Après, ça peut être juste une discussion sur tout ce qu'à lancé Louis... (?à La prise en main, les drapeaux, les césures. Ça, même si on y arrive pas, c'est une bonne discussion. C'est à vous de voir. Aussi, comment on gère la grille et la ligne de base. Sarah si tu veux ?

Sarah: Oui, peut-être que pour commencer, ça peut être pas mal. Je veux bien après participer à la discussion, comment on gère les drapeaux plus facilement. Julien: Est-ce qu'on fait pas une session où on pose un peu les attendus de ça ? Qu'est-ce qu'on a en tête, comment ça peut fonctionner et toi quels problèmes tu as eu et qu'est-ce qui t'aurais permis d'avancer. Comme ça, ça nous permet d'avoir une base solide pour savoir dans quelle direction on peut ou pas partir. Histoire d'imaginer un algorithme potentiel et voir après comment on peut l'implémenter.

Julie: Ça dépend si vous voulez commencer à coder ou continuer la discussion.

Julien: Oui, de toutes façons, on peut pas si mettre sans discuter. Sarah: De ce gros point-là oui. Julien: Ça implique beaucoup trop...

Julie: On peut partir tous ensemble si vous voulez.

Sarah: Oui mais est-ce que là aujourd'hui on peut pas faire des petits trucs, comme ça on finit la journée en eyant des choses. Sarah: Et demain matin, on fait une bonne discussion avec la tête peu plus fraiche?

Julien: Ça marche. Julie: Je peux vous montrer maintenant la baseline, Sarah Manu.

Robin: Moi, je vais travailler sur les images et des petits trucs.

Julie: Les images ? Canevas là ? C'est un petit truc ça ?

Louis: Beh, normalement c'est pas trop compliqué. Surtout vu les hooks que Julien a montré, à priori, faut juste le faire au bon endroit. Définir une nomenclature pour dire (?), à cet endroit-là tu fais tel sketch. C'est du p5, ou un truc comme ça.

Julie: Du coup, tu vas faire ça avec Robin ?

Louis: En fait, moi, j'étais plus... J'avais envie de bidouiller des trucs, avoir le HTML d'un côté et le rendu et en touchant le rendu, modifier le HTML. Enfin, voir si en une heure il y avait moyen de trouver un workflow un peu sympa. Mais ça éloigne un peu des questions de mises en page.

Julie: Non non, vas-y.

Julien: L'important c'est aussi qu'on fasse des trucs que l'on a envie de faire, aussi, surtout. Louis: Est-ce que ça serait pas mal si on se laissait une bonne heure et à 17h on fait une petite pause, on respire un peu dehors et on fait un point sur ce que chacun a fait ?

Sarah: Et on va chercher des bière.

Louis: Il reste un peu de temps avant l'apéro.

Julie: On peut faire ça. Du coup, Sarah, on discute des baseline si tu veux, et Manu aussi. On se fait une session. Sarah: Oui, tu veux qu'on vienne avec toi ?

Julien: [à Louis] Toi, tu es parti dans ton ... ?

Louis: Mon espèce de truc là. Mais tu veux qu'on échange dessus après ? Tu as des idées ?

Julien: Oui forcément. Mais fait d'abord. D'abord, tu te fais tes trucs.

Louis: Oui, comme ça, ça me permet de prendre en main un peu.

[DR0000_0091.mp3, 47:55]