私の国の文字は縦書きで、左から右に並べられています。
textarea
この要件のために、テキストの配置をカスタマイズする必要があります。
デフォルトでは、 のテキストはtextarea
横書きで、上から下に配置されます。この投稿に私の国のスクリプトの写真を添付しました。
これを行う方法はありますか?テキスト領域のテキスト配置をカスタマイズするにはどうすればよいですか?
下手な英語でごめんなさい。
配置ではなく、書き込みモードを意味していると思います。テキストが上から下に、行が左から右に配置されて、1 行に垂直に表示されるように、ブラウザーでテキストを表示する必要があります。
これは現状では不可能と思われる。div
ただし、一部のブラウザーでは、代わりに編集可能な要素を使用して目的の効果を得ることができますtextarea
。
CSS ライティング モード モジュール レベル 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 での動作は次のとおりです。
Firefox 38 はwriting-mode: vertical-lr
プレフィックスなしでサポートできますが、about:config
ページでこのパラメータを有効にする必要があります: layout.css.vertical-text.enabled
.
参照: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode