Journal Une nouvelle feuille de style orientée lecture

Posté par  (site web personnel) .
Étiquettes :
44
1
mar.
2011

'lut,

Je viens de finir ma nouvelle css pour linuxfr :

Titre de l'image

Ses objectifs : Faciliter la lecture, pour cela j'ai fait une seule colonne et j'ai caché beaucoup d'éléments perturbants, principalement :

  • les tags,
  • les avatars,
  • quelques trucs par-ci par-là

Le menu principal est masqué sur le côté droit, il apparait lorsque la souris survole le bandeau gris qui flotte en haut à droite. J'ai essayé de n'utiliser aucune image. Juste une pour indiquer les entrées qui sont nouvelles (icône sur fond vert) ou qui ont de nouveaux commentaires (icône sur fond gris). Mais j'aimerai trouver une autre solution de mise en évidence, mais je suis sec. Une idée ? Dans les enfilades, les nouveaux commentaires ont un titre en rouge :

Titre de l'image

Pour l'essayer, le lien : http://arliguy.info/css/spasibo.css

Il y a encore quelques petites finitions à apporter, mais dans l'ensemble, ça me va.

En tout cas, par rapport à l'ancienne version de LinuxFR, il est maintenant beaucoup plus simple de faire une feuille de style personnelle. La structure du HTML est plus claire et homogène. Surtout on part avec une mise en page vide. Je vous encourage à jouer avec les feuilles de style personnelles, cela permet de tester et d'apprendre plein de choses.

Merci à LinuxFR.org et à tous les contributeurs de tous niveaux. Je ne suis qu'un lecteur majoritairement passif (d'où ma css plus orientée lecture) mais c'est une telle source d'informations... pourvu que ça dure !

  • # Et la largeur du texte ?

    Posté par  (site web personnel) . Évalué à 10.

    Cool, enfin quelque chose d'à-peu-près lisible !

    La seule chose qui manque, à mon avis, c'est de rétrécir la largeur du texte à environ 60 ou 80 caractères. Cela évite de déplacer le regard sur une ligne lorsqu'on lit, c'est beaucoup plus reposant et on lit beaucoup plus vite (c'est ce que font les journaux avec leurs colonnes, c'est ce qu'essaye de faire LaTeX avec ses grosses marges). Alors évidemment, ça paraît complètement aberrant sur nos stupides écrans ultra-wide d'avoir une colonne de texte avec deux gros blancs de chaque côté, et de devoir scroller pour lire tout le texte, mais au final, c'est tellement confortable !

    (Sinon, j'ai un bug avec le formulaire pour commenter : il y a un trou d'une dizaine de ligne entre les boutons « B », « I », « ul », etc et le textarea du commentaire. Navigateur : luakit/webkit)

    • [^] # Re: Et la largeur du texte ?

      Posté par  (site web personnel) . Évalué à 1.

      C'est aussi vrai pour la nouvelle CSS par défaut. Sur les grand écrans le texte s'étale sur toute la largeur et c'est un peu fatigant pour les yeux.

    • [^] # Re: Et la largeur du texte ?

      Posté par  . Évalué à 0.

      c'est de rétrécir la largeur du texte à environ 60 ou 80 caractères.

      Tu consulte linuxfr sur ton minitel ?

      • [^] # Re: Et la largeur du texte ?

        Posté par  . Évalué à 8.

        Ben tu sais, dans les boulangeries toussa....

      • [^] # Re: Et la largeur du texte ?

        Posté par  (site web personnel) . Évalué à 4.

        Tu as lu son explication au moins ? c'est pas bête du tout, moi aussi je trouve ça super pénible de parcourir toute la largeur de mon 24' pour lire un texte...

        • [^] # Re: Et la largeur du texte ?

          Posté par  (site web personnel) . Évalué à 8.

          c'est pas bête du tout, moi aussi je trouve ça super pénible de parcourir toute la largeur de mon 24' pour lire un texte...

          C'est justement une des choses que j'aimais dans l'ancien LinuxFr : utiliser mon écran. Contrairement à tous ces sites qui me force la largeur de la page. Bon, dès que je suis motivé, je regarde la CSS pour virer cette limitation, c'est super pénible d'avoir une page qui se permet de choisir la largeur à ma place.

          Tu as lu son explication au moins ?

          Oui, et je vois pas le rapport : le web a l'avantage de s'adapter au navigateur, si tu veux des colonnes courtes, ben tu dis pas à ton navigateur d'être en grand sur ton écran, bref ne lui dit pas le contraire de ce que tu veux, et laisse le texte s'adapter à la largeur que tu indiques avec la fenêtre de ton navigateur.

          • [^] # Re: Et la largeur du texte ?

            Posté par  . Évalué à 7.

            Tu devrais essayer Reader.

          • [^] # Re: Et la largeur du texte ?

            Posté par  . Évalué à -2.

            Tu devrais essayer Reader.

            • [^] # Re: Et la largeur du texte ?

              Posté par  . Évalué à 7.

              Bon, on va regarder K2000 !

              Article Quarante-Deux : Toute personne dépassant un kilomètre de haut doit quitter le Tribunal. -- Le Roi de Cœur

          • [^] # Re: Et la largeur du texte ?

            Posté par  (site web personnel) . Évalué à 8.

            Oui, et je vois pas le rapport : le web a l'avantage de s'adapter au navigateur, si tu veux des colonnes courtes, ben tu dis pas à ton navigateur d'être en grand sur ton écran, bref ne lui dit pas le contraire de ce que tu veux, et laisse le texte s'adapter à la largeur que tu indiques avec la fenêtre de ton navigateur.

            T'es sérieux là ? Tu me proposes vraiment de changer la taille de mon navigateur en fonction du contenu du site que je visite ?
            Tu ne te demandes pas justement pourquoi l'immense majorité des sites qui proposent du contenu textuel limitent la largeur des colonnes de texte ?

        • [^] # Re: Et la largeur du texte ?

          Posté par  . Évalué à 1.

          Tu es myope ou quoi ?
          Placé à 60 cm de mon écran, je n'ai absolument pas besoin de bouger la tête pour lire une ligne complète !
          J'espère ne pas être irrespectueux mais je ne comprends pas ton problème : il faut travailler ton empan visuel si tu es handicapé à ce point.

          • [^] # Re: Et la largeur du texte ?

            Posté par  (site web personnel) . Évalué à 6.

            Y'a pas que les problèmes de rotation de têtes ou de globes oculaires mais également la facilité à passer à la ligne suivante. Plus une ligne est longue et moins il est rapide pour le cerveau de le faire.
            Si ton écran était long de 2 mètres en gardant la même hauteur, tu verrais un peu mieux le problème, non ?
            Et bien y'a un juste milieu. Penser que le texte devrait systématiquement prendre toute la largeur disponible dans toutes les conditions, c'est une idée séduisante sur le plan de l'adaptabilité au support visuel (écran de PC, de smartphone, etc) mais en pratique non-ergonomique.
            Et avec les écrans larges qui envahissent nos bureaux, c'est une problématique tout-à-fait légitime.

          • [^] # Re: Et la largeur du texte ?

            Posté par  (site web personnel) . Évalué à 4.

            Tu es myope ou quoi ?

            Non, je ne crois pas, au contraire ;-)

            On ne m'a jamais diagnostiqué aucun problème de vue, merci de ta sollicitude ! Et mon empan visuel me convient d'ordinaire plutôt bien : j'arrive à lire un bouquin de poche paragraphes par paragraphes, sans avoir à bouger les yeux pour lire chaque ligne.

            Mais là, sur un écran 24", à environ 60 cm aussi, c'est vraiment pas confortable.

    • [^] # Re: Et la largeur du texte ?

      Posté par  (site web personnel) . Évalué à 6.

      Le mieux serait de limiter à 72 caractères en commençant le texte au sixième...

      PS : jolie CSS et je plussoie le fait de pouvoir choisir la largeur du texte.

    • [^] # Re: Et la largeur du texte ?

      Posté par  . Évalué à 10.

      Alors évidemment, ça paraît complètement aberrant sur nos stupides écrans ultra-wide d'avoir une colonne de texte avec deux gros blancs de chaque côté

      Sinon il y a la solution de ne pas mettre la fenêtre en plein écran.

      Tous les nombres premiers sont impairs, sauf un. Tous les nombres premiers sont impairs, sauf deux.

      • [^] # Re: Et la largeur du texte ?

        Posté par  . Évalué à 10.

        Le problème est qu’il y a des sites sur un, deux ou trois colonnes. Il faut alors adapterkla taille de la fenêtre à chaque nouveau site consulté. Ça devient vite lourd, alors qu’une taille maximale de largeur de colonne corrige le tir.

    • [^] # Re: Et la largeur du texte ?

      Posté par  (site web personnel) . Évalué à 8.

      Pour modifier cela, tu peux faire une css qui inclue celle-ci et tu modifies l'attribut max-width sur la classe content avec ce que tu veux, par exemple :

      @import "http://arliguy.info/css/spasibo.css" screen;

.content {
    max-width: 800px;
}

      A toi de trouver la largeur maximale que tu tolères. Cela ne limite que la taille maximale des zones de contenu, je pense que ça doit répondre à ton besoin, sans pour autant limiter la largeur de tout le reste.

      Si tu veux essayer, j'en ai mis une : http://arliguy.info/css/spasibo-small-width.css

      Pareil pour les autres remarques plus bas :

      C'est l'avantage des CSS, on peut faire plein plein de choses et composer avec l'existant :)

    • [^] # Re: Et la largeur du texte ?

      Posté par  . Évalué à 3.

      Mettre le texte en colonnes:
      https://developer.mozilla.org/fr/Colonnes_CSS3 (Pour webkit: http://www.quirksmode.org/css/multicolumn.html)

      Pour une démo, allez sur ce lien et redimensionnez votre fenêtre: http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html

    • [^] # Re: Et la largeur du texte ?

      Posté par  (site web personnel) . Évalué à 7.

      Ah non. C'est du web. Ca doit s'adapter à l'affichage. Si je veux que ça soit moins large, je redimensionne ma fenêtre, si je veux que ça soit écrit plus gros, j'augmente la taille des polices, si j'ai un tout petit écran, ça sera plus étroit et plus haut, etc. Sinon autant faire des PDF !

      Et si j'ai un autre lien à ouvrir et que je le veux dans un cadre plus large, je peux l'ouvrir dans une nouvelle fenêtre.

      C'est mon avis, que je partage.

      Python 3 - Apprendre à programmer dans l'écosystème Python → https://www.dunod.com/EAN/9782100809141

    • [^] # Re: Et la largeur du texte ?

      Posté par  (site web personnel) . Évalué à 0.

      Sinon, j'ai un bug avec le formulaire pour commenter : il y a un trou d'une dizaine de ligne entre les boutons « B », « I », « ul », etc et le textarea du commentaire. Navigateur : luakit/webkit

      Cette anomalie d'affichage est corrigée normalement.

  • # Critiques

    Posté par  (site web personnel) . Évalué à 7.

    C'est pas mal mais il y a quelques problèmes évidents.
    1. La tribune de modération n'est plus visible pour les modérorelecteurs.
    2. La police de caractère est franchement trop grosse.
    3. Je ne vois plus la zone de recherche textuelle qui se trouve normalement en haut à droite.

    • [^] # Re: Critiques

      Posté par  (site web personnel) . Évalué à 1.

      La tribune de modération n'est plus visible pour les modérorelecteurs

      Ça je ne sais pas ce que c'est que la tribune de modération... Mais bon, j'avais prévenu : C'est une css orientée lecture, alors j'ai peut-être sabré des éléments utiles pour d'autres usages.

      La police de caractère est franchement trop grosse

      Dans un autre commentaire, j'ai mis des liens vers une version avec taille de texte réduite. Sinon comme expliqué plus haut, changer la taille est relativement simple

      Je ne vois plus la zone de recherche textuelle qui se trouve normalement en haut à droite

      Elle fait partie des éléments que j'ai supprimé... Je ne l'utilise jamais ! Et je ne sais pas comment la présenter.

      • [^] # Re: Critiques

        Posté par  . Évalué à 1.

        Opacity:20% et 100% au survol ?

  • # bravo

    Posté par  . Évalué à 3.

    je l'ai adoptée, j'aime beaucoup

  • # Génial

    Posté par  . Évalué à 3.

    Je cherchais justement un moyen d'améliorer la lecture de LinuxFR sur mon smartphone (Android), je pense que je vais repartir de cette version. Il y a encore des truc bizarre, comme la largeur totale qui est plus importante que celle de l'écran, mais c'est déjà un bon début. Et le menu aussi ne peut pas être géré de cette façon, vu qu'il n'y a pas de pointeur et de survol possible - d'ailleurs il apparaît en entier, complètement à droite de la page. Faut juste que je trouve un peu de temps...

    • [^] # Re: Génial

      Posté par  (site web personnel) . Évalué à 2.

      Je pensais m'y mettre aussi vu que je lis le site le matin dans le train depuis mon smartphone. Surtout que certains liens son tellement proche qu'en voulant lire un commentaire replié je "moinsse" le commentaire du dessus (ce matin j'ai pertinenté un commentaire de cette manière).

      "It was a bright cold day in April, and the clocks were striking thirteen" - Georges Orwell

      • [^] # Re: Génial

        Posté par  . Évalué à 2.

        C'est donc pour ça que l'on a autant de karma dans cette nouvelle version !

    • [^] # Re: Génial

      Posté par  (site web personnel) . Évalué à 1.

      Je pensais aussi essayer de l'adapter pour mon androphone, mais pas dans l'immédiat. Si tu en fais une, n'oublie pas de la partager ! ça pourrait servir :)

      Je pense que la largeur qui dépasse celle de l'écran peut venir des barres en haut de l'écran et du menu mis sur la droite. En simplifiant cela, ça devrait mieux passer.

  • # Police avec empattements

    Posté par  . Évalué à 3.

    J'ai souvent pu lire que les polices avec empattements étaient à éviter pour la lecture sur écran où elles diminuent la clarté du texte, contrairement à la lecture sur papier où elles facilitent la lecture. Je partage d'ailleurs cet avis...

    Serait-il donc possible d'en faire une variante avec une police sans empattement?

  • # Bravo mais léger soucis

    Posté par  (site web personnel) . Évalué à 1.

    Je l'ai mis en place et adopté !

    Ça fatigue moins de lire des gros caractères je trouve et comme dit plus haut une largeur moins grande serait pratique (aussi quelle idée de mettre le navigateur en plein écran ?)

    Sinon le soucis technique c'est le nombre de commentaire qui est en dehors du cadre sur Firefox 4 beta 11. Dans ton exemple, tu as une image avec un 103 (en rouge) dans un cadre blanc. Dans mon cas, le chiffre est à la droite du cadre.

    • [^] # Re: Bravo mais léger soucis

      Posté par  (site web personnel) . Évalué à 1.

      Il me faut trouver une autre solution pour mettre en évidence le nombre de commentaires de toute façon. La solution actuelle pose des pbm de chevauchement quand les titres prennent toute la largeur ou en redimensionnant/réduisant la fenêtre du navigateur. J'en profiterai pour tester avec FF4

      • [^] # Re: Bravo mais léger soucis

        Posté par  (site web personnel) . Évalué à 1.

        Merci pour la mise à jour du thème !

        Par contre, je préférais les bords arrondis. Mais là au moins on voit la différence entre un sujet lu et non lu ! Ça prend bien la largeur de la fenêtre c'est bien pour lire et agréable.

        Y'a un moyen de faire remonter ce sujet ?

        • [^] # Re: Bravo mais léger soucis

          Posté par  (site web personnel) . Évalué à 0.

          Par contre, je préférais les bords arrondis.

          Je crois que moi aussi je préférais les bords arrondis ! Dans une prochaine màj je vais les rajouter je pense.

          Si tu as d'autres remarques, je suis preneur.

          Y'a un moyen de faire remonter ce sujet ?

          Je ne sais pas. Je referai un journal peut être quand je l'aurai finie. Je voudrai ajouter une gestion des petits écrans, lorsqu'on accède à linuxfr depuis un smartphone ou périphérique du genre.

    • [^] # Re: Bravo mais léger soucis

      Posté par  (site web personnel) . Évalué à 0.

      C'est corrigé le problème avec FF4

  • # Les screenshots sont-ils redimensionnés ?

    Posté par  . Évalué à 2.

    Il manque des lignes de pixels en haut ou en bas des lignes de texte un peu partout.

    Je trouve le rendu du texte assez exécrable. C'est dû à un rendimensionnement du screenshot (iciavec un Windows sous la main c'est propre) ou bien c'est encore le hinting de Xorg qui fait des siennes ?

    BeOS le faisait il y a 20 ans !

  • # Avatar en SD (suppression définitive)

    Posté par  . Évalué à 6.

    Il est désormais possible (depuis quand ?) de choisir de ne plus afficher les avatars dans ses paramètres perso. Cela rend le masquage des avatars en CSS inutile, en plus d'alléger la page.

    The capacity of the human mind for swallowing nonsense and spewing it forth in violent and repressive action has never yet been plumbed. -- Robert A. Heinlein

  • # Presque irréprochable.

    Posté par  . Évalué à 1.

    Le thème est tellement simple qu'il en est attirant!
    Bon choix dans les tons, moi qui suis assez sensible à la persistance rétinienne, ça fait plaisir de ne pas avoir le texte gravé dans mes yeux!

    Par contre peut mieux faire pour le menu supérieur et celui de droite. En fait, pour celui du haut je n'ai pas l'impression qu'il s'agisse de liens à cliquer, faudrait plus "marquer" la fonctionnalité. Quant au menu de droite, c'est plutôt disgracieux.

    • [^] # Re: Presque irréprochable.

      Posté par  (site web personnel) . Évalué à 0.

      Pour le menu du haut, il y a quand même l'élément actif qui est souligné et un changement au survol. Mais je vais essayer de voir si je ne peux pas changer un peu. Sinon pour le menu de droite, tu as une idée ? Je ne sais pas trop quoi en faire de ce menu...

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.