CAS-UBの使い方：PDFとEPUBにユーザーがアップロードしたフォントを埋め込む

投稿日時: 2015年6月23日投稿者: cas-support

返信

国際電子出版EXPOでの展示見本用に、青空文庫のシャーロックホームズ・シリーズ『暗号舞踏人の謎』をPOD本にしています。

『暗号舞踏人の謎』（青空文庫）

折角PODで本にするのに間違いがあってはいけないと考え、内容をチェックしてみました。なんと暗号文の画像に間違いがあるのを見つけてしまいました。

下の2か所はNEVERと言う単語ですが、Rの文字が間違っています。

正しくは次でなければなりません。

そんなことをfacebookに書いたところ、この絵文字はアウトラインフォントがあることを教えていただきました。

GL-DancingMen font

おお！　これは良い。さすがに人気長寿作品だけのことはあります。

CAS-UBは、ユーザー独自のフォントをアップロードして、PDFとEPUBに埋め込むことができます。フォント埋め込みを使えば、特殊な文字の形をEPUBやPDFで表示できます。

暗号文を画像で表す代わりにフォントを使うとどうなるか早速試してみました。フォント埋め込みの使い方は次の通りです。

まず、CAS-UBの「フォント」メニューでGL-DancingMen fontフォントをアップロードします。

CAS-UBはフォントにクラス名を割り当てます。このフォントのクラス名は「font-GL-Dancingmen」です。

編集画面で、タイトルと本文のテキストにフォント・クラスを指定します。次のようにマークアップします。

この暗号文では単語の区切りは人形の旗で表します。font-GL-Dancingmenは旗を持った人形を大文字に割り当てています。

【説明】
CAS記法（簡易マークアップ）で[[[:font-GL-Dancingmen テキスト]]]とマークアップしますと、<span class=”font-GL-Dancingmen”>テキスト</span>となります。

「内容表示」でプレビューしてみます。

PDFを生成します。フォントが埋め込まれて暗号文がフォントで表示されます。

EPUBを生成します。EPUBにもフォントが埋め込まれますので、Adobe Digital Editionsでも暗号文が正しく表示されます。

CAS-UBの使い方：PDFで2倍ダッシュを繋げるには、全角ダッシュ（U+2014）を使いましょう。

投稿日時: 2015年6月22日投稿者: cas-support

返信

１．困った！
CAS-UBで出版物からPDFを生成したとき、2倍ダッシュが繋がらず、次のようになってしまいました。

２．原因
このテキストは、青空文庫「暗号舞踏人の謎」の一部ですが、2倍ダッシュがホリゾンタルバー（U+2015）で表わされていました。

CAS-UBのPDFでは、デフォルトで本文のフォントはIPAex明朝です。

IPAex明朝ではホリゾンタルバー（U+2015）を2個連続しますと、間が空いてしまいます。

ホリゾンタルバーではなく、全角ダッシュ（U+2014）２つにすると繋がります。

３．解決策
CAS-UBの編集メニューの「置換」でホリゾンタルバーを全角ダッシュに全部置換します。

４．説明
2倍ダッシュ（——）は発言の間合いなどでよく使われますが、テキストを入力する時は一つのダッシュ文字（—）を2文字入力するのが一般的です。

ダッシュとして使える文字は幾つかありますが画面に表示したり印刷するとき、全角ダッシュか罫線文字だと二つの文字がつながります。罫線文字は意味合いが違いますので、この場合は、全角ダッシュが良いでしょう。

(1) ソース

=本文ノーマル

・全角ダッシュ　U+2014: —— 全角

・ホリゾンタルバー　U+2015: ―― 全角

・罫線文字　U+2500: ── 全角

(2) PDF（縦組）

本の形を考える―段落のインデント(CAS-UBの場合どうするか（草稿））

投稿日時: 2015年4月19日投稿者: cas-support

返信

CAS-UBでユーザーが段落・パラグラフ（p要素）を配置できる要素について検討してみます。以下は、CAS-UB実装メモであり検討中のものです。

注意）CAS-UBは内部的にはHTMLを主にクラス属性を使って拡張した形式でデータを処理しています。但し、コンテンツを記述するのは簡易マークアップ記法であるCAS記法を用いているため、HTMLで使うことのできるすべての要素の組み合わせを記述することができません。

〇章・節・項など（div class=”level2″～div class=”level9″）の内容
pはh1~h6タグの兄弟となる。

〇引用（blockquote）
pはblockquoteの子供である。
引用の中に見出し（h1~h6）を置いたとき、pはdivの子供でh1~h6の兄弟となる。

１．短い引用は段落の中に取り込む。MLAは散文なら4行以内は取り込む。（[1]p.124）
２．散文の長い引用。（[1]p.125）
2.1　一段落またはその一部だけを引用するとき、一行目を他の行よりもインデントしない。
2.2　二つ以上の段落を引用する必要があるとき、各段落の一行目を1/4インチだけ追加でインデントする。もし、オリジナルが最初の段落を深くインデントしてないなら、最初の段落をインデントしないで2段落以降のみインデントする。

〇表のセル（td, th）
HTMLのモデルではliの中にpを置くことができるがCAS記法では記述できない。
但し、HTMLの表を直接埋め込んだ場合には、表のセルはパラグラフを複数含むことができる。

〇箇条書きの説明（li）
HTMLのモデルではliの中にpを置くことができるがCAS記法では記述できない。liの内容が二つ以上のパラグラフをもつことはない。

〇用語定義リストの説明（dt）
HTMLのモデルではliの中にpを置くことができるがCAS記法では記述できない。liの内容が二つ以上のパラグラフをもつことはない。

〇特殊なブロック
CAS記法では、次の5種類のクラス属性をもつdiv（ブロック）を特殊化したブロックと言い、それぞれにスタイルをあらかじめ指定しています。
1. サマリー（div class=”sum”）
2. コラム(div class=”col”）
3. 注釈（div class=”ann”）
4. 画像（div class=”fig”）
5. 表（div class=”tbl”）

１～５でpはdivの子供である。
キャプションがあるとき、pは、div class=caption の兄弟となる。

〇検討事項
CAS記法ではクラス属性のないdivの中にパラグラフを記述できます。このときpはdivの子供となります。このdivの最初の子供であるpを先頭の段落とするべきかどうか？

その他例えば、パラグラフとパラグラフの間に、別のブロック要素が挿入されたときブロック要素の後に続くpは一つ目とするべきか、それとも二つ目（以降）とするべきか？ →継続する段落はpにcont属性を付ける。

段落と段落の間に空きがあったとき。ポーズの空きがあるとき、空きの後の段落はどうするか？

〇参考資料
“Thinking with Type”^[2]に、段落のレイアウト・スタイルの様々な見本が掲載されている。

[1] MLA Style Manual and Guide to Scholary Publishing
[2] http://www.thinkingwithtype.com/contents/text/#Marking_Paragraphs

CAS-UB本日（15日18時～）のメンテナンス予定　EPUB3自動生成の本文目次の仕様を変更します。

投稿日時: 2015年1月15日投稿者: cas-support

返信

CAS-UBは本日の定期メンテナンスで、次の仕様変更と問題の修正を行います。

(1) EPUB3の自動生成する本文目次でタイトルにマークアップしたルビ、縦中横などが有効になります。

(2) EPUB3の自動生成する本文目次の最上位レベルの見出しを出版物タイトル（書誌情報で入力した文字列）から「目次」（固定）に変更します。

(3) これまでは「タイトル」欄で半角の「<、>、&」を使えないため、全角にする必要がありました。本日のメンテナンス後より、この制約がなくなり、半角の「<、>、&」も使えるようになります。

次に詳しく説明します。

１．本文目次とは？

CAS-UBで作れるEPUB3の目次には次のa.からc.の3種類があります。b.の本文の目次は、EPUBリーダーの操作性の影響がなく、また、縦書き指定ができますので一番重要です。

a. Navの目次（必須）–EPUBリーダーが目次パネルに表示する目次。どのように表示されるかは、EPUBリーダー依存となります。
b. 本文の目次（オプション）–EPUBの本文と同じように表示する目次。CSSのテーマでレイアウトの指定ができます。
c. EPUB2と互換の目次（オプション）–EPUB3よりも前のEPUB2形式の目次。（これは、EPUB3対応のリーダーで読むときは使われません。）

CAS-UBの目次機能についての詳しい説明は、右のブログ記事をご覧ください。「EPUB目次自動作成機能を大幅に強化! CAS-UB V2.2 を正式版としました。」（2013/11/29）

２．本文の目次の自動生成とは？

a. 本文の目次は CAS-UBで自動的に生成できます。本文の目次を自動生成するときは、「EPUB3」生成メニューの「一般設定」で「生成する」を指定します。自動生成では、記事のタイトルとマークアップした目次（上位レベルから指定したレベルまで）を集めます。

b. CAS-UBの「記事編集」機能で自分で編集して作ることもできます。自分で本文の目次を編集するときは、記事の種類を次の図のように「ユーザー作成目次」としてください。

《注意》
なお、本文目次は「生成する」がデフォルトですので、通常は設定を変更しなくても生成されます。また、「ユーザー作成目次」があるときは、本文目次を「生成する」にしても「ユーザー作成目次」が優先されます。

３．ルビや縦中横を本文の目次でつかうときのマークアップとiBookの目次と本文での表示例

(1) ルビ
a. マークアップ

b. 本文目次

c. 本文

(2) 縦中横

a. マークアップ

b. 本文目次

c. 本文

電子書籍（EPUB）で画像の大きさを指定したいとき：CAS記法とCSSの書き方まとめ

投稿日時: 2014年11月8日投稿者: cas-support

返信

EPUBでイメージ（画像）の表示サイズを指定する方法について、CAS記法によるコンテンツの書き方とCSSの書き方を整理してみました。

イメージはブロック配置するときと、インライン配置するときがあります。また、EPUBリーダー毎に挙動が違う（特に、iBooksは特殊^[2]）ため、できるだけいろいろなEPUBリーダーで有効になる指定方法を工夫する必要があります。

１．ブロック配置のイメージ
(1) コンテンツ（XHTML）
(a) CAS記法のマークアップ
[[[
{{画像ファイル名}}
]]]

(b) EPUB内コンテンツ（XHTML）のマークアップ
<div>
<img src=”画像ファイルへのパス” … />
</div>

(2)レイアウト指定（CSS）
div {
width:X%;
}
div img {
width:100%;
}

(3)説明
img要素に直接サイズを指定するとiBooksでは有効にならないため、イメージをdiv（ブロック範囲指定）要素で囲み、そのブロックの幅を指定します。img要素には幅100%を指定し、イメージがそのブロック内にぴったり収まるようにします。

２．インライン配置のイメージ
(1) コンテンツ（XHTML）
(a) CAS記法のマークアップ
[[[{{画像ファイル名}}]]]

(b) EPUB内コンテンツ（XHTML）のマークアップ
<span><img src=”画像ファイルへのパス” … /></span>

(2)レイアウト指定（CSS）
span {
display:inline-block;
width:Xem;
}
span img {
width:100%;
}

(3)説明
img要素に直接サイズを指定するとiBooksでは有効にならないため、イメージをspan（インライン範囲指定）要素で囲みます。インライン要素に指定した幅はCSS仕様上無視されます^[3]のでdisplay:inline-blockとしてインライン要素の幅を指定します。img要素には幅100%を指定し、イメージがその中にぴったり収まるようにします。

３．CSSファイル
CSSの設定内容はstyle.css（ファイル名）で保存し、CAS-UBの「スタイルシート」メニューでアップロードします。すると、EPUB生成では、コンテンツ（XHTML）ファイルにstyle.cssが最優先で有効になるようにリンクされます。

【注意】
div、spanは一般的に使いますので、上のようなCSS指定では、全体に影響を及ぼすことがあります。従って、サイズを指定したいイメージを囲むdiv、spanにクラス属性またはIDを設定して、その属性を指定した要素だけに指定範囲を制限するのが良いでしょう。

４．例
(1) マークアップ

図1 ブロック画像、インライン画像　（クラス属性：testを指定）

(2) style.css

図２ブロック画像、インライン画像のサイズを指定

(3) iBooksでの表示例

【参考資料】
[1] EPUBで画像の大きさを指定する方法を調べた。iBooks (1.2)はちょっと特殊だ！
[2] EPUBで画像の大きさを指定する方法を調べた、の続き
[3] EPUBで画像の大きさを指定する方法を調べた、の続きの続き
[4] iBooksで外字画像の大きさを文字サイズに追随させる方法の整理

EPUB・PDFで索引や親子索引を作るためのCAS記法の例

投稿日時: 2014年10月12日投稿者: cas-support

返信

CAS-UBでは単純な索引はマークアップ支援機能の「索引」を使って入力できます（図１）。

図１

マークアップ支援ダイヤログで索引語、その読みを入力して「CAS記法」ボタンを押すと次のようにマークアップされます。

行と列から構成する簡単な[[[:index:key=ひょう表]]]をマークアップできます。

索引を見やすく、使いやすくするためには、汎用性の高い索引語を親とし、その親索引語の下に子供の索引語を整理する親子索引を付けると便利です。こうした親子索引はマークアップ支援機能だけでは入力できませんが、手入力で作成できます。

索引語「表」を親とし、「見出しセル」、「ヘッダ行」を子供の索引語にするには図２のようにマークアップします。

図２　親子索引の指定例

解説
[[[:mindex …]]] ：親子索引を指定します。
[[[:prim …]]] ：親の索引語を指定します。
[[[:second …]]] ：子の索引語を指定します。
:key=よみよみが必要なときは読みを入力します。
:nodisp この例では、親索引語を非表示にしています。

内容表示（プレビュー）で表示すると図３のように見えます。親の索引語を非表示に設定していますので、本文中には親の索引語は表示されません。

図３　索引語を指定した本文の内容表示（プレビュー）

上のように指定した記事をEPUB・PDFにすると親子の索引ができます。図４はEPUBとPDFの親子索引部分です。

図４　EPUBとPDFの親子索引部分

EPUBで箇条書きのラベルを消すためのCAS記法例(親の要素に属性を付ける方法）

投稿日時: 2014年10月11日投稿者: cas-support

返信

箇条書きには、番号なし箇条書きと番号付き箇条書きがあります。CAS-UBではそれぞれ図1のようにマークアップをします。

図1　箇条書き　CAS記法

番号なし箇条書きのマークアップは、次のようなHTMLに変換されます。

<ul> <li>１項目目</li> <li>２項目目</li> <li>３項目目</li> </ul>

CAS-UBで用意している「CSSテーマ」で番号なし箇条書き、番号付き箇条書きのレイアウトを指定しています。そこで、例えば「グリーン２」を選択してプレビューしますと、図２のように表示されます。

図２　箇条書きを、（テーマ）「グリーン２」で内容表示（プレビュー）する

さて、この箇条書きのラベルを消したいとき、一番、手っ取り早いのは要素にlist-style:noneというスタイルを指定する方法です。

CAS記法では要素のマークアップの直後に’:’を置くと、その要素に属性が付きます。そこで箇条書きの先頭’*’または’#’に次の図３のようにマークアップしてみましょう。

図３　箇条書きの項目にスタイル属性を指定

この内容表示（プレビュー）すると図４のようになり、最初の項目しかラベルが消えていません。

図４　箇条書きの項目へのスタイル指定の内容表示

すべてのラベルを消すために、各’*’（li）要素へのスタイル指定を繰り返しても良いのですが面倒です。
通常は上位のulまたはol要素にスタイル指定してラベルを消すと楽ちんです。

このようなときのCAS記法は図５のように要素の直後に’::’をおいて属性を指定します。そうしますと1つ上の階層の要素に属性が付きます。

図５　親の要素に属性をつけるマークアップ

このCAS記法の’::’に続く属性はHTMLでは次のように上位のul要素の属性になります。

<ul style="list-style:none"> <li>１項目目</li> <li>２項目目</li> <li>３項目目</li> </ul>

内容表示（プレビュー）しますと、図６のようにすべての箇条項目のラベルが消えています。

図６　親の要素に属性をつけて箇条項目のラベルを消す

電子書籍（EPUB）の制作：画像への回り込み解除するためのCAS-UBの指定方法

投稿日時: 2014年10月2日投稿者: cas-support

返信

昨日は、画像を左右に寄せてテキストを回り込みさせるためのCAS-UBの指定方法を説明しました（^[1]）。今日は回り込みを解除する方法を説明します。

画像にテキストの回り込み（フロート）を指定すると、後続のテキスト・見出し・画像などの要素があるとき、それらの要素も回り込みしてしまいます（図１）。

図１　画像に回り込みを指定すると後続の要素も回り込む

後続の要素の回り込みを解除するには、CSSでクリア（clear）プロパティを指定します。CAS-UBのCSSテーマではクリアを指定する方法が規定されていません。そこで、解除を設定したい要素に自分でクリアを設定します。

直接的な方法として、CSSを書いてしまうことができます。例えば、次の見出しでフロートを解除したいとき、その見出しにクリアを設定するには次のようにします。

...転換するのに最適なツールです。


==:style=clear~:both 見出し

360ピクセル×360ピクセルの正方形画像を右フロート

解説
CAS-UBでは、マークアップ（’==’はランク２の見出し(h2)のマークアップ）の直後に、次のように記述すると
:X=a
Xが属性名、aが属性の値と解釈しますので、HTMLでは<要素 x="a">となります。続けて’：’があると属性の始まりと解釈しますので’^:’のように前に’^’を置いて、’:’の役割を適用しないように（エスケープ）します。

上の例では、見出しの部分のHTMLコードは次になります。

<h2 style="clear:both"> 見出し</h2>

プレビュー（内容）表示で確認しますと、見出しの回り込みが解除されています（図２）

図２　見出しで回り込みを解除

見出しに直接スタイルを指定するのではなく、（1）見出しにクラス属性（:clear）を設定し、（2）クリアクラス属性にクリアプロパティを指定するユーザー指定スタイルシート（style.css）ファイルを用意する方法もあります。

...転換するのに最適なツールです。


==:clear 見出し

360ピクセル×360ピクセルの正方形画像を右フロート

style.cssに次のようなCSSプロパティを指定します。

.clear { clear:both; }

[1] 電子書籍（EPUB）で、テキストを画像に回り込みさせるためのCAS-UBの指定方法

電子書籍（EPUB）で、テキストを画像に回り込みさせるためのCAS-UBの指定方法

投稿日時: 2014年10月1日投稿者: cas-support

返信

今日は、CAS-UBで制作する電子書籍（EPUB）でテキストを画像に回り込みさせる指定方法を説明します。

CAS-UBの編集画面の「画像」入力支援ボタンで画像をアップロードすると、編集画面では次のようにマークアップが入力されます。

360ピクセル×360ピクセルの正方形画像

[[[:fig {{img-360q.png}} ]]] CAS-UBは、ブックオンデマンドに使えるPDF, 商用に耐えうる高品質な電子書籍・・・

解説
[[[:fig
…
]]]
は画像(fig)クラスの属性をもつブロックとなります。

CAS-UBのCSSテーマでは、画像はブロック内で中央配置するように設定されています（図１）。

図1　CSSテーマ・グリーン２を指定してプレビュー（内容）表示したところ

この画像の周りにテキストを回り込みさせるには次のように指定します。:float-startは編集画面より追加入力してください。

360ピクセル×360ピクセルの正方形画像を左フロート

[[[:fig:float-start {{img-360q.png}} ]]] CAS-UBは、ブックオンデマンドに使えるPDF, 商用に耐えうる高品質な電子書籍・・・

解説
:float-start/:float-endはCAS-UBのCSSテーマに組み込まれている回り込み指定属性です。

:float-start　画像を行頭に配置してテキストを右（横書き）または下（縦書き）に回り込ませる。
:float-end　画像を行末に配置してテキストを左（横書き）または上（縦書き）に回り込ませる。

上のコードの例では、画像が行頭側に配置されて、テキストが画像の右に回り込みます（図2）。

図2　テキストの回り込みをプレビュー

電子書籍、電子出版のCAS-UBブログ

みんなで作れる電子書籍、電子出版のCAS-UBのブログです

カテゴリーアーカイブ: CAS-UBのマークアップ解説