javascript - 从上到下垂直对齐文本 HTML5 CSS3

Question

我有一个多语言网页。要求将页面上按钮上的标签倒置显示。我正在使用以下 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;
}

所以输出是这样的:

日文字符可以完美显示，但字母和数字不是，我希望 BASIC2 像日文字符一样

B
A
S
I
C
2

我怎样才能做到这一点？

编辑解释:我正在使用相同的逻辑来转换我的文本，但是如果你看一下日文字符，它们会顺利转换，而普通字母字符往往会“旋转”我不希望英文字符旋转，为什么他们不能与日文字符显示相同。

Answer 1

使用 text-orientation: upright; 这将解决问题。

.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>