Suivi — Feuilles de style (CSS) les formules mathématiques dégradent la lisibilité des messages sous certains navigateurs

• # Captures

  Posté par Benoît Sibaud (site web personnel) le 24 janvier 2018 à 19:25. Évalué à 4 (+0/-0). Dernière modification le 24 janvier 2018 à 19:53.

  

  Debian Sid et firefox 57.0.4-1

  

  Debian Sid et chromium 63.0.3239.84

  

  Firefox, computed style, div class content

  border-left-color: rgb(147, 135, 123);
  border-left-style: solid;
  border-left-width: 1px;
  color: rgb(0, 0, 0);
  font-family: sans-serif;
  font-size: 14.0833px;
  line-height: 21.1333px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 5px;
  padding-left: 5px;
  text-align: justify;
  

  Chromium, computed style, div class content

  border-left-color:rgb(147, 135, 123);
  border-left-style:solid;
  border-left-width:1px;
  color:rgb(0, 0, 0);
  display:block;
  font-family:sans-serif;
  font-size:14.08px;
  height:476.781px;
  line-height:21.12px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin-bottom:5px;
  padding-left:5px;
  text-align:justify;
  width:855.969px;
  

  Avec ou sans justification du texte, on voit assez bien que Firefox intègre les formules dans chaque phrase, tandis que Chromium découpe avant/après chaque formule (et que la justification aère énormément les bouts de phrase du coup).

  Première image :

  Firefox

  border-bottom-color: rgb(0, 0, 0);
  border-bottom-style: none;
  border-bottom-width: 0px;
  border-image-outset: 0;
  border-image-repeat: stretch stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-color: rgb(0, 0, 0);
  border-left-style: none;
  border-left-width: 0px;
  border-right-color: rgb(0, 0, 0);
  border-right-style: none;
  border-right-width: 0px;
  border-top-color: rgb(0, 0, 0);
  border-top-style: none;
  border-top-width: 0px;
  color: rgb(0, 0, 0);
  display: inline;
  font-family: sans-serif;
  font-size: 14.0833px;
  line-height: 21.1333px;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  max-height: 14.0833px;
  max-width: 100%;
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  

  Chromium

  border-bottom-color:rgb(0, 0, 0);
  border-bottom-style:none;
  border-bottom-width:0px;
  border-image-outset:0px;
  border-image-repeat:stretch;
  border-image-slice:100%;
  border-image-source:none;
  border-image-width:1;
  border-left-color:rgb(0, 0, 0);
  border-left-style:none;
  border-left-width:0px;
  border-right-color:rgb(0, 0, 0);
  border-right-style:none;
  border-right-width:0px;
  border-top-color:rgb(0, 0, 0);
  border-top-style:none;
  border-top-width:0px;
  color:rgb(0, 0, 0);
  display:inline;
  font-family:sans-serif;
  font-size:14.08px;
  height:14.0781px;
  line-height:21.12px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  margin-top:0px;
  max-height:14.08px;
  max-width:100%;
  text-align:left;
  width:935.969px;
  

• # Corrigé

  Posté par Bruno Michel (site web personnel) le 24 janvier 2018 à 20:19. Évalué à 5 (+0/-0).

  

  Cf https://github.com/linuxfrorg/linuxfr.org/commit/807235970aeb2e2cc4dd176061299be0bacdf1b8

Envoyer un commentaire

Suivre le flux des commentaires

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