說明

這篇文章簡單的介紹一下多看專用電子書的制作技巧客燕，包括已經(jīng)公開的技巧和未公開的技巧眷蚓。

通用排版

多看常用電子書的排版如下流程圖所示：

流程圖

這樣做的好處是：

1. 兼容性高咨堤，在iBooks或者其它電子書軟件中也不會排版失真（只是全屏標(biāo)題頁可能無法全屏幕顯示而已）；
2. 圖片標(biāo)題可以很自由的設(shè)計(jì)异希，不需要考慮什么CSS語法眶掌；
3. 因?yàn)閳D片是專門的一頁挡育，沒有文本與其同時(shí)顯示，所以夜間模式也不會顯得圖片和文本反色不協(xié)調(diào)畏线。
   缺點(diǎn)也還是有的：
4. 每一章節(jié)都需要兩張標(biāo)題圖片（后面講原因），大幅增加了epub的體積良价；
5. 如果標(biāo)題圖片中的文本有錯(cuò)字之類寝殴，后期需要花很多功夫改圖片；
6. 圖片中的錯(cuò)字用戶無法糾錯(cuò)明垢。
   但是總的來說蚣常，這是一套最經(jīng)濟(jì)的排版方案。

多看中圖片的處理

全屏插圖頁

在epub的opf元數(shù)據(jù)文件中痊银，找到spine節(jié)點(diǎn)抵蚊，在其下面的itemref代碼中加入properties="duokan-page-fullscreen"即可。代碼形式如下：

<spine>
    <itemref idref="coverpage" properties="duokan-page-fullscreen">
    ……
</spine>

一般封面頁需要加全屏溯革，全屏插圖頁也需要加全屏贞绳。在對應(yīng)的頁面中只需要存在一張圖片文件即可，不需要寫文本致稀，寫了也不會顯示出來冈闭。
對于不同的屏幕尺寸，多看只針對4:3和16:9兩種寬高比做了適配抖单。具體方式是：

需要全屏顯示的圖片為a.jpg萎攒，寬高比為4:3，則再做一張16:9的圖片命名為a~slim.jpg放進(jìn)epub（與a.jpg同一位置）矛绘，在頁面中只需加載a.jpg即可耍休。多看會根據(jù)屏幕尺寸自動顯示不同寬高比的圖片。

1. 對于3:2（iPad橫置時(shí)）或16:10的屏幕尺寸货矮，多看會相應(yīng)裁剪這些圖片羊精，所以圖片不要在邊緣上留關(guān)鍵信息。
2. 假如不按照上述方法處理囚玫，例如16:9的圖片命名為a.jpg而4:3的圖片命名為a~slim.jpg园匹，多看會裁剪圖片或上下留黑邊雳刺。
3. 多看的書架顯示書的封面均按照4:3顯示，如果只有16:9的封面裸违，多看會把圖片壓扁顯示（iOS版可能會按原始寬高比顯示書架封面）

上下居中圖

這個(gè)屬性在多看漫畫書中用的比較多掖桦，當(dāng)然你也可以用到普通的書里面。語法如下：

<spine>
    <itemref idref="chapter01.xhtml" properties="duokan-page-fitwindow">
    ……
</spine>

同樣供汛，對應(yīng)的html文件只需要一張圖片即可枪汪，不需要別的文字或者代碼，就算寫了多看也不會顯示出來怔昨，而只會將圖片上下居中顯示雀久。

延伸式全屏圖

注意，這個(gè)屬性是多看4.4以上才有的趁舀，最開始是用于s.這本書中赖捌，顯示的效果是全屏顯示一半的報(bào)紙，點(diǎn)擊按鈕之后進(jìn)入交互的全屏顯示矮烹，可以放大和旋轉(zhuǎn)越庇。如果是多看的低版本，這個(gè)屬性無效奉狈。
語法如下：

<spine>
    <itemref idref="coverpage" properties="duokan-page-fullscreen-spread-left">
    ……
</spine>

這個(gè)代碼會全屏顯示圖片的左半部分卤唉，當(dāng)然你把left改成right也可以，就會顯示圖片的右半部分仁期。只有這兩個(gè)屬性是有效的桑驱。
注意圖片只能選擇長寬比較大的（橫躺的圖片），最好是長度的一半正好能顯示一個(gè)完整的圖跛蛋。

交互圖

交互圖主要實(shí)現(xiàn)用戶點(diǎn)擊圖像后熬的，圖像自動全屏顯示，在全屏顯示時(shí)圖像可以兩指放大和旋轉(zhuǎn)赊级。
實(shí)現(xiàn)方法只需要加上duokan-image-single這個(gè)類即可悦析。當(dāng)然在CSS里也可以針對此類自定義樣式。

<div class="duokan-image-single">
    <img src="../Images/pic.png" alt="" />
    <p class="duokan-image-maintitle">主標(biāo)題</p>
    <p class="duokan-image-subtitle">副標(biāo)題</p>
</div>

這里需要注意以下幾點(diǎn)：

1. 在應(yīng)用了交互類的div里面此衅，可以使用多個(gè)圖片（多看2.x中多圖片只能每行顯示一張强戴，3.x以上就可以并列顯示了），每張圖都可以交互挡鞍，但是如果div中有主副標(biāo)題的話骑歹，只有最后一張圖放大后會顯示主副標(biāo)題；
2. 圖片交互后墨微，會在底部固定顯示主副標(biāo)題道媚，但是不同系統(tǒng)中的實(shí)現(xiàn)方式不同。android中，不管主副標(biāo)題有多少字最域，交互后都會顯示出來（除非標(biāo)題內(nèi)容多得超過整個(gè)屏幕）谴分，而iOS中，主副標(biāo)題在交互后只能顯示兩行镀脂。所以在做畫冊之類標(biāo)題的文本內(nèi)容極多的電子書時(shí)牺蹄，需要注意這一點(diǎn)。
3. 交互圖片可以與其它樣式混用薄翅，如居中顯示和設(shè)置圖片尺寸沙兰。
4. 如果圖片寬高比為portrait（寬比高要窄甚至窄很多），高度超過了屏幕高度時(shí)翘魄，多看會將圖片高度縮小到屏幕高度鼎天，但主副標(biāo)題可能無法顯示出來——但如果超出太多，多看就完全不顯示這張圖了暑竟。所以這種情況下需要定義圖片高度斋射。

畫廊

畫廊主要實(shí)現(xiàn)在同一位置顯示多張圖片，通過滑動可以切換圖片但荤，節(jié)省了epub的排版空間罗岖。另外畫廊模式的每張圖片也可以交互。
實(shí)現(xiàn)方法稍微復(fù)雜一點(diǎn)纱兑，如下：

<div class="duokan-image-gallery">
    <div class="duokan-image-gallery-cell">
        <img src="images/pic1.png"alt="" />
        <p class="duokan-image-maintitle">主標(biāo)題1</p>
        <p class="duokan-image-subtitle">副標(biāo)題1</p>
    </div>
    <div class="duokan-image-gallery-cell">
        <imgsrc="images/pic2.png" alt="" />
        <p class="duokan-image-maintitle">主標(biāo)題2</p>
        <p class="duokan-image-subtitle">副標(biāo)題2</p>
    </div>
    <div class="duokan-image-gallery-cell">
        <imgsrc="images/pic3.png" alt="" />
        <p class="duokan-image-maintitle">主標(biāo)題3</p>
        <p class="duokan-image-subtitle">副標(biāo)題3</p>
    </div>
</div>

注意事項(xiàng)：

1. 畫廊的大小取決于其內(nèi)部所有圖片中寬高比最小的那個(gè)呀闻。簡單的說化借，圖片尺寸不一樣但寬高比一樣的話潜慎，畫廊都可以很完整的顯示，但如果有某個(gè)圖片的寬高比值和其它圖片差很多蓖康，畫廊就會調(diào)整大小铐炫，使得所有圖片都能以cover方式顯示（換言之畫廊內(nèi)部不允許出現(xiàn)黑邊， 但允許裁剪圖片外部）所以畫廊的圖片最好尺寸一致蒜焊，如果不一致的話倒信，未交互時(shí)切換圖片可能會發(fā)生圖片的裁切，但交互后圖片都會完整顯示泳梆。
2. 畫廊的居中顯示必須對gallery和cell兩級屬性都設(shè)置居中才會有居中效果鳖悠。
3. 同交互圖一樣，如果畫廊高度超過屏幕高度优妙，也會導(dǎo)致標(biāo)題不顯示乘综。

圖片尺寸定義

如果不設(shè)置圖片尺寸，當(dāng)圖片尺寸超過了屏幕的尺寸套硼，多看會將圖片自動縮小到屏幕的寬度或高度卡辰；圖片尺寸小于屏幕的時(shí)候則按原圖顯示。
多看的圖片尺寸定義與CSS規(guī)范有點(diǎn)區(qū)別，主要體現(xiàn)在百分比上面九妈。由于目前移動設(shè)備都是視網(wǎng)膜屏幕反砌，我們在pc顯示器上所謂的1像素可能在手機(jī)上意味著4像素（2x2），不同的電子書軟件對此的解釋也不一樣萌朱，所以設(shè)定圖片尺寸最好用相對尺寸em或者百分比宴树。
多看中，圖片寬度的百分比是相對于屏幕的（CSS規(guī)范中百分比相對于圖片本身的寬度）嚷兔，如果寬度為100%森渐，則圖片寬度撐滿整個(gè)屏幕寬度（不包括出血格），50%則占屏幕一半寬度冒晰。所以圖片的分辨率要比較高同衣，如果分辨率本身就很低，設(shè)置寬度100%就會滿屏幕的馬賽克壶运。
由于epub是一種流式排版耐齐，只有左右頂部是確定位置的，所以多看對于圖片的高度百分比CSS規(guī)范一樣蒋情，只是圖片自身高度的百分比埠况。
通常制作電子書時(shí)只需要設(shè)定寬度或高度的一個(gè)屬性就可以了，否則圖像容易失真棵癣。

多看的私有語法

行內(nèi)注釋

多看的彈出式注釋有兩種實(shí)現(xiàn)方式辕翰。
第一種：

<a class="duokan-footnote" href="#footnote1"><img src=" ../Images/note.png"/></a>

在頁面末尾或者專門的注釋頁寫：

<ol class="duokan-footnote-content">
    <li class="duokan-footnote-item" id="footnote1"><p>注釋內(nèi)容。</p></li>
</ol>

這種方法的好處：

1. 兼容別的電子書軟件狈谊；
2. 注釋文本復(fù)雜的時(shí)候可以分行喜命，使用樣式甚至插入圖片。

第二種：

<a class="duokan-footnote" href="#footnote1" alt="注釋內(nèi)容河劝。"><img src=" ../Images/note.png"/></a>

這種方法不兼容別的電子書軟件壁榕，也不能使用樣式。但好處是校對比較方便赎瞎。
總的來說還是推薦使用第一種方法牌里。

調(diào)用內(nèi)置字體

多看字體包包括蘭亭黑务甥、細(xì)黑牡辽、宋體、小標(biāo)宋敞临、仿宋态辛、楷體、襯線/非襯線英文字體和符號字體哟绊，CSS中的fontfamily寫相應(yīng)的代碼即可因妙。

另外多看也支持epub內(nèi)置字體，只需在fontface中定義即可攀涵。

音頻和視頻

多看的音頻和視頻支持應(yīng)該是私有的實(shí)現(xiàn)铣耘，不是epub3規(guī)范的語法。

<audio class="duokan-audio content-music" placeholder="music.jpg" activestate="active-music.jpg" title="音樂">
    <source src="song.mp3" type="audio/mpeg" />
</audio>

music.jpg是個(gè)占位符以故，點(diǎn)擊這個(gè)圖片之后就會彈出音樂播放控件蜗细。也可以指定占位圖的樣式，可以指定controls屬性：

audio.content-music{
    font-size: 10px;
    width: 0.8em;
}

音樂只支持mp3格式怒详。
視頻的語法差不多：

<video class="duokan-video content-movie" poster="movie.jpg">
    <source src="movie.mp4" type="video/mp4" />
</video>

視頻只支持mp4格式炉媒。，指定樣式也差不多昆烁，但不能指定controls屬性：

video.content-movie {
    width: 320px;
    height: 240px;
}

對象出血格貼邊

這是多看內(nèi)部的一個(gè)語法吊骤，之前已經(jīng)講過了，主要作用就是出血格貼邊静尼，語法是：

.head {
    duokan-bleed: (top|left|right|bottom|lefttop|topright|lefttopright|leftright);
}

需要注意的是多看的這個(gè)語法并不是無條件“貼邊”白粉，而是在圖片的邊貼到出血格位置的前提下才會進(jìn)行相應(yīng)的貼邊。例如鼠渺，圖片的尺寸非常小鸭巴，達(dá)不到屏幕寬度，由于圖片默認(rèn)左邊和頂邊都是貼近出血格位置的拦盹，則默認(rèn)top和left屬性都會起效鹃祖；但圖片只有設(shè)置了靠右對齊時(shí)。right屬性才會起效普舆；bottom實(shí)際上只是貼近下一個(gè)段落的頂邊恬口，并不是貼近屏幕的底邊（因?yàn)闆]有辦法讓前端元素貼近屏幕底邊）；類似的奔害，leftright屬性就需要左右邊都要貼近出血格才會起效楷兽。

1. 如果圖片本身尺寸很大而不設(shè)置100%的寬度地熄，當(dāng)縮小字號的時(shí)候华临，圖片也會跟著縮小，縮小到寬度不足屏幕寬度的時(shí)候端考，就會導(dǎo)致貼邊失效雅潭。如果設(shè)置了100%的寬度，不管字號是多大却特，圖片都會固定貼邊扶供，不會影響排版效果。
2. 貼邊只針對正文元素裂明，如圖片或文字都是可以貼邊的椿浓，但不會處理文字的padding等屬性。所以貼邊主要還是用于圖片，文字貼邊只能用于特定的排版設(shè)計(jì)扳碍。