CODEWITHSUNDEEP
htmlcss
Lucy_learning
Lucy_learning

Reputation: 97

Customize text alignment of textarea

My national script is written vertically, aligned from left to right.

I need to customize text alignment of textarea for this requirement.

By default, text in the textarea is written horizontally, aligned from top to bottom. I attached a picture of my national script with this post.

Any idea how I do this? How do I customize text alignment of text area?

Sorry for my poor English.

enter image description here

Upvotes: 2

Views: 1531

Answers (2)

Alexander Nevsky
Alexander Nevsky

Reputation: 1

Well, Firefox 38 can support writing-mode: vertical-lr without any prefixes, but you must enable this parameter in about:config page: layout.css.vertical-text.enabled.

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

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

I think you mean the writing mode rather than alignment: you would need to have text presented by browsers so that text runs vertically in a line, from top to bottom, and with lines laid out from left to right.

This appears to be impossible at present. However, you might achieve the desired effect in some browsers using an editable div element instead of textarea.

According to the CSS Writing Modes Module Level 3 draft, you could set simply writing-mode: vertical-lr. It seems that there are no implementations yet, but IE has had its own version of this, with differently named values for the property, and Chrome now supports the property but only with a vendor prefix.

However, although there is thus some browser support for the setting in general, it seems that it does not work for textarea: in IE, the text runs vertically but lines run from right to left, with the first line placed at the right of the area; and in Chrome, the text runs horizontally. The reason is probably that textarea elements have a special implementation that conflicts with the implementation of writing mode.

Sample code (you may need to tune font settings to use a font that contains Mongolian letters to see this):

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

So in my test, the div looks OK in IE and in Chrome, but the textarea doesn’t. So maybe you could use <div contenteditable> with some JavaScript that copies the div content to a hidden field upon form submission (if this is for a form to be submitted to server-side processing).

This is how it works on IE:

enter image description here

Upvotes: 3

Related Questions