Question 244178 in CSS Question posted in
Some basic documentation can be found here.

Css – Why don't these Japanese characters line up vertically?

Why don’t these Japanese characters line up vertically? I want the Romaji underneath the Kanji, I don’t want vertical text.

.result {
  margin-left: 4px;
  float: left;
}
<div>
  <span class="result">
    <div>
      <div>朝</div>
      <div>asa</div>
    </div>
  </span>
  <span class="result">
    <div>
      <div>もちろん</div>
      <div>mochiron</div>
    </div>
  </span>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This fixed it

    .result {
  margin-left: 4px;
  display:inline-block;
}
    <div>
  <div class="result">    
      <div>朝</div>
      <div>asa</div>
    </div>

  <div class="result">    
      <div>もちろん</div>
      <div>mochiron</div>
    </div>  
</div>


  2. 0

    You can use the writing-mode css property to display vertical text.

    e.g.:

    .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.5;
    font-family: Arial, sans-serif; /* You need to choose a font that supports vertical text */
}

    In this example I use writing-mode: vertical-rl to set the direction of the text flow, text-orientation: upright to control the orientation of characters within the vertical text and line-height: 1.5 to control the spacing between characters.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search