HTMLで縦書きは実現できるか - CSSでの実装とライブラリの活用
CSSでの実装
CSS Writing Modes Level 3
さまざまな言語表記法をサポートする仕様。
writing-modeプロパティで縦書きを指定できる。
writing-mode: tb-rl;
writing-mode: vertical-rl;
-moz-writing-mode: vertical-rl;
-o-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
CSS Writing Modes Level 3
Abstract
CSS Writing Modes Level 3 defines CSS support for various international writing modes, such as left-to-right (e.g. Latin or Indic), right-to-left (e.g. Hebrew or Arabic), bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts).
CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc.
- --
主要なブラウザ上で、簡単に、軽快に、日本語の縦書きレイアウトを実現する JavaScript ・ h2v.js の概要を紹介します。
【2015.05.16 重要】:
Firefox 38 での閲覧時にルビが正しく表示されない不具合に対応した version 3.5.1 を公開しました。アップデートをお勧めします。（少し詳しく）：ダウンロード
- --
NTTソフトウェアは、総務省が主催する「次世代Webブラウザのテキストレイアウトに関する検討会 電子書籍関連分科会」において検討を進めている「次世代Webブラウザを利用した縦書きテキストレイアウトに関する表現の標準化」において、課題抽出のための調査支援者を公募している。募集期間は、21日17時まで。
調査は、WebkitのバグやCSSテストに関する11項目で、調査項目のうちいずれか1つの項目について、課題抽出のための調査を実施し、報告書を提出する。また、調査には、プログラム実装やテストスイート作成、作成したプログラムやテストスイートの標準化団体などへの登録、レビュアーへのレビュー依頼や、レビューに対する回答といった作業も含まれる。なお、調査項目ごとにそれぞれ報酬が設定されている。
応募は、個人、グループを問わず、国籍や住所（国内/海外）も問わないが、日本語か英語でコミュニケーションできることが条件となる。また、代表者（契約者）は20歳以上で、ある必要がある。その他、応募条件の詳細は、公式Webページを参照のこと。
応募は、応募用紙フォーマットに氏名や応募対象の調査項目など必要事項を記載して、メールに添付して運営事務局に送付する。
- - -
3.1. Block Flow Direction: the writing-mode property
This property specifies whether lines of text are laid out horizontally or vertically and the direction in which blocks progress. Possible values:
horizontal-tb
Top-to-bottom block flow direction. The writing mode is horizontal.
vertical-rl
Right-to-left block flow direction. The writing mode is vertical.
vertical-lr
Left-to-right block flow direction. The writing mode is vertical.
h2v.js : Webページを縦書きレイアウトに変換するJavaScript
http://tategaki.info/h2v/
http://tategaki.info/h2v/download/
JavaScript 版 : 縦書き化ツール「竹取JS」
http://taketori.org/js.html
HTMLで縦書きは実現できるか - CSSでの実装とライブラリの活用
http://qiita.com/HieroglypH/items/37e384905bec0317a8ec
CSS Writing Modes Level 3
http://dev.w3.org/csswg/css-writing-modes-3/
http://www.anothersky.pw/skyward/archives/000167.html
NTTソフトウェア、「次世代Webブラウザを利用した縦書きテキストレイアウトに関する表現の標準化」のための調査支援者を公募
http://codezine.jp/article/detail/6951
http://blogos.com/article/54461/
- - -
1. download JavaScript 版 縦書き化ツール「竹取JS」
demo, scroll down and scroll down .
source :
JavaScript 版 縦書き化ツール「竹取JS」
http://taketori.org/js.html
- --
2. Use CSS writing-mode.
The writing-mode property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
The property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container.
Thus the writing-mode property also determines the ordering of block-level content.
Initial value horizontal-tb
Applies to all elements except table row groups, table column groups, table rows, and table columns
Inherited yes
Media visual
Computed value as specified
Animatable no
Canonical order the unique non-ambiguous order defined by the formal grammar
--
Syntax
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: inherit;
writing-mode: initial;
writing-mode: unsel;
Values
horizontal-tb
Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.
vertical-rl
Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.
vertical-lr
Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.
- -
Formal syntax
How to read CSS syntax.
horizontal-tb | vertical-rl | vertical-lr
- -
Example
Example text
.exampleText {
writing-mode: vertical-rl;
}
source :
writing-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
CSS Writing Modes Module Level 3
The definition of 'writing-mode' in that specification.
http://dev.w3.org/csswg/css-writing-modes-3/#block-flow
CSS writing-mode Property
http://www.cssportal.com/css-properties/writing-mode.php
- -
-ms-, -webkit-writing-mode
初期段階でCSS3 Textの一部として議論されていたが、縦書きに関する仕様は紆余曲折を経てCSS Writing Modes Module Level 3で単独の仕様として作成されることになった。
執筆現在、CSSの先行実装として安定版のIEとWebkit、およびFirefox（Nightly）が存在する。
-ms-,-webkit-writing-mode
http://momdo.s35.xrea.com/web-html-test/CSS3-memo/-ms-writing-mode.html
リファレンス
CSS Writing Modes Module Level 3 （Editor's Draft） 3.1. Block Flow Direction: the ‘writing-mode’ property
http://dev.w3.org/csswg/css-writing-modes-3/#block-flow
CSS Writing Modes Level 3 日本語訳（編集者草案）3.1. ブロックフロー方向： writing-mode プロパティ
http://www.hcn.zaq.ne.jp/___/WEB/css-writing-modes-ja.html#block-flow
SVG 1.1（第2版）（REC 2011年8月16日） 10.7.2 行内進行方向の設定
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/text.html#SettingInlineProgressionDirection
SVG 2 （Editor's Draft）10.9.1.1. The inline-progression-direction: the ‘writing-mode’ property
https://svgwg.org/svg2-draft/text.html#SettingInlineProgressionDirection
-ms-writing-mode property
http://msdn.microsoft.com/en-us/library/windows/apps/hh997001.aspx
writing-mode - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
won't fix: Status of 縦書き on Firefox
http://wontfix.blogspot.com/2014/11/status-of-on-firefox.html
Vertical text with CSS 3 Writing Modes
http://generatedcontent.org/post/45384206019/writing-modes
Keine Kommentare:
Kommentar veröffentlichen