もうひとつの「リフローは難しい」、あるいは期待するリフロー その4
61

カテゴリー:WEB,電子書籍,青空文庫 | 投稿者:POKEPEEK2011 | 投稿日:2012年10月7日 |

前回の《もうひとつの「リフローは難しい」、あるいは期待するリフロー その3》で提唱した新しい注記、「地から◯字で開始、地から●字で折り返し」は不採用ということになった。相当するCSSを探してみました見つかりませんし、入力者・校正者にも分かりにくい注記であることは確かなので、納得できることです。

その代わりに浮かび上がった[#整形済み](仮名称:HTMLの<pre>タグに相当)については、そのメリット・デメリット、テキストの入力者・校正者がピンとくるものかどうかが不明ということで、要検討段階に留まっています。

[#整形済み]注記が有効となるのは、「地からの字上げがブロック(数行)ある場合」で、これは『もうひとつの「リフローは難しい」、あるいは期待するリフロー』シリーズの2大テーマの一つです(もうひとつのテーマは「天からの字下げが大きい場合」です)。

私には[#整形済み]注記はメリットが大きいものと思えます。そう思うようになったきっかけ、浮かび上がった問題点などを説明し、XHTMLでのCSS開発者、青空文庫ビューアの開発者の皆さん、テキストの入力者・校正者の皆さんの検討の材料にしていただきたいと思います。

夢野久作『ドグラ・マグラ』HTMLソースでの<br />前の全角空白文字

枯葉さんからの[#整形済み]注記の提案を受けて、<pre>タグや「地からの字上げ」の事例を調べていて出会ったのが夢野久作『ドグラ・マグラ』中の図1で示す箇所の記述でした。XHTMLのソースの中で整形のために<br />の前に全角空白文字を使っています。<br />の前に全角空白文字あるいは半角空白文字が使えるならば、[#地から○字上げ]注記を使わなくても良いケースがあるということになります。

Internet Exploreで表示すると、<br />の前の全角空白文字は表示されなくて、右揃えになってしまいます(図1)、他のWEBブラウザでは図1のSafariの例のように全角空白文字は表示されますが、文字は揃っていません。

図1 現状のXHTMLソースのWEBブラウザでの見え方
図1 現状のXHTMLソースのWEBブラウザでの見え方

各種青空文庫ビューアでの見え方

それでは、該当箇所が各種の青空文庫ビューアで見てみるとどう表示されているのかというと、私の常用ビューアであるえあ草紙/AIR草紙では、なんとIEと同じく、全角空白文字が表示されていなくて、地揃えになっていました。実際に、IEの表示を仕様とみて、それに合わせておられるのかどうかは知りませんが、ここではIE準拠として区別しておきます。

一方、iPhoneの各種青空文庫ビューアの見え方は2種類あります。一つはSafariでの表示に準拠した形で、地からの全角空白文字を表示しているタイプです。bREADER, neo文庫、i読書がこれにあたります。もう一つは、IE風の表示と地からの全角空白文字の表示を避けて、このブロックを天に揃えた形で表示しているタイプです。i文庫S、SkyBookがこれにあたります。

図2 各種青空文庫ビューアでの表示
図2 各種青空文庫ビューアでの表示

このように各種ビューアで表示のされ方が異なるのは、表示処理の上で何かしら難しい問題があることを示唆しています。

4つの注記方法のWEBブラウザでの見え方テスト

では、該当箇所を[#整形済み]注記(<pre>)で表示してみるとどうなるか、他の注記で書き換えたときはどうなるかをみてみます。次の4つの注記方法を、HTMLで試してみます。
 ①現状の注記
 ②<pre>を使う
 ③[#地から○字上げ]を使う
 ④[●字下げ]を使う

<br />前に和文ではなくて、欧文があるとどうなるか、全角空白文字ではなくて、半角空白文字ではどうかを調べるために、「abcdefghijkl」を2行追加しています。

HTMLソースは、こんなふうになると思います。

図3 4つの注記方法のWEBブラウザでの見え方テスト
図3 4つの注記方法のWEBブラウザでの見え方テスト

IE9で横幅40字、横幅17字で表示させた時にどう表示されるかが次の図です。横幅40字では、現状の注記の①だけが右揃えになっています。<pre>を使った②は、文字が小さくなり、行間が空きますが、これは調整することができます。横幅17字の場合は、①と③が後ろ揃えの折り返しがあり、④は画面に表示されません。結局、<pre>を使った②が一番問題ないということになります。

図3A

Safariでは次のように表示されます。横幅40字では、現状の注記方法の①では、<br />の前の半角空白文字は表示されません。<pre>を使った②は、IEと同じです。横幅17字の場合は、IEと同じく①と③が後ろ揃えの折り返しがあり、④は画面に表示されません。やはり、<pre>を使った②が一番問題ないということになります。
図3B

[#整形済み]注記(<pre>)を導入する準備

こうして見てみると、[#整形済み]注記(<pre>)を導入することは十分にメリットがあると思います。ただし、[#整形済み]注記(<pre>)を導入した場合は、WEBブラウザでのフォントの設定を説明する必要があるでしょう。上記のテスト用HTMLでも、等幅フォントの設定を変えると、和文と英文がずれたり、全角空白文字と半角空白文字とが揃わなかったりすることが分かりました。今まで、WEBブラウザでの表示が汚いまま使用してきたのですが、等幅フォントをデフォルトから変えるということを知っただけで、きれいに見えるようになりました。

また、[#整形済み]注記(<pre>)を導入するとなると、青空文庫ビューアの開発者に事前に告知し、和文・英文の等幅フォントの調査や準備をしてもらう必要があるかもしれません(これは多分既に済ませられていることでしょう)。

入力者・校正者がどういう場合に使用したら良いか迷うという点については、注記一覧に幾つか事例を示すことで大丈夫ではないでしょうか。幸い、地付きでこのような表示がされている文章は、それほど多くはないと思います。

[#整形済み]注記(<pre>)はWEBデザイナーの間では知られた問題であるようですので、等幅フォントの設定も知らなかった素人の私は引っ込んで、後は識者にまかせたいと思います。


※本記事中には、利用した作品中の「身体的・精神的資質、職業、地域、階層、民族などに関する不適切な表現」が見られることを予めお断りしておきます。


0 Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.
(c) 2024 aozorablog | powered by WordPress with Barecity