Re:VIEWで画像スケールを指定

2018年8月、Re:VIEWで画像スケールを指定できました。

Re:VIEWのバージョンは2.5.0です。

＞review version
2.5.0

Windows10に書籍執筆支援システム「Re:VIEW」をインストールして使用しています。

Windows10に Re:VIEW 執筆支援システムをインストールする方法

画像の挿入

Re:VIEW記法

Re:VIEWの記法は、Re:VIEW フォーマットガイドに説明があります。

画像を挿入するには、次のブロック命令を使用します。

//indepimage[ＩＤ][キャプション][オプション]{
//}

//image[ＩＤ][キャプション][オプション]{
//}

• ＩＤ : ファイル名
• キャプション : 見出しタイトル （省略可能）
• オプション : scale指定（省略可能）

図を参照するには、@<img>{ＩＤ}インライン命令を使用します。

テスト原稿

次のようなRe:VIEW原稿を書いてテストしました。

= 画像ファイル

//indepimage[review_image][画像の挿入]{
//}

//image[lena][オリジナル画像]{
//}

オリジナル画像を@<img>{lena}に示します。

スケール指定をした画像を@<img>{lena1}、
@<img>{lena2}、@<img>{lena3}に示します。

//image[lena1][50% 画像][scale=0.5]{
//}

//image[lena2][25% 画像][scale=0.25]{
//}

//image[lena3][15% 画像][scale=0.15]{
//}

PDFの確認

PDFを生成して確認します。indepimageブロック命令が図の番号なしとなり、imageブロック命令が図の番号ありとなりました。また、スケールも指定したように縮小しています。

Microsoft EdgeでEPUBを確認

EPUBを生成してWindows10のMicrosoft Edgeで確認します。indepimageブロック命令が図の番号なしとなり、imageブロック命令が図の番号ありとなりました。しかし、スケールが指定したようにならずすべて100%で表示しています。

• なぜスケール指定が効かないのでしょうか？
• Re:VIEWの記述方法に問題があるのでしょうか？

CalibreでEPUBを確認

フリー・アンド・オープンソースの電子書籍ソフトウェアCalibreでEPUBを確認してみました。

50%と25%のスケール指定は正しく表示しました。しかし、15%のスケールは効かない結果となりました。

50%と25%のスケール指定が無効となるのは、Microsoft Edgeビューアーの問題のようです。

EPUB解析

Re:VIEWで生成したEPUBの内容を解析してみます。EPUBをzip解凍して、コードを確認します。（OEBPS＞sample.xhtml）

<div id="lena1" class="image">
<img src="images/lena1.jpg" alt="50% 画像" class="width-050per" />
<p class="caption">図1.2: 50% 画像</p>
</div>

<div id="lena2" class="image">
<img src="images/lena2.jpg" alt="25% 画像" class="width-025per" />
<p class="caption">図1.3: 25% 画像</p>
</div>

<div id="lena3" class="image">
<img src="images/lena3.jpg" alt="15% 画像" class="width-015per" />
<p class="caption">図1.4: 15% 画像</p>
</div>

Re:VIEW記述のimageブロック命令は、imageクラスの＜DIV＞タグを生成しています。
＜img＞タグはwidth-050perなどの縮尺を現すクラス指定になっています。

スタイルシートを確認します。スタイルシートは、config.ymlで指定します。

# CSSファイル(配列で複数指定可)
stylesheet: ["style.css"]

スタイルシートstyle.cssに下記コードがありました。

/* image width definition(pacentage)  */
.width-010per { width:  10%; }
.width-020per { width:  20%; }
.width-025per { width:  25%; }
.width-030per { width:  30%; }
.width-033per { width:  33%; }
.width-040per { width:  40%; }
.width-050per { width:  50%; }
.width-060per { width:  60%; }
.width-067per { width:  67%; }
.width-070per { width:  70%; }
.width-075per { width:  75%; }
.width-080per { width:  80%; }
.width-090per { width:  90%; }
.width-100per { width: 100%; }

 

画像のスケール指定の仕組みが理解できました。スタイルシートにより、＜img＞タグのwidth-050perなどのクラス指定があり「width: 50%; 」で縮小表示しているわけです。

スタイルシートには、代表的な縮尺について定義してあります。15%のスケールが効かないは15%用の定義が無いからです。

スタイルシートに15%用の定義を追加します。

.width-015per { width:  15%; }

CalibreでEPUBを確認

15%用の定義をスタイルシートに追加して、EPUB生成します。フリー・アンド・オープンソースの電子書籍ソフトウェアCalibreでEPUBを確認してみました。

50%、25%、15%のスケール指定が正しく表示しました。

まとめ

書籍執筆支援システム「Re:VIEW」で画像スケールを指定できました。

Microsoft Edgeでは、スケール指定（スタイルシートの width:○%）が無効になりました。便利なツールなのですが、「img要素への%指定が効かない」のはMicrosoftの問題のようです。

Re:VIEW原稿に記述する画像のスケールに対して、スタイルシートを適切に定義すればEPUBビューアーで正しく表示できることを確認しました。