Page 1 sur 1

CSS pour éviter de couper les lignes de texte ?

Publié : 31 juil. 2007, 13:31
par Yoric
J'ai un problème avec Gecko. Pas qu'avec Gecko, en fait, mais les autres navigateurs m'importent beaucoup moins. Mon problème est le suivant : quand une page s'affiche, presque systématiquement, pour des raisons de hauteur de mon écran, en haut et en bas du navigateur, je vois des demi-lignes de texte ou des images coupées en hauteur.


Image


On est tous habitués mais c'est pas beau. Surtout quand j'essaye de faire des pages qui ressemblent à des livres.

Du coup, j'aimerais trouver une manière d'interdire à Gecko de couper ces lignes de texte et de ne les afficher que quand il y a moyen de les faire entrer en entier dans l'écran ou, à la rigueur, si elles font plus d'un écran de haut. Histoire d'avoir quelque chose qui ressemble à

Image

Je suis prêt à y aller à coups de CSS, de JavaScript et même de XPCom, si quelqu'un me trouve une bonne idée.

Des suggestions ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20070602 Firefox/2.0.0.4 (Swiftfox) XPCOMViewer/0.9.5

Re: CSS pour éviter de couper les lignes de texte ?

Publié : 31 juil. 2007, 14:01
par calimo
Yoric a écrit :CSS
Pas possible à mon avis.
Yoric a écrit :XPCom
Pas utilisable pour le web. C'est pour faire des applications qui tourneront localement, donc l'utilisateur devrait l'installer...
Yoric a écrit :JavaScript
Là ça doit probablement être possible, mais je n'ai aucune idée comment :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Publié : 02 août 2007, 13:05
par Yoric
Quand j'écris XPCom, je veux dire que je suis tout à fait disposé à écrire une extension juste pour ça...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20070602 Firefox/2.0.0.4 (Swiftfox) XPCOMViewer/0.9.5

Publié : 02 août 2007, 13:11
par calimo
Le problème c'est que l'extension doit être (activement) installée par le client, donc ça ne résoudra pas le problème pour tes visiteurs (qui ne vont pas tous installer l'extension) :wink:

(NB : il n'y a habituellement pas besoin de développer du XPCom pour faire une extension : elles sont en XUL et en Javascript).

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

Publié : 03 août 2007, 16:29
par Yoric
T'inquiète pas pour l'extension, je sais faire. Il me faut juste une piste pour la mise en page...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20070602 Firefox/2.0.0.4 (Swiftfox) XPCOMViewer/0.9.5

Publié : 04 août 2007, 10:55
par Benoit
Je pense que tu peux t'aider des méthodes DOM offset* et scroll* et faire des calculs là-dessus.

On a terminé de les traduire la semaine dernière :)
http://developer.mozilla.org/fr/docs/DOM:element

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9a8pre) Gecko/2007080309 Minefield/3.0a8pre

Publié : 04 août 2007, 18:10
par Yoric
Benoit a écrit :Je pense que tu peux t'aider des méthodes DOM offset* et scroll* et faire des calculs là-dessus.
Moi, je veux bien, hein. Mais comment ?

Je veux dire, j'imagine que offset* peut m'aider à déterminer si un élément entre en entier dans la page. À coups de visibility:collapse, je dois pouvoir cacher les éléments qui dépassent. Ça, c'est la partie relativement simple.

Maintenant, je vais tomber régulièrement sur des éléments qui vont être plus grands que l'écran. Si c'est une image, pas de chance, c'est de ma faute. Mais si c'est un gros #text, voire un tableau, il faudrait que j'arrive à le découper. Et pour ce faire, il faut que je commence par arriver à déterminer où couper. Ce qui commence à faire beaucoup de boulot...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20070602 Firefox/2.0.0.4 (Swiftfox) XPCOMViewer/0.9.5

Publié : 04 août 2007, 23:54
par Benoit
Pour les calculs en pixels il y a pas mal de détails ici :
http://www.quirksmode.org/dom/getstyles.html

La propriété CSS qui t'intéresse sans doute le plus est "line-height".

Sinon, c'est normal que ça te demande beaucoup de boulot, tu n'es ni en mode texte (un nombre entier de lignes) ni sur un média paginé.

Remarque : si tu es prêt à faire une extension tu peux peut-être essayer de hacker le mode aperçu avant impression qui est prévu pour ça :)

Publié : 05 août 2007, 12:40
par Yoric
Benoit a écrit :Remarque : si tu es prêt à faire une extension tu peux peut-être essayer de hacker le mode aperçu avant impression qui est prévu pour ça :)
En fait, déjà fait :) Pas encore trouvé comment fixer la taille de la fenêtre mais déjà fait. Le problème est que dès que du code JS cause une modification du DOM, une boîte de dialogue s'affiche pour m'insulter.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20070803 Firefox/2.0.0.6 (Swiftfox) XPCOMViewer/0.9.5

Publié : 07 août 2007, 20:56
par Yoric
Bon, ben j'ai ma réponse (merci eliaf) : c'est prévu... mais ça ne sera pas fini à temps pour Firefox 3.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20070803 Firefox/2.0.0.6 (Swiftfox) XPCOMViewer/0.9.5

Publié : 10 août 2007, 00:00
par Yoric
Ah, deuxième réponse de elif: utiliser les colonnes de CSS 3.

Et ça marche :)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.6) Gecko/20070803 Firefox/2.0.0.6 (Swiftfox) XPCOMViewer/0.9.5