28211 sujets

CSS et mise en forme, CSS3

[Résolu] Un retour chariot en CSS ?

Bonsoir à tous,

Je voudrais placer un retour chariot via une feuille de style, un peu comme la balise <br /> en xHTML.

Pour le détail, je souhaite aussi, si possible Smiley murf , utiliser le pseudo format :before comme ça :

.etiquette:before
{
content: "<retour chariot>";
}

Sauriez-vous comment procéder ?
Modifié par tsing (12 Feb 2005 - 15:41)
Apparemment ça ne semble pas changer la présentation du texte étiqueté... J'ai aussi testé sans les doubles cotes mais sans succès. Je précise que j'utilise FireFox (bien entendu) Smiley langue
Bobe a écrit :
c'est:
.etiquette:before {
    content: "\D";
}
Non ça ne marche pas.
Et je pense que ça doit être difficile car d'après ce que je sais tous les caractères qui de près ou de loin ont un rapport avec le retour à la ligne sont considérés en HTML comme un espace.

Bon, j'ai trouvé un truc très très vilain (j'espère que quelqu'un trouvera mieux) dont voici un exemple :
<style>
p{overflow:hidden}
em:before { content: " ";padding:2000px }
</style>

<body>
<p>un bout de texte<em>et hop à la ligne</em></p>
</body>
Et pourquoi pas em {display: block} ??
C'est la meilleure solution !!

<p>Blabla<em>on retourne à la ligne</em>et ici ça revient encore une fois à la ligne

Modifié le 10 Feb 2005 - 21:24
[quote]
<style>
p{overflow:hidden}
em:before { content: " ";padding:2000px }
</style>

<body><p>un bout de texte<em>et hop à la ligne</em></p></body>
[/quote]


lol, il fallait quand même y penser Smiley lol

Pensez-vous qu'il pourrait aussi être envisageable de revenir à la ligne en forcant un mot étiqueté à être "justifié" (avec la propriété text-align: justify;), de sorte qu'il puisse prendre toute la longeur d'un ligne ?
Je suis d'accord avec vchahun, c'est ce qu'il y a de plus simple et efficace, et c'est même La solution à utiliser. Seulement elle est contraignante : elle nécessite de placer une balise d'information (<em> dans notre exemple) pour obtenir au final un effet purement stylistique.

Au contraire, je préfèrerais utiliser une fonction grâce à laquelle, lorsqu'une condition est validé (comme par exemple : lorsqu'un mot est trouvé) et sans modifier le code xHTML, l'on pourrait ajouter, avant chaque majuscule, un retour chariot. J'en demande un peu beaucoup là, mais il existe bien des pseudo-formats permettant de styliser, sans nécessairement ajouter de spécification dans une source, une première ligne :first-line voire, encore mieux, chaque première lettre d'un mot pour en faire une majuscule (text-transform: capitalize;).
Les notions de first-letter et first-line sont très génériques et il est assez facile de définir un consensus là dessus.
Pour la notion de mot c'est autre chose, car il faut alors définir des séparateurs, et je doute que cela coule de source. Quelle serait ta définition d'un "mot" ?

Par contre si tu as déterminé une définition robuste (relativement à ton besoin) de ce qu'est un mot, il est toujours possible d'automatiser le marquage des mots dans le XHTML.
Xavier a écrit :
Non ça ne marche pas.


J'ai répondu sans prendre le temps d'expliquer et en ayant lu le message en diagonale. Le code hexadécimal du retour chariot est bien 0D et le code que j'ai donné insèrera effectivement un retour chariot dans le document.

Xavier a écrit :

Et je pense que ça doit être difficile car d'après ce que je sais tous les caractères qui de près ou de loin ont un rapport avec le retour à la ligne sont considérés en HTML comme un espace.


Pourtant, la documentation CSS donne un exemple de feuille de style (1) montrant la présentation par défaut des différents éléments html dans la plupart des navigateurs. Dans cet exemple, on peut voir:


BR:before       { content: "\A" }


0A étant le code hexadécimal du saut de ligne.

(1) http://www.yoyodesign.org/doc/w3c/css2/sample.html
Modifié le 10 Feb 2005 - 23:18
@ Bobe> oui tu as raison, 0A est un saut de ligne et 0D un retour charriot, mais ces codes en HTML font partie des espaces (white space) qui ne sont pas présentés par le navigateur comme un retour à la ligne. Voir :
http://www.w3.org/TR/html4/struct/text.html#h-9.3.2
et
http://www.w3.org/TR/html4/struct/text.html#whitespace

@ tsing> J'ai été un peu vite dans mon post au dessus. Il existe la propriété word-spacing qui suppose une définition d'un mot (je suppose ensemble de lettres séparé par des "white space"). Bref tu peux t'en sortir avec cette propriété :
<style>
  p {word-spacing:2000px}
</style>
<body>
   <p>mot à mot</p>
</body>
Xavier j'ai peur que tu ne généralise trop. Les espaces blancs ne sont pas ignorés "par les navigateurs" mais "par le HTML".
Ici on est en CSS. On le voit parce que si dans ton content du met "<b>hello</b>" la mise en gras ne sera pas interprêtée. Rien n'indique donc que la fin de ligne doivent être ignorée. Au pire tu peux mettre en CSS un whitespace:pre (pas sûr de la syntaxe exacte) pour lui dire de respecter ces mêmes fins de ligne.
La dernière fois que j'avais essayé, le \0A dans le contenu généré faisait effectivement un retour à la ligne dans le rendu (pour les navgateurs qui comprennent le contenu généré par CSS, ce qui limite déjà)
Oui Ganf c'est vrai on peut imaginer une différence de traitement des espaces entre CSS et HTML. Mais le contenu généré par CSS prend en entrée une chaîne de caractère (et non pas du markup ce qui explique la non mise en gras de <b>hello</b>) et restitue un contenu HTML (enfin c'est ce que j'ai cru comprendre).
Le mécanisme que tu indiques nécessiterait que le contenu généré puisse produire du markup ? Si tu pouvais nous retrouver la syntaxe...
Mais oui bien sur ! Où avais-je la tête ? Merci Stephan.
Donc ça donne :
<style>
em:before {content:"\A" ;white-space:pre}
</style>

<body>
<p>un bout de texte<em>et hop à la ligne</em></p>
</body>
Seul tsing pourrait nous décrire son besoin réel.
On peut cependant supposer qu'il souhaitait gérer des aspects de présentation sans alourdir le markup de la page. Peut-être même n'a-t-il pas totalement la main sur le markup.
Comme Xavier l'a deviné, je voudrais créer un effet de style sans porter de modification à la source dont voici ci-dessous une copie.

<div id="logo">
	<span id="nom">Nom_société</span>
	<span id="slogan">Plusieurs adjectifs qualifiant la société</span>
</div>


Il s'agit en effet d'un simple logo (donc à priori rien de très pointu) que j'ai choisi de mettre en forme avec du CSS (pour divers raisons, notamment pédagogiques Smiley lol ).

Comme vous l'avez remarqué, sa source se limite à l'essentiel, et même s'il est vrai que l'on aurait pu y ajouter des balises (comme <em>) entre chaque adjectifs (dans l'exemple échéant) pour sauter des lignes (en particulier), cela n'aurait pas vraiment eu de sens d'un point de vu informationnel, de sorte que s'il m'est possible de faire autrement, alors tant mieux Smiley smile

A ce propos, je crois que la propriété word-spacing est tout à fait appropriée. Mais est-ce que word-spacing:[i]2000px[/b] signifie forcément un retour à la ligne... ou bien cela dépend aussi de la taille de la fenêtre du navigateur ?
A défaut d'avoir trouvé mieux pour l'instant, je trouve effectivement que cette fontion pourrait "faire l'affaire". Mais s'il existe d'autres solutions, je reste ouvert. Comme gag y'a plus drole quand même.
Sujet clos
Aller à