Re:VIEWで画像のスケールを指定する方法

Re:VIEW 画像のスケール指定

Re:VIEW 画像のスケール指定

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

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

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

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

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

画像の挿入

Re:VIEW記法

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

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

  • ID : ファイル名
  • キャプション : 見出しタイトル (省略可能)
  • オプション : scale指定(省略可能)

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

テスト原稿

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

PDFの確認

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

Microsoft EdgeでEPUBを確認

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

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

CalibreでEPUBを確認

Calibre E-book management

Calibre E-book management

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

Calibre Viewer

Calibre Viewer

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

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

EPUB解析

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

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

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

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

 

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

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

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

CalibreでEPUBを確認

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

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

Re:VIEW EPUB OK Calibre Viewer

Re:VIEW EPUB OK Calibre Viewer

まとめ

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

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

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

 

 

 

このエントリーをはてなブックマークに追加

Re:VIEWで画像のスケールを指定する方法」への2件のフィードバック

  1. ピンバック: Amazon Kindleの電子書籍を作成する方法 | ある計算機屋さんの手帳

  2. ピンバック: 電子書籍執筆ツール Re:VIEWのリンク集 | ある計算機屋さんの手帳

コメントは受け付けていません。