打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
多看电子书规范扩展开放计划(20140819第四弹)
一、全屏插图页
全屏插图页扩展在ePub文件的opf文件中的spine节点下,spine节点定义了ePub文件中文章出现的顺序,每一个itemref项为一章,我们扩展一个properties属性值duokan-page-fullscreen,示例如下:
<spine>
    <itemref idref="chapter100" properties="duokan-page-fullscreen">
    ……
</spine>

这样id为“chapter100”的章就会按全屏插图页逻辑处理,而相应的html内容应如下所示:
<?xml version="1.0" encoding="utf-8"standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <link href="../Styles/stylesheet.css"rel="stylesheet" type="text/css" />
</head>

<body>
  <p><img src="../Images/sanguoyanyi.png"/></p>
</body>
</html>

注意,html中应只含有一个img,不需要设置任何样式,程序会自动将图片撑满展示。

二、富文本脚注
用户可以通过单击文内脚注的图标,弹出显示脚注内容的窗口。文内注可以支持复杂的内容描述,比如多段落,带有样式的文本等等,具体描述如下:
在需要插入注的位置插入如下代码:
<a class="duokan-footnote"href="#df-1"><img src=" ../Images/note.png"/></a>

在文章的末尾插入如下代码:
<ol class="duokan-footnote-content">
    <li class="duokan-footnote-item"id="df-1"><p>这是一个注释文本。</p></li>
</ol>

注和内容之间使用id链接,通过这样的扩展方式,可以将整个章节的所有文内注内容集中在一个有序列表中,这部分内容不会直接在页面上渲染出来,而是通过应用层的交互来呈现。

三、交互图
对于交互图,应用层会响应点击放大操作,提供额外的交互体验,具体扩展如下所示:
<div class="duokan-image-single">
    <img src="../Images/tree.png"alt="" />
    <p class="duokan-image-maintitle">主标题:大自然</p>
    <p class="duokan-image-subtitle">副标题:森林中的树</p>
</div>

为了保证点击放大之后的图像呈现效果,采用交互模式的图像数据应该保证足够的分辨率。
注意:
1. 主标题和副标题可以不出现;
2. 主标题和副标题可以在img之前出现;
3. 交互图不可以嵌套出现。

//========================朴素的分割线========================
// 20130930 更新第二弹

四、多看字体使用

多看官方客户端可用字体列表:

  
CSS写法
  
效果
font-family: "DK-SONGTI";
使用多看系统自带宋体。
font-family: "DK-FANGSONG";
使用多看系统自带仿宋。
font-family: "DK-KAITI";
使用多看系统自带楷体。
font-family: "DK-HEITI";
使用多看系统自带黑体。
font-family: "DK-XIAOBIAOSONG";
使用多看系统自带小标宋。
font-family: "DK-XIHEITI";
使用多看系统自带细黑体。
font-family: "DK-SERIF";
使用多看系统自带衬线西文字体。
font-family: "DK-CODE";
使用多看系统自带等宽西文字体。
font-family: "DK-SYMBOL";
使用多看系统自带符号字体(不常见符号,如音标等)。

示例:

首先在CSS文件中增加下面的样式
p.usekaiti {
  font-family:  "DK-KAITI";
}

然后在xhtml文件中使用
<p class="usekaiti">这段文字使用楷体显示</p>

这样就ok了。

//========================朴素的分割线========================
// 20140307 更新第三弹

五、多媒体(音频、视频)
         
由于移动设备的一些特性,html中标准的音频、视频的排版特点并不完全满足我们的需求,因此,需要进行一些“小小”的扩展,才能得到比较完美的展示效果。

音频
在HTML 5规范中,音频采用标准的audio标签,但需要扩展说明其占位图像,示例如下:
<audio class="duokan-audio content-speaker" placeholder="speaker.jpg" activestate="active-speaker.jpg" title="军港之夜">
    <source src="song.mp3" type="audio/mpeg" />
</audio>
duokan-audio为扩展标签,表明了该audio标签为多看扩展类型,placeholder用于表示占位图,activestate表示活动状态下的占位图,title表示标题名。

一般情况下可以指定audio采用的CSS样式,在绘制占位图时需要遵循该样式,示例代码如下:
audio.content-speaker {
    font-size: 16px;
    width: 0.8em;
}
audio的controls属性出现时,表明应用层需要显示控制栏,如果不出现,则无需显示控制栏。

视频
在HTML 5规范中,视频采用标准的video标签,示例如下:
<video class="duokan-video content-matrix" poster="matrix.jpg">
    <source src="matrix.mp4" type="video/mp4" />
</video>
duokan-video为扩展标签,表明了该video标签为多看扩展类型。

一般情况下可以指定video采用的CSS样式,在绘制poster时需要遵循该样式,示例代码如下:
video.content-matrix {
    width: 320px;
    height: 240px;
}
video的controls属性禁止出现。

//========================朴素的分割线========================
// 20140819 更新第四弹

六、画廊模式

画廊模式可以支持在同一个位置显示多张大小一致的图像,用户可以通过滑动等手势切换不同的图像内容。
如下,即为一个拥有三帧画面的画廊(每一个duokan-image-gallery-cell声明一个分帧):
<div class="duokan-image-gallery">
    <div class="duokan-image-gallery-cell">
        <img src="images/tree1.png"alt="" />
        <p class="duokan-image-maintitle">主标题:大自然</p>
        <p class="duokan-image-subtitle">副标题:柏树</p>
    </div>
    <div class="duokan-image-gallery-cell">
        <imgsrc="images/tree2.png" alt="" />
        <p class="duokan-image-maintitle">主标题:大自然</p>
        <p class="duokan-image-subtitle">副标题:柳树</p>
    </div>
    <div class="duokan-image-gallery-cell">
        <imgsrc="images/tree3.png" alt="" />
        <p class="duokan-image-maintitle">主标题:大自然</p>
        <p class="duokan-image-subtitle">副标题:杨树</p>
    </div>
</div>

注意:
1. 各分帧图片最好保持同样大小;
2. 最好各分帧都存在主标题和副标题;
3. 画廊整体样式应该放在duokan-image-gallery所在的div上;


//========================朴素的分割线========================

首次制作多看版图书时,不注意就会发生的悲剧:

1. 图像路径大小写不匹配,导致图像各种不出现,请注意epub规范大小写敏感哦;
2. 富文本注内容使用ul标签,导致注点击无反应,更甚可能死机哦,请注意注内容应该放置在ol标签内;
3. 应该使用半角符号;
4. 一定要注意红色部分属性和内容哦;

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
jQuery实现图片放大预览效果
jQuery全屏滚动插件fullPage.js中文帮助文档API
ldm2124086口袋代码
使用JavaScript中的全屏API以全屏显示内容
代码入门教程(26)
10个你可能不知道的CSS技巧
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服