自定义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