Aligning text vertically from top to bottom HTML5 CSS3

Question

I have a multilingual web page. It is required to show the labels on the button on the page upside down. I am using the following CSS:

HTML:

<button class="btn btn-primary topdown-button">
    <div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
    <div>Basic 2</div>
</button>

CSS:

.topdown-button{    
    max-height: 150px;
    min-height: 150px;
    width: 60px;
    border: 3px solid navy;
    vertical-align: top;
    display:block;
}
.topdown-button div{  
    text-transform: uppercase;
    vertical-align:top;
    font-size:18px;
    min-height: 148px;
    position:relative;
    text-align:left;
    -ms-writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl; 
    -o-writing-mode: vertical-rl;        
    writing-mode: vertical-rl;
    text-transform:uppercase;    
    font-size-adjust:0.5;
}

So the output is something like this:

The Japanese characters are displayed perfectly according to desire, but the alphabets and numbers aren't, I want BASIC2 to be like the Japanese characterslike

B
A
S
I
C
2

How can I achieve this?

EDIT FOR EXPLANATION : I am using the same logic to transform my text, but if you look at the Japanese characters they get transformed smoothly, while the normal alphabet characters tend to "ROTATE" I don't want the rotation for English characters, why can't they be displayed the same as Japanese characters.

Answer 1

Updated

Below samples work cross browser , which text-orientation doesn't (yet).

Simplest would be like this, using <br> , manually added or with script.

 var elems = document.querySelectorAll('.test div'); for (var i = 0; i < elems.length; i++) { elems[i].innerHTML = elems[i].textContent.split('').join('<br>') } 

 .topdown-button{ max-height: 150px; min-height: 150px; width: 60px; border: 3px solid navy; vertical-align: top; display: inline-block; } .topdown-button div{ text-transform: uppercase; vertical-align:top; font-size:18px; min-height: 148px; position:relative; text-align:center; text-transform:uppercase; font-size-adjust:0.5; } .divider{ border-top: 1px solid; padding: 10px 0; margin-top: 10px; } 

 <button class="btn btn-primary topdown-button"> <div>お<br>客<br>様</div> </button> <button class="btn btn-primary topdown-button"> <div>B<br>a<br>s<br>i<br>c<br>2</div> </button> <div class="divider">Sample using script</div> <button class="btn btn-primary topdown-button test"> <div>お客様</div> </button> <button class="btn btn-primary topdown-button test"> <div>Basic2</div> </button> 

2:nd alternative, using word-break

 .topdown-button{ max-height: 150px; min-height: 150px; width: 60px; border: 3px solid navy; vertical-align: top; display:block; text-align: center; } .topdown-button div{ text-transform: uppercase; font-size:18px; min-height: 148px; position:relative; text-align:center; margin: 0 auto; word-break: break-all; width: 12px; } 

 <button class="btn btn-primary topdown-button"> <div>お客様</div> </button> <button class="btn btn-primary topdown-button"> <div>Basic2</div> </button> 

Answer 2

Use text-orientation: upright; this will solve the problem.

 .topdown-button{ max-height: 150px; min-height: 150px; width: 60px; border: 3px solid navy; vertical-align: top; display:block; } .topdown-button div{ text-transform: uppercase; vertical-align:top; font-size:18px; min-height: 148px; position:relative; text-align:left; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; writing-mode: vertical-rl; text-transform:uppercase; font-size-adjust:0.5; text-orientation: upright; } 

 <button class="btn btn-primary topdown-button"> <div>お客様</div> </button> <button class="btn btn-primary topdown-button"> <div>Basic 2</div> </button> 

Answer 3

you can utilize flexbox to make you css look more clean. Look this pen

HTML

<button class="btn btn-primary topdown-button">
    <div>お</div>
    <div>客</div>
    <div>様</div>
</button>
<button class="btn btn-primary topdown-button">
    <div>B</div>
    <div>A</div>
    <div>S</div>
    <div>I</div>
    <div>C</div>
    <br>
    <div>2</div>
</button>

CSS

.topdown-button{    
    max-height: 150px;
    min-height: 150px;
    width: 60px;
    border: 3px solid navy;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.topdown-button div{  
    text-transform: uppercase;
    font-size:18px;
 }