Comments on J'essaie d'ajouter la possibilité de régler la taille du texte sur ce site

Cigaes (2024-02-18T11:15:01Z)

Je vais faire mon pénible : Merci pour cette fonctionnalité qui améliore considérablement le confort de lecture… mais elle rend l'index des commentaires moins lisible.

Est-ce que ce serait compliqué d'appliquer le style aux éléments article plutôt qu'à l'élément body ?

Jeanne à vélo (2024-01-09T10:18:32Z)

Par esprit de contradiction j'ai activé le mode lecture de Firefox (ce que je ne pense quasiment à faire) pour parcourir ce billet et je dois dire que c'est très bien fait. En tout cas, cette fonctionnalité intéragit parfaitement avec ce vieux site !

Matoo (2024-01-07T18:01:04Z)

Nickel pour moi ton système de réglages !! Merci ! ^^ (J'avais plus un besoin de lignes moins larges pour faciliter la lecture, mais un chouïa plus gros, c'est génial aussi.)
Tu peux passer aux commentaires me concernant. :DDD

Ruxor (2024-01-04T18:22:41Z)

@Vicnent:

J'ai plein de raisons de ne pas vouloir mettre ces réglages sous chaque billet (d'ailleurs je rappelle que ce site ne contient pas que mon blog, même si je ne touche quasiment plus aux autres pages). Ce que je peux faire, c'est ajouter un lien, par exemple dans le petit encadré tout en haut de la page, qui permet de sauter tout en bas et attire l'attention sur la possibilité d'y trouver des réglages. Mais il faut trouver moyen d'écrire ça de façon très très très concise. Des idées ?

Pour les commentaires, la réponse est encore et toujours la même : le système de commentaires devrait être profondément réécrit, mais je n'ai vraiment pas le temps, pour l'instant c'est un script Perl antédiluvien auquel je ne veux absolument pas toucher parce qu'il est complètement encroûté, donc n'importe quelle amélioration qui touche de près ou de loin aux commentaires est essentiellement impossible.

Popaul le terrien (2024-01-04T17:54:05Z)

Merci pour l'option de changer la largeur des lignes. Pour moi, ça rend le site bien plus agréable à lire sans avoir à redimensionner la fenêtre du navigateur à chaque fois.

J'en profite pour vous souhaiter la bonne année et vous remercier de partager vos réflexions que je lis toujours avec grand plaisir.

Vicnent (2024-01-04T11:20:44Z)

- le '※' pour remonter : très bien
- le coup du change size line : génial
- taille des caractères : parfait.

Cependant que le fait d'avoir mis le '⚙' tout en bas (comprendre, en dessous 20 billets qui s'affichent nativement (les 3 dernières devraient suffire hein…)) sera invisible par 100% des nouveaux lecteurs : j'ai dû moi même faire une recherche (ctrl F) dans la page tellement je trouvais aberrant de ne pas le trouver ni au dessus ni en dessous du billet. C'est typiquement quelque chose qu'on pourrait trouver dans une manchette, mais comme tu ne l'utilises pas… IMHO, le rajouter au format lettre (setting, sizes) sous chaque billet sera bien plus efficace.
Like : <URL: https://photos.app.goo.gl/u1mrPTNkG6zyXuKRA >

L'autre truc en plus, tant qu'on est à travailler la forme, serait d'imaginer pouvoir garder le billet sous les yeux pendant qu'on le commente : soit en ouvrant / dépliant les commentaires en dessous, soit en divisant la page en 2 (non mobile, ok, mais ça on sait globalement le repérer à partir des tailles d'écran > 739px de mémoire) avec à gauche le billet, à droite les commentaires.

jeanas (2024-01-03T10:25:39Z)

[Je prends le tutoiement comme une invitation à faire de même.]

> Comme je lis les définitions, le choix de la police pour afficher ce site n'est pas une « information se rapportant à une personne physique » (définition de « donnée à caractère personnel », article 4(1) du RGPD) ; il n'y a aucun « traitement » effectué sur cette donnée (au sens d'« ensemble d'opérations effectuées ou non à l'aide de procédés automatisés et appliquées à des données ou des ensembles de données », point (2)), ou s'il y en a (à savoir, appliquer la taille choisie au texte visualisé), il l'est par l'utilisateur lui-même, qui est donc le « responsable du traitement » (défini au point (7) comme « la personne physique ou morale, l'autorité publique, le service ou un autre organisme qui, seul ou conjointement avec d'autres, détermine les finalités et les moyens du traitement ». Donc ça fait trois raisons différentes pour lesquelles le RGPD ne s'applique pas ici : il n'y a pas de donnée à caractère personnel, la donnée qu'il y a ne subit aucun traitement, et le responsable du truc qu'on pourrait appeler traitement est l'utilisateur lui-même.

Ok, c'est rassurant. Je n'étais sûrement pas allé lire le texte de loi lui-même (il est assez lisible, en fait, je ne m'y attendais pas).

> Mais indépendamment de la lecture précise, le droit n'est pas complètement hors-sol, heureusement !

Tu sais, parfois, on se pose des questions… Comme le jour où j'ai dû passer une visite médicale obligatoire pour certifier que j'étais apte à exercer comme élève (donc fonctionnaire stagiaire) à l'ENS Paris-Saclay, alors que j'étais rentré en passant un concours… Ou le jour où ma convention de stage en Belgique a dû passer par un « fonctionnaire sécurité-défense » *au ministère de l'enseignement supérieur et de la recherche*, comme si la Belgique était l'Afghanistan, et en dépit de l'espace Schengen… Ou le fait qu'il n'y ait aucun moyen en droit d'auteur français de renoncer à ses droits, d'où les contorsions de la licence CC0… Les États ont fait souvent preuve d'incompétence dans le domaine numérique (cf. eIDAS encore récemment), donc je ne cherche plus à comprendre.

Ruxor (2024-01-03T09:17:05Z)

@jeanas:

Comme je lis les définitions, le choix de la police pour afficher ce site n'est pas une « information se rapportant à une personne physique » (définition de « donnée à caractère personnel », article 4(1) du RGPD) ; il n'y a aucun « traitement » effectué sur cette donnée (au sens d'« ensemble d'opérations effectuées ou non à l'aide de procédés automatisés et appliquées à des données ou des ensembles de données », point (2)), ou s'il y en a (à savoir, appliquer la taille choisie au texte visualisé), il l'est par l'utilisateur lui-même, qui est donc le « responsable du traitement » (défini au point (7) comme « la personne physique ou morale, l'autorité publique, le service ou un autre organisme qui, seul ou conjointement avec d'autres, détermine les finalités et les moyens du traitement ». Donc ça fait trois raisons différentes pour lesquelles le RGPD ne s'applique pas ici : il n'y a pas de donnée à caractère personnel, la donnée qu'il y a ne subit aucun traitement, et le responsable du truc qu'on pourrait appeler traitement est l'utilisateur lui-même.

Bref, on est dans exactement la même situation que si l'utilisateur tape contrôle-plus pour zoomer dans son navigateur : j'ai peut-être écrit le code JavaScript de la fonctionnalité, mais ça ne me rend pas plus responsable du traitement que les auteurs de Firefox ne le sont dans le cas du navigateur : c'est l'utilisateur qui se sert d'un outil mis à sa disposition qui prend la forme d'un bout de code.

Mais indépendamment de la lecture précise, le droit n'est pas complètement hors-sol, heureusement ! Le RGPD a une fonction, qui est de protéger les européens contre la collecte et l'utilisation de leurs données personnelles sans leur consentement. On ne va pas créer des obligations quand ça n'a absolument aucun sens pour ce but, par exemple sur une donnée dont on n'a aucune connaissance ou aucun contrôle. Tu pourrais plus crédiblement argumenter que quand tu croises des gens dans la rue tu retiens leur visage et ceci est un traitement et stockage de données personnelles (le RGPD ne se limite pas au traitement automatisé), donc il faut avertir tous les gens que tu croises et leur demander leur consentement : quand on arrive à des conclusions manifestement absurdes, c'est qu'il y a un os ; le droit n'est pas appliqué par des robots, il est appliqué par des humains.

Je pense d'ailleurs que beaucoup de sites Web qui demandent un consentement pour stocker des données, même dans des cookies, couvrent leur c** de façon inutile et n'auraient absolument pas besoin de consentement (voire qu'ils font exprès d'emmerder les utilisateurs avec des demandes de consentement inutiles pour discréditer le RGPD). En gros, le test essentiel devrait être de savoir si l'utilisateur est identifié (fût-ce pseudonymement) avec les données collectées.

(Ceci ne contredit bien sûr pas le fait que, a contrario. il y a plein de gens qui ne respectent pas du tout leurs obligations découlant du RGPD. Comme quasiment tous les acteurs du système éducatif français… Mais c'est une autre histoire.)

jeanas (2024-01-02T23:19:56Z)

Au fait, je dois ~~~faire l'emmerdeur de service~~~ vous offrir un sujet de rant sur un plateau en argent : il ne faut pas demander un consentement explicite avant de mettre des données en local storage, en vertu des règles transpirant le bon sens du sacro-saint RGPD ?

Je m'étais renseigné sur le sujet il y a quelques années en implémentant un bouton pour désactiver la coloration syntaxique dans une documentation (exemple : <URL:https://lilypond.org/doc/v2.24/Documentation/notation/writing-pitches> ; c'est juste un bête confirm() en JavaScript). J'étais encore plus jeune et bête à l'époque, donc je suis peut-être à côté de la plaque, mais il m'avait semblé qu'il était obligatoire d'obtenir un consentement même pour du local storage, même s'il n'est jamais transmis à un quelconque serveur.

Natacha (2024-01-02T19:52:36Z)

« Un des principes complètement stupides et insupportables du Web est que c'est l'auteur d'une page (ou site) Web qui choisit tous les détails de l'apparence de
celle-ci. »

Et est-ce que tu as essayé de ne *pas* faire du web ? ;-)

Je trouve amusant que l'absurdité de ce principe (et quelques autres du même acabit) a participé à la création du geminispace (<https://geminiprotocol.net/>), espace que je trouve très tentant depuis quelques mois. Si tu ouvrais un accès à ton blog sur gopher ou gemini, j'utiliserais avec enthousiasme un de ces versions plutôt que la page web.

Je comprends bien l'envie de mettre une charge sémantique sur des éléments de style, mais je me demande s'il n'y a pas intérêt à chercher activement à y rester en trouvant dans la diversité unicodienne de quoi porter tout ce qu'on cherche à transmettre. Une sorte de contrainte productive, façon OULIPO, quoi.

Pour ce qui est des changements dont il est question, je n'en avait pas vraiment besoin, surtout avec w3m, mais au cas où ça intéresse quelqu'un, mon réglage préféré sous firefox fixe est la taille de police par défaut (16px) avec 80ch, et sur l'écran 3" de mon Android les 12px par défaut sont trop petits pour mon goût, je préfère 15px ou 16px.

Ruxor (2024-01-02T13:56:36Z)

@Gabriel: Le scrollIntoView() est censé régler un problème dans la version d'hier qui était que si on sélectionnait une taille de police plus grande (ou une taille de ligne plus courte), la page prenant tout d'un coup plus de place verticale, on était tout d'un coup téléporté ailleurs (i.e., plus haut par rapport à la hauteur totale de la page). Maintenant on devrait rester en bas (ça a l'air de marcher, mais je ne sais pas si ma manière de m'y prendre est vraiment la bonne). Évidemment, si on n'a pas vu le problème avec la version antérieure, ce n'est pas frappant !

Gabriel (2024-01-02T13:30:28Z)

Merci pour les changements, cela rend le site bien plus agréable pour moi sur mobile de pouvoir le lire en 16px (avant j'utilisais le mode lecteur de Firefox avec les inconvénients déjà mentionnés). Je ne comprends pas ce que scrollIntoView est censé faire, chez moi les boutons sont tout en bas de la page que le menu soit ouvert ou pas (en cliquant sur la roue dentée) et que les réglages soient par défaut ou pas. Mais ça n'est pas gênant, c'est réglé une fois pour toutes grâce au local storage, je ne pense pas avoir besoin d'y toucher de si tôt.

Cigaes (2024-01-02T13:26:42Z)

Si l'idée de refaire le système de commentaires sort du state vaporware, je (re)nouvelle ma proposition de travailler ensemble à quelque chose qui puisse servir aussi à remplacer l'INN qui tourne sur mon petit serveur.

Mon plan en l'état : API REST, principale implémentation en HTTP+FCGI, front-end en HTML5+JavaScrip, front-end en (F)CGI+HTML, front-end NNTP, messages et canaux identifiés par des clefs cryptographiques courtes.

Anonymous Wombat (2024-01-02T12:31:07Z)

Ce qui me paraît le plus problématique si on retire tout le style sur de blog (par exemple en passant en "mode lecteur"), c'est que David fait souvent usage de passages en petits caractères, qui ont l'air d'être stylés par class="sidenote" dans ses billets techniques, pour indiquer des passages qu'on peut sauter. Si on n'a pas cette information, ces billets doivent être encore plus indigestes. Je ne vois pas de façon évidente de rendre cette information en HTML pur (par exemple de manière qui apparaisse en mode lecteur). L'élément <aside> pourrait peut-être servir à ça, mais sa définition est confuse et de toute façon le mode lecteur n'en fait rien de spécial.

Typhon (2024-01-02T12:14:54Z)

Je pense que c'est vain de vouloir dissocier "contenu" et "forme", personnellement. Le medium textuel est visuel par définition et y aura toujours des gens pour exploiter ce fait de différentes façons.

J'apprécie ce changement personnellement vu que ça fait un moment que je dois zoomer pour lire confortablement le site (presbytie précoce ou problème lié à la résolution vs la taille de la police, je ne sais).

J'en profite pour apporter ma pierre à l'encouragement de la migration du système de commentaires de ce site, il est temps de le changer !

Cigaes (2024-01-02T11:56:55Z)

Avec Firefox, dans about:preferences → General → Fonts, tu as la possibilité de choisir la police par défaut et sa taille. Ça a bien de l'effet sur les sites qui ne précisent pas, le mien par exemple.

La taille du navigateur est un problème difficile, compliqué par l'ergonomie médiocre des logiciels modernes.

Personnellement, j'ai choisi une taille de fenêtre que j'aime bien (1092×769, le choix n'est pas au pixel près), je sais qu'elle convient à peu près pour la plupart des sites — où je ne resterai pas longtemps — et j'ai appris à prédire où la fenêtre s'ouvrirait, il y a la place pour un inspecteur en dessous, etc.

Pour certains sites où la fenêtre est trop petite, j'utilise le gestionnaire de fenêtres pour la maximiser. Pour les sites comme ce blog où elle est trop large — parce qu'il y a beaucoup à lire, c'est dans ce cas que les lignes trop longues deviennent inconfortables, il faudrait la rapetisser.

Mais c'est là qu'arrive l'ergonomie pourrie des logiciels modernes : au lieu d'ouvrir les nouvelles fenêtres à la taille par défaut que j'ai soigneusement configurée, ce crétin de Firefox utilise la taille de sa dernière fenêtre qui a eu le focus. Donc va peut-être m'ouvrir une fenêtre en plein écran parce qu'avant le repas j'avais regardé un truc en grand ; et la fenêtre ne sera même pas considérée comme maximisée par le gestionnaire de fenêtres, donc rétablir sa taille n'est pas possible.

(J'y pense, je devrais me faire un raccourci du WM pour remettre Firefox à sa taille voulue.)

Ruxor (2024-01-02T11:33:20Z)

J'ai fait encore un petit tweak : pour éviter de trop encombrer l'espace visuel, j'ai caché par défaut les boutons de réglage de la taille du texte et de la longueur des lignes derrière un bouton ‘⚙’ qui fait apparaître les autres réglages. J'ai aussi ajouté des scrollIntoView() pour que les boutons restent en vue quand on les utilise.

@Mauvaisours: Je ferai le même changement sur les pages de commentaires, mais, comme je le dis à la fin du billet, c'est ultra-pénible à faire, donc je veux d'abord m'assurer que j'ai vraiment « le bon » JavaScript (que je ne vais pas avoir envie de re-changer deux jours après) avant de répercuter ce changement.

Mauvaisours (2024-01-02T08:16:48Z)

1/ Merci pour tes efforts, c'est très apprécié de mes yeux de presbyte
2/ Ca ne s'applique pas (encore ?) aux pages de commentaires ?

On va faire un peu d'histoire… au début, Tim Berners-Lee prévoyait de faire du HTML un système d'affichage basé sur la sémantique (d'ou les balises de type <address>,<footnote>, …), ce qui laissait l'utilisateur libre de choisir son affichage (et Mosaic le permettait !)

Et puis les commerciaux se sont rendus compte qu'on pouvait faire de la pub avec un site web et on voulu tout controler, ça a été l'essort de cochonneries comme les applets java (heureusement brièvement), puis flash (beaucoup plus longtemps) et du rendu pixel-perfect des pages :( Je le déplore, mais c'est le sens du vent.

kowalsky (2024-01-02T00:25:23Z)

Et bien 100% c'est relatif à … la taille d'un texte par défaut en CSS, c'est à dire la taille "medium" :)

https://www.w3.org/TR/css-fonts-3/#font-size-prop

Et la taille "medium" actuelle équivaut généralement à 16px. "Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em)."

Elle a varié entre 14px, 15px et 16px selon les moteurs de rendu des navigateurs (https://fr.wikipedia.org/wiki/Moteur_de_rendu_HTML) et les années. Et si tu ne la trouves nulle part, c'est parce que c'est encodé directement dans ton navigateur. Avec les autres valeurs par défaut des éléments utilisés pour un affichage sans feuille de style.

En aparté, tu peux remplacer les 100% de la démonstration par les 120% de l'exemple de CSS si cela te perturbe. Mais les deux valeurs en sont pas liées.

Anonymous Wombat (2024-01-01T23:18:07Z)

Cette discussion me paraît assez lunaire : les commentateurs semblent à la fois vouloir dire à David que sa feuille de style est mauvaise à leurs yeux et en même temps qu'il perd son temps inutilement à proposer des moyens de la rendre réglable. Si tout le monde en est à lire ce site autrement qu'avec le style par défaut, c'est bien une preuve qu'il est utile de proposer des réglages, non ?

Ruxor (2024-01-01T22:52:08Z)

Puisque beaucoup de gens se plaignent de la longueur des lignes, j'ai ajouté un jeu de boutons supplémentaires pour régler ça.

@kowalsky:

OK, donc « 100% » est 100% relatif à… quoi, exactement ? Parce que moi je n'ai pas de réglage, ni sur mon fixe ni sur mon mobile, pour choisir cette taille par défaut, et elle est foireuse dans les deux cas. Donc c'est peut-être 100% d'une taille que quelqu'un a choisi, mais ce quelqu'un n'est certainement pas moi, et il n'a pas les mêmes goûts que moi. D'ailleurs, puisque vous suggériez de mettre 120% dans le commentaire daté 2024-01-01T21:38:17+0100, il faut croire que chez vous non plus cette taille n'est pas le meilleur choix.

Ma feuille de style ne sort pas de nulle part. Pendant longtemps je ne précisais aucune taille de police dans le style (on peut vérifier avec l'Internet Archive), justement selon le principe que c'est au navigateur de fournir des valeurs par défaut raisonnables (je suppose que ne rien mettre du tout équivaut à mettre « 100% »), et j'ai fini par céder sous pression des utilisateurs qui se plaignaient. Manifestement c'est impossible de contenter tout le monde, et c'est pour ça qu'il me semble que la seule solution est d'avoir du JavaScript pour que chacun puisse régler comme il veut. Mais c'est bien parce que c'était un compromis laborieux que je ne veux pas toucher à la feuille de style par défaut.

Pareil pour la longueur des lignes : je ne sais pas qui aime lire du texte à 60 caractères par ligne, mais si j'ai un écran 16:9 ce n'est pas pour que le texte soit réduit au quart de sa largeur : si je voulais ça, j'ouvrirais moi-même deux fenêtres de navigateur l'une à côté de l'autre, mais un site comme <URL: http://bettermotherfuckingwebsite.com/ > est vraiment l'exemple-type du site que je considère comme absolument illisible et merdique parce qu'il y a du texte réduit à un ridicule 60 caractères par ligne alors qu'il y a des marges gigantesques inutilisées des deux côtés. Mais visiblement c'est une question de goût : c'est un des principes complètement idiots du Web que ce soit l'auteur du site qui décide de détails pareils et pas le lecteur. D'où un autre bout de JavaScript que je viens de mettre pour les gens qui aiment les lignes courtes et dont je vais m'empresser de ne jamais me servir moi-même.

Florent (2024-01-01T22:52:07Z)

C'est pour ces raisons que j'aime suivre ce blog (et d'autres) directement dans Emacs (avec eww comme navigateur, et elfeed pour le lecteur de flux RSS).

C'est un plaisir incroyable de pouvoir naviguer sur le web avec ses propres configurations. Que cela soit le thème, mais aussi la police, sa taille, ses bindings..etc..

Cigaes (2024-01-01T22:16:15Z)

Merci pour tes efforts.
« "use strict"; », 🤯 JavaScript se prend pour Perl ? On peut faire « "use warnings"; » aussi ?

jeanas (2024-01-01T22:14:17Z)

OK, merci. Je ne savais pas que ça n'existait pas dans Firefox pour Android, c'est vraiment dommage.

> il fut un temps où Apple interdisait à une application iOS d'avoir un autre moteur de rendu HTML que celui d'iOS, mais ça a peut-être changé

Non, ça n'a pas changé malheureusement. Je ne sais même pas comment une chose pareille peut être tolérée par les autorités anti-concurrence. C'est quand même bien pratique d'utiliser Firefox sous iOS parce qu'il synchronise les données du compte (dont mots de passe, réglages et onglets ouverts) avec la version bureau, mais on perd le côté civique de ne pas contribuer aux parts de marché des deux mastodontes WebKit et Blink.

kowalsky (2024-01-01T21:40:02Z)

Justement si, le changement d'unité a son importance :
- Quand tu définis la taille de la police à "14px" (valeur fixe), mon navigateur affiche une police de taille "14px".
- Quand tu définis la taille de la police à "100%" (valeur relative), mon navigateur affiche 100% de l'unité de police que j'ai choisie d'utiliser. Dans mon cas ce sera affiché en "18px", ce qui me convient alors que pour d'autres ce sera une autre valeur.

En utilisant une unité relative pour la taille de la police, tu permets à tes lecteurs de choisir celle leurs convenant le mieux sans avoir rien de plus à faire :)

Ruxor (2024-01-01T21:13:53Z)

@jeanas: Une différence c'est que ces nouveaux boutons zooment le texte uniquement mais pas les images. Mais, la principale différence c'est que ces nouveaux boutons ne dépendent pas du fait qu'on soit sous iOS (Firefox sous Android n'a pas de zoom comme Firefox sur PC ; je ne sais d'ailleurs pas dans quelle mesure Firefox sous iOS est lié à Firefox : il fut un temps où Apple interdisait à une application iOS d'avoir un autre moteur de rendu HTML que celui d'iOS, mais ça a peut-être changé).

jeanas (2024-01-01T21:05:07Z)

Sur Firefox pour iOS, j'ai un bouton « Zoom » dans le menu à trois barres horizontales (hamburger). Ça semble augmenter la taille du texte sans pour autant le faire déborder comme le fait le zoom avec les doigts. Expérimentalement, ça semble s'appliquer par domaine (pas par site ni par onglet ni par page), ce qui est parfait. En somme, sans y connaître grand-chose, j'ai l'impression que c'est une sorte d'équivalent du « Contrôle-plus » sur bureau. Est-ce que ce que le nouveau bouton fait quelque chose de différent ?

Ruxor (2024-01-01T20:51:57Z)

@kowalsky: Je ne comprends absolument pas le sens de tout ce commentaire. Je sais bien changer la taille du texte en CSS sans JavaScript, évidemment ! Le CSS de ce site n'est pas apparu par l'opération du Saint-Esprit, c'est moi qui l'ai écrit, en fonction de ce que je trouve le mieux. Ce que je ne vois pas comment faire sans JavaScript, c'est de laisser chaque lecteur choisir la taille qui lui convient personnellement. C'est bien ce dont je me plains : chacun a des goûts différents en matière de taille de texte, de longueur de ligne, de couleurs, etc. — c'est complètement absurde de chercher une feuille de style qui convienne à tout le monde. Notamment, ce n'est pas le fait d'utiliser une unité différente qui va régler ce problème.

kowalsky (2024-01-01T20:38:17Z)

Pourquoi rajouter du JavaScript ? Je dirais que le plus simple serait de laisser le lecteur utiliser le paramétrage de la police de son navigateur. Cela se fait simplement avec du CSS en utilisant les unités relatives comme "em" ou "%" plutôt que les "pixel" pour gérer la taille du texte.

Essaye cela :
body {
font-size: 120%;
line-height: 1.6;
}
et retire les lignes "font-size" des "body" de tes media queries :)

En complément, pour l'affichage sur mobile, j'utilise la commande meta viewport suivante qui autorise explicitement les modifications d'interface :
(meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0")
(remplacer les parenthèses par les symboles "inférieur à" et "supérieur à")

Sinon pour moi le plus agaçant sur ton site (je me permets de te l'indiquer vu que ce billet est destiné au bien être de tes lecteurs) c'est la largeur de ta page : petite écran -> ligne à lire courte, grand écran -> ligne à lire très longue… Or ce n'est pas l'idéal pour beaucoup.

Définir une largeur maximale de la zone de lecture aide à cela. A nouveau l'on utilisera des unités relatives comme les "em" ou les "ch".

A titre d'exemple, remplace tes directives de style par ce code minimaliste et regarde le résultat dans ton navigateur puis ton mobile. Tu serais surpris.

body {
max-width: 60ch;
margin: 3rem auto 10rem;
padding: 0 0.5rem;
font-size: 120%;
line-height: 1.6;
}

h1, h2, h3 {
line-height: 1.2;
}

img {
max-width: 100%;
}

(source http://bettermotherfuckingwebsite.com/)

Ensuite il ne te reste plus qu'à adapter ta feuille de style actuelle pour améliorer le rendu de ton site tout en conservant ton graphisme personnel.

Et pour aller plus loin sur le sujet, je ne peux que t'inviter à te renseigner plus sur l'accessibilité du web, si ce n'est déjà fait :)
https://www.w3.org/WAI/fundamentals/accessibility-intro/fr
https://design-accessible.fr/checklist

Sinon, de toute façon, que tu t’embêtes à rajouter du JavaScript ou autres fioritures, quand je passe lire chez toi, j'utilise le mode lecture de Firefox (touche F9) pour mon confort de lecture ;)

Ruxor (2024-01-01T19:00:54Z)

@ianux: Non, parce que, comme je l'explique dans mon billet, c'est important que l'auteur du site puisse quand même appliquer certains éléments de style, or le mode lecture (qui d'ailleurs a l'air cassé en ce moment sur Firefox mobile en mode privé ?) tue complètement tous les éléments de style, par exemple le fait que des bouts des billets apparaissent en plus petits caractères.

ianux (2024-01-01T18:08:03Z)

Tu as l'ai d'avoir dépensé beaucoup d'énergie pour un problème qui n'en est pas vraiment un. Si certains lecteurs (dont je fais partie) ne sont pas satisfaits par le rendu de tes pages, ils peuvent toujours utiliser le mode lecture du navigateur qui, outre un rendu de base correct, notamment sur mobile, permet de changer facilement la taille du texte.


You can post a comment using the following fields:
Name or nick (mandatory):
Web site URL (optional):
Email address (optional, will not appear):
Identifier phrase (optional, see below):
Attempt to remember the values above?
The comment itself (mandatory):

Optional message for moderator (hidden to others):

Spam protection: please enter below the following signs in reverse order: 0a4e54


Recent comments