CSS Writing Modes
Since you may not have a lot of time, I’m going to start at the end, with the dessert. You can use a little-known, yet important and powerful CSS property to make text run vertically. Like this. Or instead of running text vertically, you can layout a set of icons or interface buttons in this way. Or, of course, with anything on your page. The CSS I’ve applied makes the browser rethink the orientat
CSS3 Writing Modesの仕様解説
Writing Modes CSS2では、directionやunicode-bidiプロパティが定義され、横書きの複雑なレイアウトを行うアラビア語などの双方向言語(BIDI)が扱えるようになっていました。 CSS3では、テキストの進行方向に関する仕様は「Writing Modesモジュール」にまとめられ、BIDIに加えて縦書きへの対応などが追加されています。 Writing Modesモジュールでは、行の進行方向、文字の進行方向、文字の向き、などの書字方向全般の仕様が定義されています。 なお、Writing Modesの仕様は頻繁に改訂されています。 この記事は、最新のEditor’s Draft（2015年11月1日改訂）を解説したものです。 参照URL: https://drafts.csswg.org/css-writing-modes-3/ Writing Modesモジュールで
Chinese language on the web
If you hadn’t realised by now, I am Chinese. I was born in Malaysia, then studied and now work in Singapore. Like many others with similar backgrounds, we speak both English and Chinese with native fluency, plus a smattering of other languages and dialects here and there. A couple of months back, I went down a rabbit hole while researching my article on CSS display and discovered the HTML ruby ele
異体字セレクタを含む漢字が縦書きのウェブページでうまく表示されないときの対策｜Colorless Green Webs
異体字セレクタを含む漢字の出力 異体字セレクタを指定すれば、漢字の細かい字形を区別して出力することができる 。例えば、以下の「朝ご飯の前に、父と愉快に遊ぶ」という文に、適切な異体字セレクタを指定すれば、下段のような字形で出力することができる。 横書きで異体字セレクタを含んだ漢字を出力した例。 上に挙げた例のソースは以下の通りである。 <div> <h2>横書き</h2> <h3>異体字セレクタなし</h3> <p>朝ご飯の前に、父と愉快に遊ぶ。</p> <h3>異体字セレクタあり</h3> <p>朝󠄁ご飯󠄂の前󠄁に、父󠄁と愉󠄁快に遊󠄁ぶ。</p> </div> 縦書きでの問題 横書きならばこのように異体字セレクタを使って細かい字形が出力できるのだが、縦書きではうまく出力できないことがある。 例え
writing-mode - 縦書きの指定 - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋
*1：ベンダー接頭辞が必要。 *2：古い仕様のプロパティ値による実装。 *3：関連バグ Issue #9713176、当該Edge Developer Feedback。 *4：-ms-text-combine-horizontalとして実装。 *5：-webkit-text-combineとして実装。ただし今回テストしたブラウザーでは機能していないように見える。 *6：layout.css.text-combine-upright-digits.enabledが用意されているが未実装の模様。Bug 1258635も参照。 縦書きの簡単な例 「新しい朝が来た 希望の朝だ。ＡＢＣ！？」(defg,123456!?). 対応状況を鑑みて、次のようなコードとした。 <style> .vertical { font-family: "游明朝", "ＭＳ 明朝", serif; /* Windows
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
writing-mode | Codrops
