Rotation de Hmltentity

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

Code:

---

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

---

le css:

Code:

---

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?

Bonjour,

Code:

---

1 2 3 4 5 6 7

.txt-bt { ... /*writing-mode: tb-rl;*//*SUPPRIMER*/ color: #ffffff; ... transform:rotate(-90deg); ...

---

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 ...

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 ...

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