CSSで垂直方向の中央に配置するのがややこしい

CSSで、画像や動画を垂直方向の中央に配置したいと考えた。さっそくどのプロパティを使えばいいかググったのだが・・・どうもプロパティ一発というわけにはいかないようだ。もちろん、この問題は、いまさら知らなければモグリであるほどの古典的なものだが、CSSグルではない私は知らなかったので、書いておこうと思う。

もちろん、垂直に中央配置する方法はある。しかしどの方法も、汚いハックなのである。さらに、大抵の初心者が陥る問題がある。

まず誤解しやすいのが、vertical-alignプロパティであろう。これは名前が宜しくない。vertical-alignは、インライン要素のラインボックス（つまり文字列のレイアウト）の垂直方向の配置を指定するためのプロパティである。残念ながら、凡人が期待するようには動かない。

ただし、テーブルセルにvertical-alignを適用した場合のみ、凡人が期待するように動く。つまり、要素自体のアラインを垂直方向に対して指定できる。

CSS 2.1: vertical-align
CSS2.1: Table height algorithms

つまり、vertical-alignには、二つの全く異なる機能が混在しているといっていい。なんとも悲惨な仕様である。

ただし、このテーブルセルの仕様は利用できる。つまり、displayプロパティで、要素をtable-cellに変えてしまえば、vertical-alignが使えるのだ。ただし、その要素を囲むdisplayプロパティがtableな要素が必要になってしまうのが欠点だが。

<div style=" display : table ; ">
    <div style=" display : table-cell ; vertical-align : middle ; ">
        <!-- 実際のコンテンツ -->
    </div>
</div>

この方法は、コンテンツのheightをあらかじめ知っておく必要はないし、コンテンツのheightを動的に変えても問題のない、現時点で最良の方法である。IE8以下では動かないようだが、CSSの信奉者は、IE8などという劣ったブラウザーはもとより使わないので問題はない。

一応、CSS 3には、Flexible Box Modelというのが提案されているようだが、どうも仕様が二転三転して、未だに固まっていないように思われる。現時点では、まだ使うべきではない。

青空縦書きリーダーを大幅に更新

青空縦書きリーダー - Google Chrome extension gallery

Chrome extensionの青空縦書きリーダーを大幅に更新した。ブラウザーアクションを追加した。

ブラウザーアクションから、任意のサイトを縦書き化可能になりました。ただし、webkitの実装が完全ではないため、色々と不都合があります。

ブラウザーアクションから、ルビ表示の切り替えが可能になりました。

chrome.tabs APIへのアクセスと、任意のサイトへのcontent scriptの注入のため、パーミッションを変更しています。そのため、アップデート後は手動で有効にする必要があります。

Chrome自体のバグのため、ローカルファイルに対して縦書き化やルビ切り替えが効きません。

browser_action on file:/// - Chromium-extensions | Google Groups
Issue 76705 - chromium - file:// not working for "permissions" in extensions, but does work for content scripts. - An open-source browser project to help move the web forward. - Google Project Hosting

Chrome extension: 青空縦書きリーダー

青空縦書きリーダー - Google Chrome extension gallery

青空文庫 縦書き拡張 - 冬通りに消え行く制服ガールは、夢物語にリアルを求めない。 - subtechをみて、色々と惜しい感じがしたので、自分でも作ってみた。

Google Chromeのエクステンションとして動作する。何か特別なことをする必要はない。青空文庫のXHTML版が、自動的に縦書きになる。

例えば、森鴎外の舞姫とか、夏目漱石の吾輩ハ猫デアル、中島敦の山月記などがおすすめだ。

chrome://extensions/のオプションから、フォントの種類や大きさ、マウスホイールの挙動、追加のCSSを変更可能。

ちなみに、この仕組を使えば、青空文庫以外にも、単純なテキストで構成されているサイトなら、縦書き化が可能である。いまは任意のサイトを縦書き化するためのUIを実装していないが、需要があれば実装するつもりだ。

バージョン情報

Version 0.40
パーミッションを変更したため、アップデート後に手動で有効にする必要があります。
ブラウザーアクションを実装。
任意のページを縦書き化が可能。
ただし、Chrome自体のバグのため、ローカルファイルは縦書き化できず。
参考：Issue 76705 - chromium - file:// not working for "permissions" in extensions, but does work for content scripts. - An open-source browser project to help move the web forward. - Google Project Hosting
ルビ表示の切り替えが可能。

Version 0.30
設定の保存方法を変更
以前のバージョンの設定は引き継がれません。

Version 0.21
marginを微調整

Version 0.20
キーボードショートカットのエミュレートをサポート
フォント設定の見直し（複数選択可にした）

Version 0.12
設定をしないと、マウスホイールのエミュレートが効かない問題を修正

webkitにおけるvertical writingは、まだ実装途中であり、正しく動作しません。そのため、このextensionは、将来、互換性を損なう形でアップデートされるか、あるいは放置されているかもしれません。

縦書きtextarea要素

以下は、縦書きのtextarea要素の例である。Windows上のChromeで動く。もちろん、入力できる。是非とも試してもらいたい。

##スナミ ハニリイト モイスキイ %リニトカ32131 テニシカク クイキクカ ソ テニシカク トントカイモ ソラモモチミシ!17! セリチン942##スナミ ハニリイト モイスキイ セリチン942##スナミ ハニリイト モイスキイ ラモモチミシ!17! クイキクカ ソラモモチミシ!17! ミイテ222 トントカイモ テニシカク クイキクカ 2 トントカイモ セリチン942 ミイテ222 セリチン942##スナミ ハニリイト モイスキイ %リニトカ32131 ミイテ222 トントカイモ テニシカク クイキクカ ソラモモチミシ!17! %リニトカ32131 %リニトカ32131 ミイテ

赤いピルを飲むと、不思議の国は続行だ。ウサギの穴がどれだけ深いか見せてやろう。

Chromeで、CSSによる縦書きとマルチカラムレイアウトの合わせ技を試す

CSS Multi-column Layout Module

CSS3には、マルチカラムレイアウトが規定されている。これは、縦書きと組み合わせることができる。例えば、以下の様なCSSを使うと、

<div style="
    column-width: 15em ;
    column-gap: 2em ;          
    column-rule: thin solid black ;
    -webkit-column-width: 15em ;
    -webkit-column-gap: 2em ;
    -webkit-column-rule: thin solid black ;

    writing-mode : vertical-rl ;
    -webkit-writing-mode : vertical-rl ;
    font-family : '@ＭＳ 明朝' ;
    font-size : 16pt ;
    line-height : 2em ;

">
<p>
本分
</p>
</div>

以下のように表示される。

　趙（ちょう）の邯鄲（かんたん）の都に住む紀昌（きしょう）という男が、天下第一の弓の名人になろうと志を立てた。己（おのれ）の師と頼（たの）むべき人物を物色するに、当今弓矢をとっては、名手・飛衛（ひえい）に及（およ）ぶ者があろうとは思われぬ。百歩を隔（へだ）てて柳葉（りゅうよう）を射るに百発百中するという達人だそうである。紀昌は遥々（はるばる）飛衛をたずねてその門に入った。
　飛衛は新入の門人に、まず瞬（またた）きせざることを学べと命じた。紀昌は家に帰り、妻の機織台（はたおりだい）の下に潜（もぐ）り込（こ）んで、そこに仰向（あおむ）けにひっくり返った。眼（め）とすれすれに機躡（まねき）が忙しく上下往来するのをじっと瞬かずに見詰（みつ）めていようという工夫（くふう）である。理由を知らない妻は大いに驚（おどろ）いた。第一、妙（みょう）な姿勢を妙な角度から良人（おっと）に覗（のぞ）かれては困るという。厭（いや）がる妻を紀昌は叱（しか）りつけて、無理に機を織り続けさせた。来る日も来る日も彼（かれ）はこの可笑（おか）しな恰好（かっこう）で、瞬きせざる修練を重ねる。二年の後（のち）には、遽（あわた）だしく往返する牽挺（まねき）が睫毛（まつげ）を掠（かす）めても、絶えて瞬くことがなくなった。彼はようやく機の下から匍出（はいだ）す。もはや、鋭利（えいり）な錐（きり）の先をもって瞼（まぶた）を突（つ）かれても、まばたきをせぬまでになっていた。不意に火（ひ）の粉（こ）が目に飛入ろうとも、目の前に突然（とつぜん）灰神楽（はいかぐら）が立とうとも、彼は決して目をパチつかせない。彼の瞼はもはやそれを閉じるべき筋肉の使用法を忘れ果て、夜、熟睡（じゅくすい）している時でも、紀昌の目はカッと大きく見開かれたままである。ついに、彼の目の睫毛と睫毛との間に小さな一匹（ぴき）の蜘蛛（くも）が巣（す）をかけるに及んで、彼はようやく自信を得て、師の飛衛にこれを告げた。

これも、Windows上のChromeで動作を確認した。これは、私が手動で罫線を挿入したのではない。ブラウザーが自動でマルチカラムレイアウトを計算しているのである。

ただし、現在のwebkitにおけるマルチカラムレイアウトの実装は、かなり不完全である。他のCSSプロパティとの組み合わせがうまく動かないし、ボックスモデルの計算もかなりおかしい。特に、縦書きと組み合わせて、長い文字列を描画させた際に、描画がうまくいかなくなる。そのような未熟な実装だからこそ、まだベンダープレフィクスが必要なのだろう。

CSS3のプロパティ、text-combine

CSS3で規定されている、text-combineは、縦中横を実現するプロパティである。以下のように使う。ただし、例によってwebkitのベンダープレフィクスを使用した。Windows上のChromeで動作を確認している。

<p style="
    writing-mode : vertical-rl ;
    -webkit-writing-mode : vertical-rl ;
    font-family : '@ＭＳ 明朝' ;
    height : 10em ;
">
平成<span style="text-combine : horizontal ; -webkit-text-combine : horizontal ;">20</span>年
<span style="text-combine : horizontal ; -webkit-text-combine : horizontal ;">4</span>月
<span style="text-combine : horizontal ; -webkit-text-combine : horizontal ;">16</span>日に
</p>

平成20年 4月 16日に

text-combineを使わない例は、以下の通り。

平成20年 4月 16日に

CSS Writing Modes Module Level 3

Chromeがいつの間にか縦書きを実装し始めていた

注意：ここに示したCSSは、実用的な目的には、まだ使ってはならない。何故ならば、-webkitベンダープレフィクスを使っているからである。。これは、webkitの実装がまだ完全ではないことを意味する。

Chrome（というよりもwebkit）がいつの間にか、縦書きを実装し始めていた。つまり、CSS3のwriting-modeプロパティのvertical-rlとvertical-lrをサポートしているのである。まだ、ベンダープレフィクスが必要なので、完全な実装ではないのかもしれないが、少なくとも、ある程度は動くようだ。

例えば、以下の様なマークアップが、

<p style="
writing-mode : vertical-rl ;
-webkit-writing-mode : vertical-rl ; 
font-family : '@ＭＳ 明朝' ;
font-size : 16pt ;
height : 30em ;
">
本分
</p>

　趙（ちょう）の邯鄲（かんたん）の都に住む紀昌（きしょう）という男が、天下第一の弓の名人になろうと志を立てた。己（おのれ）の師と頼（たの）むべき人物を物色するに、当今弓矢をとっては、名手・飛衛（ひえい）に及（およ）ぶ者があろうとは思われぬ。百歩を隔（へだ）てて柳葉（りゅうよう）を射るに百発百中するという達人だそうである。紀昌は遥々（はるばる）飛衛をたずねてその門に入った。
　飛衛は新入の門人に、まず瞬（またた）きせざることを学べと命じた。紀昌は家に帰り、妻の機織台（はたおりだい）の下に潜（もぐ）り込（こ）んで、そこに仰向（あおむ）けにひっくり返った。眼（め）とすれすれに機躡（まねき）が忙しく上下往来するのをじっと瞬かずに見詰（みつ）めていようという工夫（くふう）である。理由を知らない妻は大いに驚（おどろ）いた。第一、妙（みょう）な姿勢を妙な角度から良人（おっと）に覗（のぞ）かれては困るという。厭（いや）がる妻を紀昌は叱（しか）りつけて、無理に機を織り続けさせた。来る日も来る日も彼（かれ）はこの可笑（おか）しな恰好（かっこう）で、瞬きせざる修練を重ねる。二年の後（のち）には、遽（あわた）だしく往返する牽挺（まねき）が睫毛（まつげ）を掠（かす）めても、絶えて瞬くことがなくなった。彼はようやく機の下から匍出（はいだ）す。もはや、鋭利（えいり）な錐（きり）の先をもって瞼（まぶた）を突（つ）かれても、まばたきをせぬまでになっていた。不意に火（ひ）の粉（こ）が目に飛入ろうとも、目の前に突然（とつぜん）灰神楽（はいかぐら）が立とうとも、彼は決して目をパチつかせない。彼の瞼はもはやそれを閉じるべき筋肉の使用法を忘れ果て、夜、熟睡（じゅくすい）している時でも、紀昌の目はカッと大きく見開かれたままである。ついに、彼の目の睫毛と睫毛との間に小さな一匹（ぴき）の蜘蛛（くも）が巣（す）をかけるに及んで、彼はようやく自信を得て、師の飛衛にこれを告げた。

このように、見事な縦書きになる。（Windows上のChromeで動作を確認）

ただし、現状のChromeの実装には、いくつか問題がある。まず、通常の横書きのように、word wrapがきかないという問題だ。そのため、上の例では、仕方なくheight propertyを使用している。また、フォントの問題もある。頭に@のつくフォント名は、実際のフォントではなく、Windows独自の機能である。そのため、このマークアップは、Windows以外では動かないだろう。

また、フォントの描画が、何か微妙におかしい。

禁則処理もされていないので、改行が不自然だ。その他、あらゆる日本語の組版の常識が欠けている。

そのため、この縦書きは、まるで画像を貼り付けたようにみえる。何もかもが固定、環境依存で、あまり使いやすくはない。

追記：ルビのせいで、行間がまばらになるという指摘があったので、とりあえず修正した。行間は、CSSのline-heightプロパティで修正可能である。実用的に行間を調節するには、ルビのrt要素のスタイルも調整する必要がある。ブログのようなサイトにおいて、この調整を記事単位で可能にするために、style要素のscoped属性を、早くサポートしてもらいたいものだ。

追記2:現行のChromeでは何故か、vertical-lrがvertical-rlと同じように動く。まだ不完全である。

追記3:縦書きをマルチカラムレイアウトと組み合わせてみた。本の虫: Chromeで、CSSによる縦書きとマルチカラムレイアウトの合わせ技を試す。この縦書き表示に感動した人は、これを見ると、もっと感動できるはずだ。

追記4: 青空文庫を縦書き化できるChrome extensionを作りました。青空縦書きリーダー - Google Chrome extension gallery

CSS Writing Modes Module Level 3

CSSでキュウべえ(FULL)を描いてみた

CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS

CSSでキュウべえ(FULL)を描いてみた - jsdo.it - share JavaScript, HTML5 and CSS

これはすごい。

キュウべえというのは、「魔法少女まどか☆マギカ」というアニメに出てくる、白い小さい可愛い小動物である。しかし、この魔法少女まどかマギカというアニメは、閲覧者に暴力的な影響を与える、非常に危険で有害なアニメである。私は実際に観ていないので詳細は不明だが、このアニメを見たものは皆、この白い小さい可愛い小動物であるキュウべえを虐待したいという衝動にかられるらしい。理解に苦しむ現象である。

ああ、始まってしまった

Vendors using Competing Prefixes - Snook.ca

こんなことが行われていたとは。MSらしいといえば、MSらしいが。ああしかし、地獄へようこそ。

東風吹かば

東風吹かばにほひをこせよ梅花　主なしとて春を忘るな

贈正一位 太政大臣 菅原道真

ここ最近、天気が悪かった。また、Pittsburgh meetingもあるので、この五日間は、家に引きこもって、meetingの次第が逐一報告される、非公開のWikiを睨み暮らしていた。数週間もすれば、post-Pittsburgh mailingが公開されるはずだ。

私が、大幅な変更といったのは、Funny Lvalueの問題である。lvalueとrvalueは、意味が広すぎる。これを、もっと細分して、わかり易い名前をつけて、分類しようという事が、meetingで決定された。その結果、だいぶわかりやすくなったと思う。詳細は、N3055が公開されてから、解説する。

ふと気がつけば、私はここ数カ月、C++の規格しか読んでいない。なんだか、少しつかれた気がする。そこで、何か芸術作品を読むことにした。芥川龍之介の河童である。

芥川龍之介は、当時は所詮、売文の徒である。しかし、現代では、一流の芸術作品として名が高い。実際、芥川龍之介の文章は、なにか引き込まれるものがある。どうしても続きを読まなければ、気が済まなくなるのだ。芥川龍之介の河童は、短い話である。しかし、私にはどうも、かなり長い話のように思える。これは、現代小説にはなかなか見られない文章だ。現代の小説は、とりあえずページ数を埋めればいいという考えのもとに、だらだらといかにも取ってつけたような理由で話を引き伸ばしている。そんな小説は、読む気がなくなってしまう。

青空文庫：芥川龍之介　河童

なぜ芥川龍之介の河童を読もうと思ったのか。というのも、以前の東方かつ杜子春ネタなマンガの、作者を発見したからである。

「東方大妖怪　橙の好き好き藍様ハートフル大冒険」/「ボディ・マハッタヤ・銀河」のイラスト [pixiv]

この人だったらしい。

いい天気だったので、一週間ぶりにジョギングをすることにした。やはり、一週間サボると、体力が落ちるものだ。

とりあえず、Pittsburgh meetingも終わったので、仕事にかかるとしよう。これから創刊するプログラミング雑誌には、さる有名な人へのインタビューが載る。私が質問して、翻訳して、雑誌に載せるのだが、興味深いインタビューになるはずだ。時間的に間に合えばいいのだが。

河童 (集英社文庫)

Google Readerの横幅を制限しない方法

私は、多くのブログをGoogle Reader経由で読んでいる。しかし、Google Readerは、このように、max-widthを650pxに固定している。これは、左側のパネルを閉じれば、解除される。私は、このような制限を好まない。

私は、1920x1200のディスプレイを使っているのである。もし、文字の幅が広すぎて読みにくいというのであれば、自分でブラウザのウインドウサイズを調節する。サイト側で固定されたmax-widthのお世話になる必要はない。

そこで、Google Readerの、この制限を、extensionで書き換えてやろう。

#entries .entry-body, #entries .entry-likers
{
    max-width : 100% !important ;
}

これでよし。

CSSをやりすぎた

a:hoverの際、背景色を変更するようにしているが、丸角を使ってみたくなった。

まてよ、せっかくだから、文字サイズを大きくしてみるのも、面白そうだ。

その結果、こうなった。このブログのリンクにマウスカーソルを当てると、面白いことになる。これは、人によって好みがあると思う。続けるかどうかは未定。border-radiusはともかく、マウスカーソルの当たっている要素の背景色やフォントサイズを変えるのは、別に目新しい機能ではない。そういうサイトが少ないというのは、あまり好まれないのだろうか。わたしは、マウスカーソルを当てているリンクの背景色が変わってくれた方が、分かりやすくていいのだが。

ちなみに、一番上のナビバーは、インラインフレームで実装されているため、変わらない。