使用HTML5、CSS3和MathML在EPUB3中制作版式丰富的出版物大西瓜3721

图 4 的版式使用正确对齐的图像和宽大的装饰边框，很好地展现了原始页面。然而，这种排版并不适合纵向移动设备，因为这种设备的屏幕宽度不足以显示图像和文本。移动设备的典型宽度是 480 像素左右，您可以覆盖某些元素，如 清单 14 所示。利用 清单 14 中的 CSS：

• 天鹅的图像将缩小，改为居中，并在文本之前显示。页面底部的装饰图像也将缩小，以免抢占了诗歌内容的空间。
• 标题会缩小并居中对齐。
• 诗歌文本会更加居中，而非靠左对齐。

清单 14. 适用于纵向手机屏幕版式的 CSS

 @media screen and (max-width:480px) { 

    div[epub|type="chapter"] {
        background-position: top center, bottom center;
        background-size: 30% auto, 50% auto;

        padding: 1em;
        margin: auto;
        text-align: center;
    }

    h1 {
        margin: 50% auto 0 0;
        font-size: 1em;
        text-align: center;
    }

    p {
        margin-left: 25%;
    }
}

上面的指令与之前的 CSS 一致，仅需覆盖新版式中值发生了变化的属性。图 5 展示了输出结果，内容分布到了两个页面中。

图 5. Abroad 一书中的页面在手机屏幕上的显示效果

窄型显示在纵向版式中效果良好，但这样一首短诗可以更轻松地在横向页面中展示。您可以添加一个最终媒体查询，允许横向设备以多列形式显示这首诗。这项特性是 CSS 文本模块的一部分，也是 EPUB 3 CSS 支持的核心组成部分。横向手机屏幕版式的 CSS 如 清单 15 所示。

清单 15. 适用于横向手机屏幕版式的 CSS

@media screen and (orientation:landscape and max-width:480px) { 
    div[epub|type="chapter"] {
        background-position: 97% 40%, bottom center;
        background-size: 20% auto, 50% auto;

        /* For now we are required to use the vendor-prefixed versions in most browsers */
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;

        -webkit-column-gap: 0;
        -moz-column-count: 0;
        column-gap: 0;

        padding: 2em 4em 5em 4em;
    }
}

图 6 展示了所呈现的输出结果。

图 6. Abroad 一书中的页面在横向手机屏幕上的显示效果

回页首

在出版物中包含 MathML

在 EPUB 2 中，出版物可能包含采用光栅图像或 SVG 格式的数学内容。尽管 SVG 数学内容能生成极富吸引力的输出结果，但对于屏幕阅读器来说，这些内容很难处理，编写也非常困难。光栅图的情况更糟，它们的可访问性更差，而且在不同的字体和屏幕尺寸间缩放的能力也更差。

EPUB 3 将 MathML 作为原生 EPUB 内容类型。可以在不转为另外一种类型的前提下提供 MathML 标记，例如光栅图像。EPUB 3 阅读器必须在大多数情况下支持 MathML 显示。

尽管 MathML 是一种核心内容类型，但您必须在 OPF 文件中声明哪些 XHTML 页面包含 MathML，如 清单 16 所示。

清单 16. 在 OPF 文件中声明 MathML 内容

   
    
    properties="mathml" 
             id="page1" media-type="application/xhtml+xml"/>
    
    
  

清单 17 展示了一个简单的等式。尽管某些 Web 浏览器现在支持 HTML5 上下文（无名称空间）中的 MathML，但 EPUB 3 要求在http://www.w3.org/1998/Math/MathML 的正确名称空间中声明 MathML 内容。

清单 17. EPUB 3 内容文档中的 MathML

  
    
    
  
  

    
      
        x
        =
        
          
            -
            b
            ±
            
              
                b
                2
              
              -
              4
              ⁢
              a
              ⁢
              c
            
          
          
            2
            ⁢
            a
          
        
      
                  
  

图 7 展示了 iBooks 中的输出结果。您可能需要嵌入一种包含恰当数学符号的字体，以便正确呈现所有等式类型。有关用于科学出版物的 STIX 字体的信息，请参阅 参考资料 部分。

图 7. EPUB 3 中呈现的简单数学等式

许多输出 MathML 的系统都可以使用 MathML 1.0 DTD 中的命名实体，如 ±。您需要将这些实体转为数字实体，然后才能将其包含在 EPUB 3 出版物之中。由于它们属于外部 DTD（尽管是核心内容类型），因此不应包含在 EPUB 存档中。

回页首

进一步探索的主题

EPUB 3 提供了多种开发先进的原生数字出版物的选项。您可能还希望查看以下主题。

• 对互动式图书使用与 Javascript 搭配使用的 HTML5 canvas。
• 如果您对语义 Web 感兴趣，那么可以自行熟悉 EPUB 3 结构化语义词汇表中的语义拐点选项。
• HTML5 语义和可访问的富 Internet 应用程序套件 (WAI-ARIA) 角色提供了一种极有吸引力的方法，允许您丰富内容，在辅助设备或机器学习算法时使用这些内容。

EPUB 3 仍在积极扩展。未来的修订版中很可能整合来自新 CSS 模块的特性，如 CSS 域。

回页首

下载