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.

Possible duplicate of [Vertical Text Direction](http://stackoverflow.com/questions/4264527/vertical-text-direction) — Bhavik Patel, Jun 02 '16 at 04:44
It's not a duplicate, that question doesn't answer my problem. — progrAmmar, Jun 02 '16 at 05:00

Ason · Answer 1 · 2016-06-03T04:27:21.143

3

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>

edited Jun 03 '16 at 04:27

answered Jun 02 '16 at 04:44

Ason

79,264
11
79
127

The data is being fed to the application via a Database, the buttons are created dynamically. – progrAmmar Jun 02 '16 at 04:59
@progrAmmar Even easier, as you use script to create them dynamically, just split/join the chars and add a `
` between. – Ason Jun 02 '16 at 05:02
@progrAmmar And if you want, I can add that solution later to my answer, need to run for work now. – Ason Jun 02 '16 at 05:04
Thanks, I get what you are saying, The problem is that the project manager doesn't want to break the word up as the HTML will be "B
A
S
,,,,,," which may not be acceptable, they want the the HTML to be clean and the names spelled the way it is. Is it possible to do without br's may be in CSS? what about ` word-wrap: break-word;` will that work? – progrAmmar Jun 02 '16 at 05:09
@progrAmmar Updated my answer, showing 3 ways, all cross browser, which unfortunately the accepted answer is not, as it does not work on Edge and Safari (yet). – Ason Jun 02 '16 at 19:22
HI LGSon, thanks, I checked that, it doesn't work with IE as well, – progrAmmar Jun 03 '16 at 01:31
Unfortunately the word-break doesn't work either, if you remove font adjust it will go back in one line – progrAmmar Jun 03 '16 at 01:38
@progrAmmar I tested (and updated) my snippet without `font-size-adjust` in Chrome/Edge/IE/Firefox/Safari with success, so how doesn't it work for you? – Ason Jun 03 '16 at 04:32
@progrAmmar Do note you need to combine `word-break: break-all;` with a width that makes the letters not fit 2 side by side, like in this case `width: 12px;` – Ason Jun 04 '16 at 11:29

score 3 · Accepted Answer · answered Jun 02 '16 at 06:03

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>

@progrAmmar Unfortunately this css rule is experimetal. you need to write IE specific style sheet or hack in order to work this in IE - https://developer.mozilla.org/en/docs/Web/CSS/text-orientation — Jinu Kurian, Jun 03 '16 at 04:58

score 0 · Answer 3 · answered Jun 02 '16 at 13:46

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;
 }

Aligning text vertically from top to bottom HTML5 CSS3

3 Answers3