我的国家文字是垂直书写的,从左到右对齐。
我需要textarea
为此要求自定义文本对齐方式。
默认情况下,文本textarea
是水平书写的,从上到下对齐。我在这篇文章中附上了一张我的国家剧本的照片。
知道我该怎么做吗?如何自定义文本区域的文本对齐方式?
对不起我的英语不好。
我认为您的意思是书写模式而不是对齐方式:您需要让浏览器显示文本,以便文本从上到下垂直排成一行,并且从左到右排列。
这在目前看来是不可能的。但是,您可能会在某些浏览器中使用可编辑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>
一些 JavaScriptdiv
在表单提交时将内容复制到隐藏字段(如果这是为了将表单提交给服务器端处理)。
这是它在 IE 上的工作方式:
好吧,Firefox 38 可以writing-mode: vertical-lr
不带任何前缀支持,但是你必须在about:config
page:中启用这个参数layout.css.vertical-text.enabled
。
请参阅:https ://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode