Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome does not support "writing-mode" for BUTTON tag?

I just discovered a possible bug in Chrome but I am unable to find any resource.

It seems that writing-mode does not run on BUTTON tag.

See the living example for details.

<a href="#;" class="pippo">pippo</a>
<br><br>
<button class="pippo">pippo</button>

.pippo {
  writing-mode:vertical-lr
}

Is there any workaround to fix it in Chrome (in Firefox runs correctly)?

like image 807
Luca Detomi Avatar asked Apr 07 '17 12:04

Luca Detomi


People also ask

Can I use writing mode vertical RL?

In CSS, to work with writing modes we use the writing-mode property. This property can take the following values: horizontal-tb. vertical-rl.

What is writing mode vertical-LR?

vertical-lr. For ltr scripts, content flows vertically from top to bottom, and the next vertical line is positioned to the right of the previous line. For rtl scripts, content flows vertically from bottom to top, and the next vertical line is positioned to the left of the previous line.

What is LR in HTML?

questions. vertical-lr:This mode lets the content flow vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

How do I make text vertical in HTML?

To achieve a vertical text orientation, set the writing mode property to vertical-lr(or vertical-rl) and set text-orientation to upright.


1 Answers

You can try this:

<button><p style="writing-mode:vertical-lr;">pippo</p></button>
like image 115
Himanshu Shekhar Avatar answered Oct 02 '22 15:10

Himanshu Shekhar