Re: [Trad Gnu] Largeur du texte sur gnu.org

[Jean-Christophe Helary <jean.christophe.helary AT traduction-libre.org>]

> On Aug 21, 2021, at 22:08, Jean-Christophe Helary 
> <jean.christophe.helary AT traduction-libre.org> wrote:
> 
> 
> 
>> On Aug 21, 2021, at 21:32, Thérèse Godefroy <tgodefroy AT april.org> wrote:
>> 
>> Le 21/08/2021 à 14:16, Jean-Christophe Helary a écrit :
>>> 
>>> 
>>>> On Aug 21, 2021, at 21:05, Thérèse Godefroy <tgodefroy AT april.org> wrote:
>>>> 
>>>> Qu'en pensez-vous ? Est-ce que vous préférez lire [1], ou [2] ?
>>>> Cela ferait avancer le schmilblick et éviterait quelques discussions
>>>> stériles si le plus de monde possible exprimait sa préférence sur
>>>> <webmasters AT gnu.org>, y compris des gens que vous connaissez mais ne
>>>> sont pas sur trad-gnu. Si c'est en français, je m'efforcerai de traduire.
>>> 
>>> Dans un premier temps, il y a une question bête d’accessibilité. Le 
>>> regard humain est une limitation physique à toutes questions de liberté. 
>>> Et dans le cas présent, je suis certain qu’on peut trouver quantité 
>>> d’études qui montrent qu’une page est mieux lue quand elle demande un 
>>> effort minimum de déplacement des yeux.
>>> 
>>> Pour les questions de liberté, on peut rétorquer qu’il s’agit d’une CSS à 
>>> modifier et que par défaut le document devrait avoir une largeur 
>>> raisonnable (j’imagine que ce sont les mêmes qui au contraire vont râler 
>>> parce qu’une page de code n’est pas coupée à 80 caractères…)
>>> 
>> 
>> Merci de t'exprimer, Jean-Christophe. Je suis tout à fait d'accord avec
>> toi. Et pas mal de développeurs également puisqu'ils ont changé le CSS
>> des manuels GNU de leur propre chef. Ils ont même choisi une largeur de
>> texte insuffisante qui laisse dépasser pas mal de lignes de code. Le GNU
>> dogmatique dont je parlais refuse d'ailleurs d'utiliser ce CSS, ce qui
>> fait que les manuels dont il s'occupe sont illisibles.
>> 
>> Est-ce que tu voudrais poster sur webmasters@? Un grand merci d'avance.
> 
> Est-ce que tu as les pages en question ? À part celle que tu a donnée ?
> 
> Je sais que les manuels emacs sont plutôt dans le style « libres ». J’avais 
> tenté de proposer un fichier CSS il y a un temps (je crois que c’était en 
> 2018), après avoir travaillé pour voir si texinfo pouvait faire des sorties 
> plus intéressantes en html. C’est un travail qui reste inachevé, mais que 
> je garde dans un coin pour quand j’ai le temps.
> 
> JC

Et d’ailleurs, pour ceux que ça intéresse, voici le diff pour faire les 
manuels et le fichier css qui va avec.

J’avais très envie d’essayer des techniques « avancées » de CSS. Normalement 
le fichier actuel donne des résultats satisfaisants sur petit écran 
également, j’ai essayé de faire du « responsive ». Le seul pb c’est la sortie 
HTML de texinfo qui ne donne pas assez d’info sur les balises, et le fait 
qu’on ne puisse pas marquer le code lisp de façon efficace pour avoir de la 
coloration de syntaxe (Gavin semble préférer un traitement post sortie, mais 
c’était il y a 2-3 ans déjà). 

JC

Attachment: doc.html.diff
Description: Binary data

/* html / body */

html {
    background-color: #f2efe4;
}

html, body {
    font-size: 1em;
    text-align: left;
    text-decoration: none;
    font-family: sans-serif;
}

body {
    background-color: white;
    border-color: #c0c0c0;
    border-style: solid;
    border-width: .1em;
    margin: 0;
    padding: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 74.92em;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: .5em;
    width: 50em;
}

div.header {
    position: -webkit-sticky;
    position: sticky;
    top: 5px;
    background-color: #f2efe4;
    -webkit-border-radius: .3em;
    border-color: #d4cbb6;
    border-radius: .3em;
    border-style: solid;
    border-width: 1px;
    margin: .1em;
}

@media (max-width: 40em), (max-height: 40em) and (orientation:landscape) {
    div.header {
	position: static;
	border-color: brown;
	width: fit-content;
    }
    div.header p {
	visibility:hidden;
	text-align: left;
	margin:0em .2em;
	padding:0em;
    }
    div.header p a {
	visibility:visible;
	display:block;
	margin:-1em;
    }
    div.header p a[rel=next]::before {
	content: " → ";
    }
    div.header p a[rel=prev]::before {
	content: " ← ";
    }
    div.header p a[rel=up]::before {
	content: " ↑ ";
    }
    div.header p a[rel=contents]::before {
	content: " ⟰ ";
    }
    div.header p a[rel=index]::before {
	content: " ⟱ ";
    }
}



/* general line height */
p, pre, li, dt, dd, table, code, address {
    line-height: 1.3em;
}

/* headers */

h1, h2, h3, h4, h5, h6 {
    color: #333;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.0em;
    margin-bottom: 1em;
}

h5, h6 {
    color: #222;
}

h4 + h3 {
    font-size: 1em;
}

/* box P PRE */
p, pre {
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
}

pre {
    overflow: auto;
    padding-bottom: .3em;
}

pre.menu-comment {
    margin: 0;
    padding-top: 1.3em;
}

/* UL OL */

ul, ol {
    margin-left: 1.5%;
    margin-right: 1.5%;
    list-style-position: outside;
}

ol {
    list-style-style: decimal;
}

ul {
    list-style-style: square;
}

ul ul, ol ul {
    list-style-style: circle;
}

.contents ul {
    font-weight: bold;
    list-style-image: none;
    list-style-style: none;
}

.shortcontents ul {
    font-weight: bold;
}

.contents ul ul, .shortcontents ul ul {
    font-weight: normal;
}

li {
    list-style-image: inherit;
    list-style-position: inherit;
    list-style-type: inherit;
}

ul li {
    margin-bottom: .5em;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: .5em;
}

ol li {
    margin: 1em;
}

ol ul li {
    margin-bottom: .5em;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: .5em;
}

ul li p, ul ul li {
    margin-bottom: .3em;
    margin-top: .3em;
}

/* DL */

dl {
    border-color: #d4cbb6;
    border-radius: .3em;
    border-style: solid;
    border-width: 1px;
    padding: 1em;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
}

dt {
    color: #222;
    margin-bottom: .5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: .5em;
}

dt strong {
    color: #941751;
}

dt em {
    border-bottom-color: black;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

dd {
    margin-bottom: 1em;
    margin-left: 3%;
    margin-right: 3%;
    margin-top: .5em;
}

dd p {
    margin-bottom: .5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: .5em;
}

/* TABLE */

th {
    font-weight: bold;
    padding-bottom: .3em;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .3em;
    text-align: center;
}

table.cartouche td {
    padding: 1.5em;
}

td {
    padding-bottom: .2em;
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .2em;
}

td code {
}

/* various selectors */
abbr,acronym {
    border-bottom-color: #000;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    text-decoration: none;
    cursor: help;
}

code {
    border-bottom-color: black;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    text-decoration: none;
}

p code {
    border-bottom: none;
    font-weight: bold;
    color: crimson;
}

var {
    border-bottom-color: orange;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    text-decoration: none;
    font-style: italic;
}

p var {
    border-bottom: none;
    font-weight: bold;
}

code var {
    border-bottom-color: black;
}

samp {
    color: chocolate;
    /* border-bottom-color: blue; */
    /* border-bottom-style: solid; */
    /* border-bottom-width: 1px; */
    text-decoration: none;
}

samp var {
    border-bottom-color: blue;
}

p samp {
    border-bottom: none;
    font-weight: bold;
}

p em {
    color: chocolate;
    /* border-bottom-color: red;
    border-bottom-style: solid;
    border-bottom-width: 1px; */
}

kbd {
    font-weight: bold;
    color: #942193;
}


del {
    text-decoration: none;
    text-decoration: line-through;
}

address {
    font-style: inherit;
    font-weight: inherit;
    margin-bottom: 1em;
}

caption {
    margin-bottom: .5em;
    text-align: center;
    text-align: left;
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

blockquote {
    margin-left: 1.5%;
    margin-right: 1.5%;
    font-style: normal;
}

img {
    max-width: 100%;
}

hr {
    background-color: #ede6d5;
}

.center, .c {
    text-align: center;
}

.nocenter {
    text-align: left;
}

.underline {
    text-decoration: underline;
}

.nounderline {
    text-decoration: none;
}

.no-bullet {
    list-style-image: none;
    list-style-style: none;
}

/* header - node */
.header, .node {
    margin-bottom: 0;
    margin-left: -1em;
    margin-right: -1em;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
}

.header p, .node p {
    line-height: 2em;
}

.header a, .node a {
    display: inline-block;
    line-height: 2em;
}

.header a:hover, .node a:hover {
    background-color: #f2efe4;
}

/* examples */
div.example {
    -webkit-border-radius: .3em;
    background-color: #fffff0;
    border-color: #d4cbb6;
    border-radius: .3em;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 1em;
    margin-left: 3%;
    margin-right: 0;
    margin-top: 1em;
    padding-bottom: .4em;
    padding-left: 1.2em;
    padding-right: 1.2em;
    padding-top: .8em;
}





-- 
Jean-Christophe Helary @brandelune
https://mac4translators.blogspot.com
https://sr.ht/~brandelune/omegat-as-a-book/