自定义textarea的文本对齐方式

Question

我的国家剧本是垂直书写的，从左到右对齐。

我需要为此要求自定义textarea的文本对齐方式。

默认情况下，textarea中的文本是水平书写的，从上到下对齐。我用这篇文章附上了我国家剧本的照片。

知道我是怎么做到的吗？如何自定义文本区域的文本对齐方式？

抱歉我的英语不好。

Answer 1

我认为你的意思是写作模式而不是对齐方式：你需要让浏览器提供文本，以便文本在一行中垂直运行，从上到下，从左到右排列。

目前这似乎是不可能的。但是，您可以使用可编辑的div元素而不是textarea在某些浏览器中实现所需的效果。

根据CSS Writing Modes Module Level 3草案，你可以简单地设置writing-mode: vertical-lr。似乎还没有实现，但IE有自己的版本，具有不同的属性值，Chrome现在支持该属性，但只有供应商前缀。

然而，尽管一般来说浏览器支持一些设置，但似乎它对textarea不起作用：在IE中，文本垂直运行但是行从右到左运行，第一行放在右边的区域;在Chrome中，文本水平运行。原因可能是textarea元素具有与写入模式的实现冲突的特殊实现。

示例代码（您可能需要调整字体设置以使用包含蒙古字母的字体来查看）：

<style>
div,
textarea {
  writing-mode: tb-lr;
  -moz-writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
}
</style>
<textarea rows=7 cols=7>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ ᠤᠯᠠᠭᠠᠨᠪᠠᠭᠠᠲᠤᠷ</textarea>
<div style="width: 5em; height: 4em; border: solid blue 1px">
ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ ᠤᠯᠠᠭᠠᠨᠪᠠᠭᠠᠲᠤᠷ
</div>

因此，在我的测试中，div在IE和Chrome中看起来不错，但是textarea没有。所以也许你可以使用<div contenteditable>和一些JavaScript，在表单提交时将div内容复制到一个隐藏字段（如果这是一个表单提交给服务器端处理）。

这是它在IE上的工作方式：

Answer 2

好吧，Firefox 38可以支持没有任何前缀的writing-mode: vertical-lr，但是你必须在about:config页面中启用这个参数：layout.css.vertical-text.enabled。

见：https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode