progrAmmar progrAmmar - 6 months ago 16
Javascript Question

Aligning text vertically from top to bottom HTML5 CSS3

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:

enter image description here

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

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>