Dracca: un livre-jeu

[@lucard]

Navré pour la font, c'est effectivement donné avec le pack Adobe.

Essaie donc Styles BT. Tu en trouvera une version. Woff.  Elle est gratuite. [ici par exemple ]

Sinon Architect's Daughter .

[Xenos]

Ok, j'essaie la styles-bt.

Je ne la trouve pas des plus lisibles, mais effectivement, elle favorise l'immersion. La trouvez-vous à votre convenance?

[@lucard]

Ok, j'essaie la styles-bt.

Je ne la trouve pas des plus lisibles, mais effectivement, elle favorise l'immersion. La trouvez-vous à votre convenance?

En fait c'est Stylus BT (la faute est du à l'auto-correction mobile).

En tous cas, je trouve ça mieux sur Mobile.
Plus immersif.


En revanche,  toujours sur mobile, à chaque changement de chapitre,  on a cette grande partie des menus qui s'affiche en premier,  ça rend moins immersif pour le coup.


´\_(ó_O)_/`

[Xenos]

Alors voici ma proposition (et en fait, je crois que mon écran à la maison est mal réglé, la police est lisible ici).



(d'habitude, je fais ça sur un ticket du BT, mais comme le proxy de la boîte est une chiasse, le BT n'est pas accessible ici...)

[Ter Rowan]

j'avais entendu, il y a quelques années, que justify était devenu complètement has been pour du word, etc..., après je ne sais pas dans une vision mobile, mais je ne l'emploi plus (même si des fois c'est moche un pavé avec un gros blanc à la fin d'une ligne

[Xenos]

Ah, ben finalement, le premier résultat de DuckDuckGo dit le contraire ("il est plus agréable de lire un texte justifié que aligné à gauche"). Les deux bouquins d'infos que j'ai sur le bureau sont également justifiés (sauf les passages de code, évidemment!). Les Loup Solitaire et les livres de poche sont également en justifié.

Donc bon, allez, vendu, ce sera justifié partout (et j'ai du entendre à peu près le même son de cloche, Ter Rowan, mais je vais le passer aux oubliettes à partir de maintenant!).

[@lucard]

dans un article, un journal, dans un site, ou lorsqu'il s'agit d'une petite zone de texte,
effectivement on "voit" mieux (on distingue mieux) les phrases quand elles ne sont pas en justifié.

Mais là il s'agit d'un livre (certes, sur le net mais un livre quand même).
Pour moi, 98% des romans sont écrit en justifié, il faut donc que ça en suive cette logique, non ?

Bon après, pour semer le doute, le "mode Lecture" de FireFox n'est pas en justifié. x)

C'toi qui voit Xenos. iffle:

[Xenos]

Bon ben du coup, justifié, pi voilà !

Le menu est en ligne, je te laisse me dire ce que tu en penses
Et si vous avez des retours sur le fond de l'histoire, n'hésitez pas !

[@lucard]

Version Chrome :


Version Firefox:


Donc dans la version Chrome, il n'y a pas de menu.
Impossible à déplier. Vive la daube Google ! Yipi !

[Xenos]

https://developer.mozilla.org/en-US/docs...ilityTable

Je suis passé un peu vite sur le support de "filter" en CSS. Bon, normalement, même si cela n'apparaît pas, tu devrais pouvoir "cliquer" sur l'emplaceent du petit dragon et déplier le menu. Je vais corriger cela dans la foulée.

---

En fait, cela vient plutôt de la façon dont Webkit gère les "height".

Pour info, il existe deux notions de "height" en CSS: la "used height" et la "specified height". La used height correspond à la valeur réelle de la hauteur, et la specified height correspond à la hauteur explicitement définie par une ligne de CSS type "height: 200px;".

Flexbox, dans sa grande bienfaisance, n'altère que la "used height". Donc, un élément "flex" qui aura une apparence de 200px de haut aura en fait une "used height" de 200px, et une "specified height" de 0px (car aucune ligne de CSS ne lui donne spécifiquement de hauteur).

Or, une propriété "height" en pourcents posée sur un élément est calculée par rapport à la "specified height" de l'élément parent (boum, le drame!). Du coup, celle-ci valant "0" dans le cas d'un élément flex, l'élément enfant aura une hauteur finale de 0 (et n'apparaitra donc pas).

Firefox n'a pas ce problème, car ils se sont dit "allez, f*ck it, used et specified, c'est la même height" alors que webkit a été plus mécanique, et considère ces deux types de hauteurs comme différents.

J'ai appliqué le hack proposé dans le post Stack Overflow: "position: relative;" pour l'élément flex, et "position: absolute" pour l'élément child. Cela règle le problème de la hauteur nulle (et donc, le bouton apparait dans Opera/Chrome).