HtmlCss

textarea文字垂直排版

去年开始一直研究蒙古文网站,蒙古文字是世界上唯一竖着写的文字(满文也是竖着写的)。

然后每次写字的时候但都是这样的。

但是这个并不是我想要的结果

然后在网上查了很多的资料个文献,最终使用以下代码:

<div><textarea autofocus="autofocus"></textarea></div>
<style>
    textarea{
        text-align: justify;
        text-orientation: sideways-right;
        display: table-column;
        -ms-writing-mode: tb-lr!important;
        writing-mode: vertical-lr!important;
        font-size: 22px!important;
    }
    div{
        -webkit-writing-mode: vertical-lr;
        -webkit-text-orientation: sideways-right;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        text-orientation: sideways-right;
    }
</style>

截图如下:

好了大功告成!

5 条留言

去留言
  1. 请问使用的是什么字体?我将代码复制在codepen运行,输入蒙文,依然是横排趟着的,并没有出现图二的效果

    1. 青格勒

      你可以给div contenteditable=true属性来达到你的目的

  2. 大神,我在Chrome 浏览器按照这个代码写出来,但是textarea部分的文字还是竖不起来,有什么解决方案嘛~ 我在网上找了一堆,没有找到解决方法~

留下留言

请友善交流,评论可能需要审核后显示。