操作实例:阅读器应用（JavaScript和HTML）

随着平板电脑变得越来越普及，融合了阅读体验的应用很快就会变得流行起来。下面我们重点介绍了可用来创建优秀阅读器应用的新 CSS 和 HTML5 功能。阅读本文后，你将对在这些应用中使用的主要布局功能有一个全面的了解，而且还可以获得一个基本的阅读器应用引导你入门。现在，我们了解一下在 Windows 中营造卓越阅读器体验的详细信息。

创新互联建站服务项目包括阳东网站建设、阳东网站制作、阳东网页制作以及阳东网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，阳东网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到阳东省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

简介

Windows 8 为开发人员和设计者提供了一系列最新的 HTML5 和 CSS3 功能，用于创建新颖独特的阅读体验。具体而言，由于诸如 CSS 区域和 CSS 网格等新技术，你可以创建数字出版物，让这些出版物结合 HTML 的优势—流体布局、基于标记的样式、可访问的内容、交互性—与到目前为止仅在印刷领域中可用的创新布局。

传统网页内容的呈现形式为单列竖排。段落堆放在段落和其他图像之上，偶尔插入的浮动元素可呈现出一些视觉多样化。“页面”仅通过将内容分段为不同的 HTML 文档来创建；不存在任何基于标记的方式来获取一连串的内容并将内容分段为单个的文本屏幕。缺少用于创建列和适应屏幕大小的强大控件表示许多页面仅针对特定分辨率（如 1024 × 768）进行优化。在高分辨率、宽屏幕监视器上呈现为小分辨率优化的文本时，你会看到糟糕体验的一个好示例。以下图像显示了纵横比为 4:3 的监视器上的单列布局。

以下图像显示了宽屏幕监视器上具有空白区域的相同布局。

相比之下，设计用于充分利用页面可用空间的页面可能会以多列文本为特征，从而在填充屏幕的同时确保文本的各行不会太长，易于阅读。通过一些小的优化措施，标题可以增加其大小以更加抢眼，并且当文本环绕在图像周围时可以为图像提供更加显眼的位置。

以下图像显示了用于宽屏幕监视器的改进阅读器布局。

印刷设计者长久以来都可以轻松设计这样的布局，因为他们只需要应付预先已知的固定页面大小。适应性布局的设计者必须使用诸如 CSS 网格和媒体查询等工具来创建页面，这些页面智能地适应不同的屏幕大小。

本文章与动态 CSS 区域模板示例一起介绍如何创建适应各种屏幕大小的美观布局来进行阅读。在查看新的 CSS 阅读功能中，我们仔细查看了几个新功能，你可以使用这些功能以创新性的新方式呈现文本和图像。在汇聚多个功能以创建良好的阅读体验中，我们通过说明如何组合这些功能来构建适应性阅读体验来继续，该体验结合了优秀设计与流体和美观布局。

查看新 CSS 阅读功能

我们了解一下你可能会在阅读器应用中使用的新 CSS 功能：多列、断字、网格、区域以及排除项。

多列

通过 CSS 多列，设计人员可以将元素 — 例如，div元素或页面的body— 的内联内容（如文本）设置为尺寸相同且相邻的多个连续列格式。例如，只需将 CSS 属性column-count: 2;添加到div，即可生成如下图所示的布局。

但是，多列也确实有一些限制。所有列必须具有相同的尺寸，而且相互之间相邻放置。而且，多列元素的内容遵守 CSSoverflow属性；即它剪切、添加滚动条，或通过在原始元素旁边创建其他列来溢出。由于这些原因，CSS 区域在以下这些情形下可能是更好的文本布局选项：需要更多变的页面布局，或元素的内联内容可能溢出元素。下图显示了通过溢出多列元素创建的新列。

Note CSS 多列有一个“平衡”选项，可以确保所有列的长度相同，而且最后一列不会显著短于其他列。此功能不能确保这些列具有相同的行数，也不能确保这些行在各列中都是对齐的。应当为多列元素中的内容设置格式，以使所有元素都是单行高度的倍数，包括段落和图像的补白。

下图显示了经过平衡的多列布局（淡蓝色外框）与未经平衡的布局（红色外框）相比较，如何设置内容的格式。

#p#

Note 此示例经过了适当的平衡，因为列内的元素根据列尺寸和间距进行了匹配。

下列代码显示了这两种布局的创建方法。

 
 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      Hi friend! Hi friend! Hi friend! Hi friend! 
  
  
  
      Hi friend! Hi friend! Hi friend! Hi friend! 
  
  
  
      Hi friend! Hi friend! Hi friend! Hi friend! 
  
  
  
      Hi friend! Hi friend! Hi friend! Hi friend! 
  
  
  
      Hi friend! Hi friend! Hi friend! Hi friend!

Hi friend! Hi friend! Hi friend! Hi friend!

多列使我们可以将内联内容（如文本）布置在相对较窄的列中。但是这些列的内容看起来可能会参差不齐，特别是在平均单词长度占列宽度的较大比例时。尤其是，当列与text-align: justify属性结合使用时，单词之间可能会出现较大的空白间隙，从而使内容的外观不规则且不美观，如下所示。

相应地，我们现在提供自动断字功能，这样多行的排列更紧密，同时还提供强大的阅读体验，如下所示。

断字在 W3C CSS 文本级别 3 规范的部分中定义。CSS 断字提供了以下能力：

大量语言支持在 Windows 8 和 Internet Explorer 10 中进行断字，且建议将断字用于 CSS 多列和区域。

CSS 网格布局的核心理念是，将页面划分成定义好的一组行和列，然后根据这些行和列使用 CSS 设置元素的位置和尺寸。因为行和列的尺寸可以定义为固定、灵活或按内容调整大小，所以很容易构建一个完全填满整个屏幕的布局，无论屏幕尺寸如何。

例如，下图显示了一个阅读器示例，它划分为带有多个元素的两列和三行。在浏览器窗口的尺寸更改时，某些元素必须保持不变，而其他元素会增大或缩小。

通过 CSS 网格布局，你可以通过以下列标记开始实现此设计。

#logo { -ms-grid-column: 1; -ms-grid-row: 1 }
#page { -ms-grid-column: 1; -ms-grid-row: 3 }
#bookmarks { -ms-grid-column: 1; -ms-grid-row: 2; -ms-grid-row-align: start }
#content { -ms-grid-column: 2; -ms-grid-row: 1; -ms-grid-row-span: 2 }
#controls { -ms-grid-column: 2; -ms-grid-row: 3; -ms-grid-column-align: center }

var pageTemplates = [
'/html/page1.html',
'/html/page2.html',
'/html/page3.html',
'/html/pageDefault.html'
];

unction createPages() {
var targetPage;
if (currentPage > (pageTemplates.length - 1)) {
targetPage = pageTemplates[pageTemplates.length - 1];
} else {
targetPage = pageTemplates[currentPage];
}
var flexboxElement = document.getElementById('pageContainer');
WinJS.UI.Fragments.render(targetPage, flexboxElement).then(function () {
msSetImmediate(function () {
currentPage += 1;
var flexboxElement = document.getElementById('pageContainer');
var pages = flexboxElement.querySelectorAll('.page');
var lastPage = pages[pages.length - 1];
var regions = lastPage.querySelectorAll(searchClass);
var lastRegion = regions[regions.length - 1];
if (lastRegion.msRegionOverflow === 'overflow') {
createPages();
}
});
});
}

function resizePages() {
var flexboxElement = document.getElementById('pageContainer');
var pages = flexboxElement.querySelectorAll('.page');
var lastPage = pages[pages.length-1];
var regions = lastPage.querySelectorAll(searchClass);
var lastRegion = regions[regions.length-1];
if (lastRegion.msRegionOverflow === 'overflow') {
createPages();
}
else {
var firstRegion = regions[0];
while (firstRegion.msRegionOverflow === 'empty')
{
flexboxElement.removeChild(lastPage);
currentPage = currentPage - 1;
lastPage = pages[currentPage-1];
regions = lastPage.querySelectorAll(searchClass);
firstRegion = regions[0];
}
}
}

Dynamic region Templates Sample

.fullregion {
-ms-flow-from: content;
}
.snappedregion
{
-ms-flow-from: content;
}
/*In snapped mode the fullregion class no longer receives content from the content stream, but the snappedregion class does.*/
@media (-ms-view-state: snapped)
{
.fullregion
{
-ms-flow-from: null;
}
.snappedregion
{
-ms-flow-from: content;
}
/*Change the navigation direction to vertical for RTL and LTR languages*/
#pageContainer
{
-ms-box-orient: block-axis;
}

/* In snapped mode we set the first region to take up the entire page, and hide all other regions. */
@media all and (-ms-view-state: snapped)
{
#page1region1
{
-ms-grid-row: 2;
-ms-grid-column: 1;
-ms-grid-row-span: 4;
-ms-grid-column-span: 4;
padding: 0;
}
#page1region2
{
display: none;
}
#logoContainer
{
display: none;
}
}

操作实例:阅读器应用（JavaScript和HTML）

多列

区域

排除项

结合使用多个功能以营造完美阅读体验

布置页面模板

实例化页面模板