Is there a way to showcase English and CJK text vertically with CSS?

This particular issue was first discussed 14 years ago on Stack Overflow, but a definitive solution still remains elusive.

My goal is to have both CJK and Latin characters displayed vertically, with their bottoms facing the right side.

While writing-mode: sideways-rl achieves the desired result in Firefox, it remains unsupported by other browsers as of 2023 (https://caniuse.com/?search=sideways)

https://i.stack.imgur.com/n3Qcb.png

Several suggestions have been made to use vertical-rl along with text flipping techniques like scale(-1) or rotate(180deg). While this method works for Latin characters, CJK text ends up being displayed upside-down.

writing-mode: vertical-rl
transform: rotate(180deg)

https://i.stack.imgur.com/aDZsh.png

I also attempted rotating the entire horizontal text container -90°, but encountered alignment and rendering issues due to HTML computations occurring before the transform property. Workarounds such as margin: -100px; padding: 100px proved cumbersome and often led to further problems like misaligned pointer hitboxes.

htmlcsscross-browserlocalecjk

Answer №1

It is recommended to keep CJK characters upright instead of rotating them, as they can be read in both directions naturally. However, if needed, you can utilize text-orientation: sideways to force the rotation, a property that is widely supported by most browsers.

(Please note that using text-orientation: sideways rotates the text 90 degrees clockwise, so combining it with transform: rotate(180deg) is required to flip the text.)

.verticalbox {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  transform: rotate(180deg)
}
<div class="verticalbox">
  Oct 28 星期六
</div>

Keep in mind that while dealing with multiple lines written in LR direction, replacing it with RL and applying the rotation(180deg) is necessary, as explained in this W3C article:

It's important to note that using this property-value pair with writing-mode: vertical-lr results in a different layout compared to using writing-mode: sideways-lr since the text starts at the block's top and glyphs are positioned on their right side. Additionally, when a line breaks, lines progress in the opposite direction from the usual flow, with later lines visually appearing to the right (above) earlier ones.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding a Header Image to the Top of All Pages with CSS

As I dive into the world of website creation, I've encountered a challenge that has me stumped. My goal is to have a banner displayed at the top of each webpage on my site, and I'm unsure if this can be achieved using CSS. While I've success ...

htmlcss

When Bootstrap 4 teams up with Autoprefixer, it results in malfunctioning old iPads

.row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } Recently, we implemented Bootstrap 4 and the Flex model at my company. We'v ...

cssflexboxbootstrap-4autoprefixer

How to use Vanilla JavaScript to toggle a click event on a list item (LI) that

I have a script that scans through a webpage and identifies a unique string, for example: multus –a –um. The page contains several <LI> elements with various text content, including instances of multus –a –um. I need a solution to locate an & ...

javascripthtmlcss

Display or conceal a div element using a dropdown menu selection

I have implemented the following code, which is currently functional and was sourced from a different thread on Stack Overflow: <Select id="colorselector"> <option value="red">Red</option> <option value="yellow">Y ...

jqueryhtml

Can someone help me locate the selector for using .click in Nightmare.js?

I am currently using Nightmare.js to automate the scraping of a webpage. As a sysadmin, my understanding of Node.js and CSS is limited. So far, I have been able to successfully use Nightmare to input and click on certain buttons in order to log in. I iden ...

cssnode.jsnightmare

Make sure to align images and comments seamlessly on your website just like in the comment section of YouTube

Looking for help aligning an image and two spans in one row <img src="../images/profile/profile.png" class="img" /> <span class="name">First Name</span> <span class="comment"> This is simply dumm ...

csshtml

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

javascripthtmlcssvue.js

How can I create a reverse animation using CSS?

Is there a way to reverse the animation of the circular notification in the code provided? I want the circle to move forward, covering up the info and fading out. I've tried switching the animation around but haven't had success. Any suggestions? ...

javascripthtmlcsscss-animations

Adjusting the size of the Knob in Ionic 5 upon pressing it

Is there a way to change the size of the knob in an "ion-range" element when it is pressed? I have checked the documentation, but could not find any information in the "ion-range" section. I would like to make this adjustment in SCSS: Normal Behavior Pre ...

cssangularionic-framework

What is the proper way to integrate HTML code into an .inc file that is being utilized by a php file?

My title may be a bit off, but I have a PHP file that needs to include a .inc file containing menu code. Here is how I'm attempting to do it in the PHP file: <?php include_once("php_menu.inc") ?> And here is my HTML code for the menu: < ...

phphtmlinclude

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

After building my react app with npm run build, I encountered a problem where clicking on index.html resulted in a blank page opening in the web browser. I explored several solutions to address this issue but none seemed to work. Some of the strategies I ...

javascripthtmlreactjsnpm

There appears to be a CSS problem cropping up on the right side of my website

Kindly pay a visit to the following URL: dev.dgconcepts.com.pk https://i.stack.imgur.com/sBC4Dm.jpg I am puzzled by the fact that whenever we swipe left or right on mobile responsive, the website shifts slightly on both sides. I am unable to identify ...

csswordpressmobilejquery-mobile

Hovering over the Jquery menu will display only the first child element

Hey there, newbie here looking to learn some new things. I ran into an issue where only the first child of the menu shows up when hovering over the parent element. Can anyone help me out with this problem? Please ignore the css for now. Any assistance woul ...

jquerycssjquery-ui

Tips for placing the brand logo on the left edge of the Bootstrap 4 navbar

I am facing an issue with the placement of my logo. The code snippet below shows how it currently looks: <nav class="navbar navbar-fixed-top navbar-light bg-primary"> <div class="container-fluid"> <img class="navbar-brand" src="logo.p ...

htmlcsstwitter-bootstrapbootstrap-4

Limited functionality: MVC 5, Ajax, and Jquery script runs once

<script> $(function () { var ajaxSubmit = function () { var $form = $(this); var settings = { data: $(this).serialize(), url: $(this).attr("action"), type: $(this).attr("method") }; ...

javascriptjqueryajaxasp.net-mvchtml

Table for maximizing space within a cell (Internet Explorer 8)

I am attempting to make the "innerTable" fill up all available space within another table. The issue is with IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table does not expand to fit the containing TD. I tried enclosing the ta ...

htmlcsshtml-tableinternet-explorer-8

The importance of color value is underscored

Is there a way to remove the surrounding color from the value in Visual Studio Code and only display the little square on the left side? [.nav-link-wrapper a { color: #ec0b0b } ] https://i.stack.imgur.com/5uA9k.png ...

cssvisual-studio-codecolors

Arrange elements in different directions to accommodate smaller screens

I need help aligning my brand and the links on opposite sides (brand on left, other links on the right) for mobile view. The issue I'm facing is that the links on the right end up moving to the next line. Any suggestions or advice would be greatly app ...

htmlcssbootstrap-5

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Here is the HTML input tag code I am working with: <form id="info"> <input id="A" name="A" type="hidden" nodetye="parent" value="A"> <input id="A1" name="A1" type="text" nodetype="child" value="a1val"> <input id="A2" name ...

javascriptjqueryhtmljsonstringify

Lowest value malfunctioning

I have encountered an issue with setting minimum values for 4 things. All 4 things are supposed to have the same minimum value as the first thing, but when moving the slider, everything goes back to normal and works fine. Where could the problem be origina ...

javascriptjqueryhtmlcssminimum