Discussion :

[SpaceFrog]

Je me heurte a un souic de rotation sur un html entity ®
Mon code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="m2 '.(($page==2 && $sub==1)?'active':'').'" data-family="B"><div class="txt-bt">Produit Marque&reg;</div></li>

le css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.txt-bt {
	 height:160px;
	 writing-mode: tb-rl;
  	 color: #ffffff;
	 -size:20px;
	 -webkit-transform:rotate(-180deg);
         -moz-transform:rotate(-180deg);
         -ms-transform:rotate(-180deg);
         -o-transform:rotate(-180deg);
         transform:rotate(-180deg);
	padding: 10px;
	text-align: center;
	line-height: 25px;
	font-size: 15px;
	letter-spacing:3px;
	font-family: verdana;
  }

Une implémentation sur le fiddle

https://jsfiddle.net/un9Lvw3p/

Notez que le Reg est à l'envers ?????
Je en comprends vraiment pas

J'ai même essayé de coller le htmlentity dans un élément de class dédié et tenté d'annuler la rotation ou d'en rajouter une..; et bien nada il refuse de trourner.

Auriez vous des suggestions?

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.txt-bt {
...
	 /*writing-mode: tb-rl;*//*SUPPRIMER*/
  	 color: #ffffff;
...
         transform:rotate(-90deg);
...

[SpaceFrog]

Trouvé c'est une vieille ligne qui foutait la grouille, le writing-mode: tb-rl; ...
à priori ça ne s'applique pas sur les htmlentities ...
en virant la ligne c'est tout bon ...

[SpaceFrog]

Ouaip, merci Jreaux62 ! on s'est croisés ...

Ceci étant je ne comprends pas pourquoi le writing-mode ne s'applique pas de façon identique sur le html entity ...

[NoSmoking]

Bonjour,
au départ le writing-mode n'est pas prévu pour ce que tu cherches à faire mais pour la prise en compte des différentes façons d'écrire/lire

• left-to-right (ex: Latin) ;
• right-to-left (ex: Arabe) ;
• vertical (ex: Asie).

Un certain nombre de caractères sont effectivement sujet à cette rotation d'autres visiblement non comme

©	©	©	copyright
®	®	®	registered trademark
℗	℗	...	sound recording copyright
™	™	™	trademark
℠	℠	...	service mark

qui doivent être rendu toujours de la même façon.

La solution est effectivement de passer par une rotation même si le writing-mode peut être utilisé sur des exemples simples.


Ressources :

• CSS Writing Modes Level 3
• CSS Writing Modes