CSS Chrome browser does not support the “writing-mode” attribute of the BUTTON tag

In this article, we will introduce the Chrome browser’s lack of support for the “writing-mode” attribute of the BUTTON tag and provide some solutions.

Read more: CSS Tutorial

Understanding “writing-mode”

In CSS, the “writing-mode” property determines how an element’s text flows. It controls whether text flows from left to right or right to left, and also changes the vertical alignment of text. This property has multiple values, including “horizontal-tb,” “vertical-rl,” and “vertical-lr.”

Chrome Compatibility Issues

Unfortunately, Chrome’s support for the “writing-mode” property for the button tag is not perfect in some cases. Specifically, when we try to align the button’s text vertically, Chrome may not render this effect correctly.

Example

Let’s look at an example. Suppose we have the following CSS styles:

button {
writing-mode: vertical-lr; 
} 

We expect the button’s text to flow from top to bottom, but in Chrome, the text still flows horizontally.

Solution

While Chrome may not support all use cases for the “writing-mode” property, we can try some alternatives to achieve a similar effect.

Using Text Rotation

An alternative approach is to use the CSS “transform” property to rotate the text. We can rotate the button text 90 degrees to create a vertical layout.

button {
transform: rotate(-90deg);
transform-origin: left top;
}

This will cause the button text to flow from top to bottom. Note that rotating button text may cause some alignment and sizing issues, so you may need to perform additional adjustments.

Using Flexbox Layout

Another solution is to use Flexbox. By wrapping the button’s text in a container and using Flexbox to control the flow of the text, you can achieve the desired effect.

button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

button span {
writing-mode: vertical-lr;
}

This will align the button text vertically. By adjusting the alignment and size of the container, we can further customize the button’s appearance.

Summary

Although Chrome’s support for the “writing-mode” property of the button tag is not perfect, we can use other methods to achieve a similar effect. By using text rotation or Flexbox layout, we can align the button text vertically. The method we choose depends on the specific needs and design.

While these solutions can solve the problem in most cases, you may still encounter some compatibility issues in practice. Therefore, during development, we should always perform compatibility testing and make necessary adjustments and optimizations as needed.