DAISY録音図書再生用ソフトウェアで反転位置を変更する
はじめに
DAISY録音図書再生用ソフトウェアの代表的なものは以下の2つがあげられます。
- LpPlayer
- AMIS
これらのソフトウェアは、音声と同期しているテキストイベントがある場合、そのテキストイベントの背景色を黄色で反転表示しますが、黄色で表示する部分はXHTMLが横書きの場合はページの上方に、XHTMLが縦書きの場合はページの左方にそれぞれ固定されて文章が読みにくい場合があります。
横書きと縦書きのCSSにおいて、この反転表示部分を変更する方法を以下に記します。
縦書きにおける反転位置変更の原理
以下にXHTMLとCSSのソースコードを示します。
XHTMLソースコード
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<title>３ 情報バリアフリー</title>
<link rel="stylesheet" href="tate.css" type="text/css" media="display" />
</head>
<body>
<div>
<h1 id="text_0009"><a href="zxrc0009.smil#text_0009">３ 情報バリアフリー</a></h1>
<div id="body">
<p>
<span id="zxrc_0028">インターネットにはテキスト情報がたくさんあります。</span>
<span id="zxrc_0029">個人や法人が提供するありとあらゆる種類の情報があり、
検索エンジンにより検索も容易です。</span>
</p>
<p>
<span id="zxrc_002a">視覚に障害のある人は音声ブラウザでホームページにアクセスし
テキスト情報を入手することができます。</span>
<span id="zxrc_002b">しかし、なかには読めない情報もたくさんあります。</span>
<span id="zxrc_002c">例えば、文字でなく画像として提供される情報は読めません。</span>
</p>
<p>
<span id="zxrc_002d">そういった状況の中、情報バリアフリーへの要求が高まっています。</span>
</p>
<p>
<span id="zxrc_002e">情報には、活字メディアにしかない情報、電子メディアにしかない情報、
どちらにもある情報、どちらにもない情報、があります。</span>
</p>
<p>
<span id="zxrc_002f">書籍、雑誌、新聞などは、活字メディアが圧倒的に充実しています。</span>
<span id="zxrc_0030">紙は非常に優れた表示装置です。</span>
<span id="zxrc_0031">紙と同じぐらい軽くて柔らかなディスプレイが開発されないかぎり
決してペーパーレス時代は来ないでしょう。</span>
<span id="zxrc_0032">しかし、情報検索は電子メディアの独壇場です。</span>
</p>
<p>
<span class="page-normal" id="atau_0001"><a href="zxrc0009.smil#page_0007">6</a></span>
</p>
<p>
<span id="zxrc_0033">現状では、活字メディアへのアクセスはほぼＯＣＲしかありません。</span>
</p>
<p>
<span id="zxrc_0034">出版社には電子テキストがありますが、電子テキストは
無防備なメディアですからコピーが容易です。</span>
<span id="zxrc_0035">だから出版社も著者も出版権や著作権の侵害を心配します。</span>
</p>
<p>
<span id="zxrc_0036">出版社によってはテキストファイルを提供してくれる場合もありますが、
いろいろと交渉や手続きが必要で、簡単には提供してくれません。</span>
<span id="zxrc_0037">しかし中には電子図書を販売する出版社も若干あります。</span>
<span id="zxrc_0038">著作権を尊重しつつ、電子テキストを必要としている人に供給する
社会的仕組みを構築する必要があります。</span>
</p>
<p>
<span id="zxrc_0039">バリアフリー電子図書の標準化と電子図書を共有する仕組みの開発が望まれます。</span>
<span id="zxrc_003a">アメリカではbookshare.orgというところがOCRで入力して作成したテキストファイルを、
Sigtuna DAR 3を使ってテキストだけのDAISYにし、それに著作権保護の処理を施して
ネットワーク上に置いて交換する仕組みを作っています。</span>
<span id="zxrc_003b">利用者は専用のリーダーソフトを使って読書しています。</span>
<span id="zxrc_003c">日本でも同じような試みが始まるとよいと思います。</span>
</p>
<p>
<span class="page-normal" id="atau_0002"><a href="zxrc0009.smil#page_0008">7</a></span>
</p>
</div>
</div>
</body>
</html>
CSSソースコード
@charset "shift_jis";
body {
direction:rtl;
overflow-x:scroll;
overflow-y:auto;
line-height:2em;
}
div {
direction:ltr;
writing-mode:tb-rl;
letter-spacing:0.1em;
font-family:monospace;
border:solid 1px #f00;
position:absolute;
}
h1 {
margin:1em;
border:solid 1px #0f0;
}
div#body {
position:relative;
border:solid 1px #00f;
padding:2% 5em 2% 0;
}
p {
text-indent:1em;
}
span {
position:relative;
left:5em;
text-indent:1em;
border:solid 1px #0ff;
}
表示例:
画像のリンクを辿ると拡大します。
div要素に対するposition:absolute- 親要素(この場合はbody=ページ)に対してdiv要素の絶対的な位置を指定します。位置は特に指定していないので、ページが絶対位置となります(何らかの位置指定があった場合は、body要素から指定した位置にdiv要素が描画されます)。
- 識別子がbodyのdiv要素に対する
position:relative - XHTMLソースコードで本文となる部分はbodyというIDが指定されています。宣言部分では
position:relativeが指定されていますが、これは本来の位置から指定された位置に内容を表示します。位置指定がされていないので親要素のすぐ内側に描画されます。 span要素に対するposition:relative- 本来の位置から指定された位置に内容を描画しますが、この場合は
left:5emが指定されています。これは、親要素(この場合は識別子がbodyのdiv要素)に対して、左から5emずれて描画されます。
DAISY録音図書再生用ソフトウェアでは、ID識別子でテキストイベントなどを反転表示していますが、ID識別子を持ったspanタグはページに対して5em左からずれて描画されるため、反転位置も左から5em分ずれます。これにより、ページの左方で固定されていた反転表示を変更することが出来ます。
ただし、spanで括られた内容全てが左から5emずれるため、フォントサイズを大きくすると見出しの３ 情報バリアフリー
とspanタグ内のテキストが重なってしまいます。これを防止するため、識別子bodyのdiv要素に対して、右側に5emのパディングを付けて打ち消しています。上方と下方に2%のパディングが指定されていますが、これはページを見やすくするためのものです。
横書きにおける反転位置変更の原理
以下にXHTMLとCSSのソースコードを示します。
XHTMLソースコード
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<title>３ 情報バリアフリー</title>
<link rel="stylesheet" href="tate.css" type="text/css" media="display" />
</head>
<body>
<div>
<h1 id="text_0009"><a href="zxrc0009.smil#text_0009">３ 情報バリアフリー</a></h1>
<p>
<span id="zxrc_0028">インターネットにはテキスト情報がたくさんあります。</span>
<span id="zxrc_0029">個人や法人が提供するありとあらゆる種類の情報があり、
検索エンジンにより検索も容易です。</span>
</p>
<p>
<span id="zxrc_002a">視覚に障害のある人は音声ブラウザでホームページにアクセスし
テキスト情報を入手することができます。</span>
<span id="zxrc_002b">しかし、なかには読めない情報もたくさんあります。</span>
<span id="zxrc_002c">例えば、文字でなく画像として提供される情報は読めません。</span>
</p>
<p>
<span id="zxrc_002d">そういった状況の中、情報バリアフリーへの要求が高まっています。</span>
</p>
<p>
<span id="zxrc_002e">情報には、活字メディアにしかない情報、電子メディアにしかない情報、
どちらにもある情報、どちらにもない情報、があります。</span>
<span id="zxrc_002f">書籍、雑誌、新聞などは、活字メディアが圧倒的に充実しています。</span>
<span id="zxrc_0030">紙は非常に優れた表示装置です。</span>
<span id="zxrc_0031">紙と同じぐらい軽くて柔らかなディスプレイが開発されないかぎり
決してペーパーレス時代は来ないでしょう。</span>
<span id="zxrc_0032">しかし、情報検索は電子メディアの独壇場です。</span>
</p>
<p>
<span class="page-normal" id="atau_0001"><a href="zxrc0009.smil#page_0007">6</a></span>
</p>
<p>
<span id="zxrc_0033">現状では、活字メディアへのアクセスはほぼＯＣＲしかありません。</span>
</p>
<p>
<span id="zxrc_0034">出版社には電子テキストがありますが、電子テキストは
無防備なメディアですからコピーが容易です。</span>
<span id="zxrc_0035">だから出版社も著者も出版権や著作権の侵害を心配します。</span>
</p>
<p>
<span id="zxrc_0036">出版社によってはテキストファイルを提供してくれる場合もありますが、
いろいろと交渉や手続きが必要で、簡単には提供してくれません。</span>
<span id="zxrc_0037">しかし中には電子図書を販売する出版社も若干あります。</span>
<span id="zxrc_0038">著作権を尊重しつつ、電子テキストを必要としている人に供給す
る社会的仕組みを構築する必要があります。</span>
</p>
<p>
<span id="zxrc_0039">バリアフリー電子図書の標準化と電子図書を共有する仕組みの開発が望まれます。</span>
<span id="zxrc_003a">アメリカではbookshare.orgというところがOCRで入力して作成したテキストファイルを、
Sigtuna DAR 3を使ってテキストだけのDAISYにし、それに著作権保護の処理を施してネットワーク上に置いて交換する仕組みを作っています。</span>
<span id="zxrc_003b">利用者は専用のリーダーソフトを使って読書しています。</span>
<span id="zxrc_003c">日本でも同じような試みが始まるとよいと思います。</span>
</p>
<p>
<span class="page-normal" id="atau_0002"><a href="zxrc0009.smil#page_0008">7</a></span>
</p>
</div>
</body>
</html>
CSSソースコード
@charset "shift_jis";
body {
position:absolute;
line-height:1.5em;
letter-spacing:0.1em;
margin-top:5em;
margin-bottom:40em;
}
div {
position:relative;
top:5em;
margin:0 2%;
}
p {
text-indent:1em;
}
a {
text-decoration:none;
}
表示例:
画像のリンクを辿ると拡大します。
- body要素に対する
position:absolute - 親要素(この場合はbody=ページ)に対して絶対的な位置を指定します。位置は特に指定していないので、ページ自体が絶対位置となります(何らかの位置指定があった場合は、親要素(ページ)から指定した位置にbody要素が描画されます)。
margin-bottom属性により、40emの余白が指定されています。 - div要素に対する
position:relative - XHTMLソースコードで見出しを含む本文となる部分はdiv要素で括られています。この例では
position:relativeが指定され、topから5emの位置に内容を描画します。
DAISY録音図書再生用ソフトウェアでは、id識別子でテキストイベントなどを反転表示していますが、id識別子を持った全てのタグはページに対して5em上からずれて描画されるため、反転位置も上から5em分ずれます。これにより、ページの上方で固定されていた反転表示を変更することが出来ます。
body要素に対してmargin-bottom属性が40emに指定されていますが、これはページの終わりの方を再生する際、反転部分が下方に移動しないようにするために指定しています。この余白は適宜調整してください。
div要素の左右に2%の余白が指定されていますが、これはページを見やすくするためのものです。