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

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 ?

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 !

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

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.

- 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.

[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.

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.

« 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.

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.

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.

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.

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 !

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.)

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.

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.

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 ?

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..

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

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.

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 :)

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 ?

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 ;)

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.