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

What is the best way to store and recall user selections from a dropdown menu using PHP?

Newbie in the house. I managed to store my user's choice from a select menu, but now it seems like the validation is not working as expected. How can I resolve this issue? This is the snippet of code I'm using for validation: <?php $color ...

phphtmlvalidation

Splitting the page into four sections with a unique H layout using CSS styling

Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...

htmlcssflexboxcss-float

Number Stepper Reverse

Could the HTML5 number stepper be reversed so that pushing down increases the number and vice versa? In Response to any 'Why?' inquiries: Consider batting order in sports like cricket or baseball. As you move down the order, your batting positio ...

htmlinput

Once the input is disabled, what is the best way to delete the previously inserted text?

Here's the scenario: I have two options that display different questions each. If a user decides to switch their option at the last minute, any inputs within option 1 will hide and show option 2. However, all input texts need to be removed and disabl ...

jqueryhtmlselectdisable

Attempting to eliminate an HTML element using JavaScript

Currently, I am working on creating an image rotator in JavaScript. The CSS fade animation I have applied only seems to work during element creation, so I am forced to remove the element on each loop iteration. The main issue I am encountering is related ...

javascripthtml

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

javascriptjqueryhtml

The screen is cloaked in a dark veil, rendering it completely inaccessible with no clickable

Utilizing Bootstraps modals, here is my current layout. Within the site's header, there exists a "settings" button that triggers a modal containing various options. These options are not tied to the question at hand. The button responsible for displ ...

javascriptphpcsstwitter-bootstrap

How can I prevent or override the text being pushed to the right by CSS::before?

Using the css property ::before, I am attempting to insert a tag before a paragraph. While I am able to display the tag correctly, it is causing the text within the paragraph to be shifted to the right. Ideally, I would like the tag to appear in the top-le ...

css

The sequence of HTML attributes

Could there be a subjective angle to this question (or maybe not)... I work on crafting web designs and applications using Visual Studio and typically Bootstrap. When I drag and drop a CSS file into an HTML document, the code generated by Visual Studio loo ...

javascripthtmlcssattributescoding-style

Utilize Selenium in Python to choose an element

When working with the following HTML code: <div class="nav-category__col" id="category_nav_level_3" style="display: block;"> <input type="hidden" value="1" name="videogame_type" id="videogame_type"> <ul class="nav-category__list" adp ...

pythonhtmlselenium

Tailored alignment of checkboxes and labels

I've designed a custom checkbox where the actual checkbox is hidden and a label is styled to look like a checkbox. Everything works fine, however, when I add a label, it doesn't align properly. Here's the link to the fiddle: http://jsfiddle ...

csscheckbox

Instructions for duplicating the current website address into another browser window or document without user input

I have a desire to create a button within a web browser that, when clicked, will either copy the current URL address into a file or open another web browser and paste it there. Being new to programming, I am unsure of which language to use for this task. ...

javahtml

Incorporating CSS into React.js applications

I am currently working on a project using MERN.io. In my project, I am utilizing the React.js component Dropdown. However, the Dropdown component does not come with its own style and CSS, resulting in no styling at all. ... import Dropdown from 'rea ...

javascriptcssreactjswebpackmern

Can using display: none impact the SEO of a website's navigation menu?

Is there a difference in SEO impact between using display:none with CSS and using display:none with jQuery for menus? Appreciate the insights! ...

jquerycssseomenu

What is the best way to dynamically adjust the size of a Google map on my website automatically

I need assistance with placing a Google map on a webpage along with textboxes in the div below it: <div id="map_area"> <div id="map_canvas"></div> </div> <div id="date_range"> <input type="text" id= ...

csshtmlheight

Modify the CSS formatting of a specific element with its designated ID

On my HTML page, I have an element that looks like this: <label id="lb">Label1</label> In my corresponding CSS file, I have defined the following style for it: #lb{ width:100px; } I want to override this style. What would be the most effect ...

htmlcss

How to send PHP email using HTML form

After attempting to find an answer to my inquiry here, I am now starting a new thread. Just a brief explanation: I have a Contact Form with 180 input fields and calculations for each field. I wish to send all the fields along with the calculated values v ...

phphtmlemail

Could one harness the power of SO's script for adding color to code within questions?

Similar Question: Syntax highlighting code with Javascript I've observed that Stack Overflow utilizes a script to apply color coding to any code shared in questions and answers, making it resemble how it would appear in an IDE. Is this script pub ...

javascriptjqueryhtmlajax

Having trouble with margins not working after adding the clear property in CSS?

I recently applied clear:left to a div in my code, but when I tried adjusting the top margin, nothing seemed to change. Take a look at the snippet below: <!DOCTYPE html> <html> <head> <title>Float</title> <meta cha ...

htmlcss

What should we name this particular style of navigation tab menu?

What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? ...

javascriptcssreactjsmaterial-ui