28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

je bloque sur un problème :
en composant un ebook (epub 2, texte flottant), avec des poèmes, selon la largeur de l'écran, il peut arriver qu'un vers un peu long se trouve coupé et la partie qui passe à la ligne se retrouve ferrée à gauche, au lieu d'être alignée à droite comme sur un livre papier (avec parfois un [ pour signifier que c'est la fin du vers).
J'ai ajouté un avertissement au lecteur au début de l'ebook pour qu'il réduise la police, ou agrandisse la fenêtre s'il lit sur un ordi, etc. mais c'est une piètre solution...
Chaque partie du poème (les quatrains) est encadrée par des <p> et les vers séparés par des <br />, et quand chaque vers est un <p>, le problème reste entier.
J'ai tout essayé en HTML/CSS et rien n'y fait... des tripotages de pseudo-éléments comme first-line par exemple, aucun succès.
Y a-t-il un moyen pour qu'un passage automatique à la ligne soit aligné à droite quand le texte lui-même est aligné à gauche ?
Bien sûr, pour conserver l'accessibilité, je ne veux pas passer en epub 3, et encore moins mettre le texte en image.
Si quelqu'un a une solution, immense merci !
Modérateur
Bonsoir,

as tu un ebook d'une page permettant de voir ton soucis et peut tu préciser quel lecteurs d'epub tu cibles ?

quel éditeur utilises tu , si tu en utilises un ?

Pour infos , on en est arrivée à la version epub 3.3 (qui permet néanmoins du fallback pour les vieux lecteur coincé en version 2) avec en théorie un meilleur support CSS (+ video,audio et JavaScript aussi), cela dépend bien sur du lecteur .

Je semble peut-être trop curieux, je me suis frotté au format epub il y a peu en faisant un plugin pour un petit CMS générant des epubs à partir des contenus du dit CMS. Le sujet ne m'est pas étranger Smiley smile

Cdt

edit sinon, coté css , il y aurait text-align-last:right , mais faudrait probablement un :not(::first-line) accolé ... suppossé n'être supporté qu'a partir d'epub3 il me semble Smiley decu
Modifié par gcyrillus (17 Oct 2022 - 20:53)
Bonsoir,

merci beaucoup pour la réponse. Je mets une capture d'écran qui permet de voir le problème, par exemple au vers 7, le mot "table" fait partie du vers. Dans une édition papier où le format n'aurait pas permis de laisser le vers sur une seule ligne, le mot serait aligné vers la droite, pour que le lecteur comprenne que c'est le même vers.
ici, avec le principe du retour à la ligne en HTML, le mot "table" reste aligné à gauche et, donc, comme c'est de la poésie en vers libre, on ne fait pas la différence avec la ligne qui précède... Le problème se pose encore avec "indéchiffrable" et "journal", mais peut-être moins grave puisqu'il y a une césure. En revanche, le dernier mot de la page "pouvoir" devrait être à droite lui aussi.
Le problème, c'est vraiment un problème d'affichage selon l'appareil qui le lit. Sur un ordi, pas de problème, on agrandit la fenêtre et tout est bon. Sur une tablette, c'est à peu près pareil, on peut en plus réduire un peu la taille de la police. Sur une liseuse, on peut encore réduire la taille de police (peut-être sur certaines passer en mode paysage ?).
Bref, le problème, c'est vraiment lié au respect de la volonté du poète...
On est un petit éditeur, on a déjà fait pas mal d'epub, distribués sur toutes les plateformes. L'epub 2, c'est aujourd'hui un choix qui reste vraiment pertinent : solidité du format, et surtout accessibilité parfaite (pour les PESH, et n'importe quel appareil, même ancien, peut le lire. L'epub 3 pose de gros problème sur ces plans-là.
Pour les composer, on utilise Sigil, pareil, simple, rapide, robuste et fiable (pour passer les fourches caudines d'Apple, par exemple...).
Les CSS acceptés par l'epub 2 sont largement suffisants pour la plupart des situations.
Là, c'est en revanche vraiment un problème sur lequel je bute...
Par exemple, si j'utilise text-align-last, ça ressemble à la solution idéale :
p{
text-align:left;
text-align-last:right;
}

Et pour un paragraphe de plusieurs lignes, ça marche comme un jeu d'enfant.
Mais le problème pour un vers c'est que quand il n’est pas coupé par la page, il se passe alors qu’il est à la fois la dernière et la première ligne du paragraphe qu’il constitue à lui-seul, si bien qu'il est considéré comme la dernière ligne et donc, l’aligne à droite s’il n’est pas coupé ! Et si le vers suivant est coupé, alors son début sera à gauche et sa fin à droite ! Ça donne le mal de mer...
J'ai aussi fait des bricolages hasardeux avec :first-line du genre :
p{text-align:right;}
p:first-line{text-align:left;}

et autres variations sur le même thème sans aucun succès.
Voilà où j'en suis...
Merci de l'aide !

upload/1666032226-85112-capturedaeacran2022-10-17aa20.png

j'avais essayé de jouer avec text-align-last, qui marche en epub2 pour un paragraphe normal mais met la pagaille sur un vers d'une seule ligne. Je n'avais pas pensé à :not, viens d'essayer... rien ne se passe.
Modifié par Bertrand32 (17 Oct 2022 - 21:17)
Modérateur
Bertrand32 a écrit :

... Je n'avais pas pensé à :not, viens d'essayer... rien ne se passe.


C'est aussi assez récent et il n'y a pas très longtemps que les navigateurs commence à bien l'implémenté, peut-être pas surprenant que cela ne passe pas dans un lecteur même récent.

Reste l'option du bon vieux float si text-align-last n'est pas un soucis Smiley cligne

p{float:left;clear:left;text-align-last:right;}
Bonjour,

grand merci pour l'aide !
J'avais aussi essayé float, sans succès non plus dans l'epub... mais le code proposé marche parfaitement sur un navigateur.
p{float:left;clear:left;text-align-last:right;}


J'ai fouillé un peu ce matin, l'epub2 accepte avec caprice les CSS3, d'où les problèmes, et sans doute l'impossibilité de résoudre ce problème particulier de césure du vers.
Pour l'instant, je renonce au risque de faire du
text-align:lol;

Mais vraiment c'est super sympa d'avoir cherché aussi ! et
Bonne journée !