css Question posted in
Some basic documentation can be found here.

Css vertical-rl does not rotate korean characters

enter image description here

I’m applying writing-mode: vertical-rl; to a div tag containing the word "A중385" but it only changes the direction of "A385" and the word 중 doesn’t change direction. Please help me solve this problem.

I am use css writing-mode: vertical-rl; but it’s not working

this is my sample code:

.vertical{
    writing-mode: vertical-lr;
}

<div class="vertical">
    A중385
</div>
Tags:

2

Answers


  1. 0

    The reason is that Latin characters and Korean characters have different behaviour in vertical writing modes. While writing-mode: vertical-rl; changes the direction for Latin characters (like "A" and "385"), the Korean character "중" is handled differently due to Unicode’s default text handling, resulting in inconsistent orientation.

    You can use the unicode-bidi proerty here. It allows you to control how bidirectional text (both left-to-right and right-to-left scripts) is treated. When combined with the direction property, it ensures that different types of characters (e.g., Latin and Korean) behave consistently in the writing mode.

    Here’s a potential solution for your issue:

    .vertical {
    writing-mode: vertical-rl;
    direction: rtl;
    unicode-bidi: isolate;
}
    Login or Signup to reply.
  2. 0

    Solution I can think of is to manually rotate the 중

    .vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.vertical span.rotate {
    display: inline-block;
    transform: rotate(90deg); 
}
    <div class="vertical">
    A<span class="rotate">중</span>385
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search