28172 sujets

CSS et mise en forme, CSS3

Hello,

Est-il possible de n’avoir de passage automatique à la ligne que dans les espaces, sans utiliser de « zero width no breake space » ?

Aucune des valeurs de la propriétés white-space (16.6 White space: the 'white-space' property) ne convient à cette fin.

Exemple : je voudrais que dans « blabla-blabla blabla-blabla », le passage à la ligne ne puisse se faire qu’à l’endroit où se trouve un espace, et jamais à l’endroit du trait d’union.

Il semble qu’il existe une propriété inventée par Microsoft, nommée word-wrap (MS word-wrap CSS property), qui pourrait répondre à cette demande. Mais je ne veux pas d’une propriété seulement supportée par IE, aussi bien pensée cette propriété soit-elle.

Ce même word-wrap semble être prévu pour CSS3, mais je souhaite une méthode qui fonctionne avec CSS2.

Any idea ?

-- EDIT -- Finalement même la propriété word-break ne convient de toute manière même pas, c’est vraiment autre chose qu’il faut.
Modifié par hibou57 (24 Jun 2010 - 19:13)
Pas possible à ma connaissance.
Même si tu trouves ton bonheur en CSS3, CSS3 Text est à l'état de brouillon pas très bien dégrossi, donc les implémentations des nouveautés risquent d'être rares.
Ok, merci pour ta réponse. Me reste plus qu’à innover en ajoutant le tag [ fichu ] à mon topic.
Modifié par hibou57 (24 Jun 2010 - 19:12)
Il existe un trait d'union insécable :

‑


Faut voir dans le système que tu utilises comment les taper directement au clavier. Smiley cligne

edit: bon c'est pas une solution css mais ça marche Smiley smile
Modifié par Patidou (24 Jun 2010 - 20:40)
Patidou a écrit :
Il existe un trait d'union insécable :

‑

Je ne le connaissais pas celui, merci, je vais essayer, mais ça ne va pas être gagné (voir raison plus loin).

Patidou a écrit :
Faut voir dans le système que tu utilises comment les taper directement au clavier. Smiley cligne

J’utilise mon propre éditeur : www.lasidore.rasama.org, ensuite c’est des transformations XSLT.

Le truc, c’est que j’ai besoin de ça pour certains types d’éléments qui contiennent du texte « brut » mais qui ne sont pas comme des « PRE » (ce sont de brefs extraits en langue pas naturelle mais qui apparaisse dans le texte comme s’il s’agissait de mots ou expressions de la langue naturelle... bref, blabla, je sais, c’est compliqué). Si j’utilise un caractère trait d’union insécable, j’ai peur que ça pose des problèmes si des gens font un « copier / coller » d’un fragment de texte depuis la page. Ils se retrouveraient alors avec un caractère innatendu au lieu du signe « - » qu’ils devraient avoir.

Je vais quand-même évaluer la solution, et voir si je peux faire un remplacement de ce caractère là où c’est necessaire pendant la transformation XSLT. Je préfère garder le signe « - » tel quel dans les sources, parce que c’est lui qui doit être.

Mais j’aime bien ton caractère Smiley lol , parce qu’il permet l’économie de deux espaces nuls insécables. Bon, à savoir, je le note pour un éventuel usage futur.

Patidou a écrit :
edit: bon c'est pas une solution css mais ça marche Smiley smile

Pas grave, j’ai été un peu étroit avec mes critères quand-même Smiley biggol
hibou57 a écrit :
Si j’utilise un caractère trait d’union insécable, j’ai peur que ça pose des problèmes si des gens font un « copier / coller » d’un fragment de texte depuis la page. Ils se retrouveraient alors avec un caractère innatendu au lieu du signe « - » qu’ils devraient avoir.


Je viens de voir qu'il est plus petit que le «normal». Smiley smile
Salut,

Patidou a écrit :
Il existe un trait d'union insécable :

‑


Faut voir dans le système que tu utilises comment les taper directement au clavier. Smiley cligne

edit: bon c'est pas une solution css mais ça marche Smiley smile

Florent devrait nous dire que c'est du bricolage Smiley cligne
Ericf a écrit :
Salut,


Florent devrait nous dire que c'est du bricolage Smiley cligne

S’il le faisait, il n’aurait pas tord, et je serais assez d’accord : remplacer un caractère par un autre pour des raisons de mise en forme, ce n’est pas bon. Un signe « - », c’est un signe « - », pas autre chose.

C’est pour ça que je disais que je préférais encore faire le remplacement pendant la transformation plutôt que dans la source du texte.

Mais je vais faire encore autrement (pas encore fait) : je vais faire un regroupement de tout ce qui ne contient pas d’espaces blanc, et l’envelopper dans des spans, pour lesquel le saut de ligne sera interdit. Plus aucune substitution de caractère, il me semble que ce sera plus propre.

Exemple : à partir de

blablabla-blablabla blablabla-blablabla


j’aurais

<span class="truc">blablabla-blablabla</span> <span class="truc">blablabla-blablabla</span>

Modifié par hibou57 (25 Jun 2010 - 17:18)
Ericf a écrit :
Florent devrait nous dire que c'est du bricolage Smiley cligne

Ça dépend. Ça ne sera pas du bricolage si les critères suivant sont satisfaits:
1. La solution est testée et fiable.
2. C'est automatisable (pas d'intervention humaine au cas par cas).
3. La solution d'automatisation ne rajoute pas un degré de complexité au site ou à l'application, qui augmenterait les risques de provoquer des bugs lors des évolutions ou de la maintenance.

Mais sinon, ouais. Smiley smile
Florent V. a écrit :
Ça dépend. Ça ne sera pas du bricolage si les critères suivant sont satisfaits:

OKI

Florent V. a écrit :
1. La solution est testée et fiable.

Je viens de tester, ça l’est

Florent V. a écrit :
2. C'est automatisable (pas d'intervention humaine au cas par cas).

Automatisable dans mon cas avec XSLT (voir plus loin).

Florent V. a écrit :
3. La solution d'automatisation ne rajoute pas un degré de complexité au site ou à l'application, qui augmenterait les risques de provoquer des bugs lors des évolutions ou de la maintenance.

Juste des SPAN avec la classe "token", c’est tout à fait cohérent est clair.

Pour le faire en XSLT, la fonction « tokenize » est parfaite. Elle fait partie de XSLT 2, mais elle est également accessible pour les gens qui comme moi utilise un processeur XSLT 1 (et qui en sont content et donc n’en change pas). Dans ce cas, par exemple avec XSLTProc, il est possible d’utiliser l’extention « strings » de exslt.org.

Détail de la fonction tokenize avec exslt.org : node-set str:tokenize(string, string?)

J’ai rencontré un problème en voulant l’appeler avec un « xsl:call-template », et je l’ai donc appelé comme une fonction.

Schéma à appliquer pour « tokenizer » un noeud texte :


<xsl:template match="text()" mode="tokenized">
   <xsl:variable
      name="tokens"
      select="str:tokenize(., '&#x9;&#xA;&#xD;&#x20;')" />
   <xsl:for-each select="$tokens">
      <xsl:if test="position() > 1">
         <xsl:text> </xsl:text>
      </xsl:if>
      <span class="token">
         <xsl:value-of select="text()" />
      </span>
   </xsl:for-each>
</xsl:template>


Qu’il suffit d’invoquer depuis les contextes où cela est nécessaire à l’aide de


   <xsl:apply-templates mode="tokenized" />


Attention tout de même à ne pas oublier de définir les autres templates qui pourront éventuellement avoir besoin de l’être pour le mode correspondant ! Ce template là ne prend en charge que les noeuds texte !

Ne pas oublier non-plus d’inclure l’extention dans la déclaration de la feuille XSL :


<xsl:transform
   version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:str="http://exslt.org/strings"
   extension-element-prefixes="str">


(testé avec XSLTProc, auquel je reste fidèle)

J’allais oublier... il y a quand-même un peu de CSS... Trois lignes Smiley lol


.token {
   white-space: nowrap;
}


Comme dira Patidou, ce n’est pas du 100% CSS, mais ça le fait.
Modifié par hibou57 (25 Jun 2010 - 21:22)