是否可以使HTML页面的行为类似于MS Word中的A4大小的页面?
本质上,我希望能够在浏览器中显示HTML页面,并在A4尺寸页面的尺寸中概述内容。
为了简单起见,我假设HTML页面仅包含文本(没有图像等),并且没有<br>
标签。
同样,当打印HTML页面时,它将以A4尺寸的纸页形式出现。
早在2005年11月,AlistApart.com就发表了一篇文章,介绍了他们如何只使用HTML和CSS来出版一本书。
这是该文章的摘录:
CSS2具有分页媒体(想像纸)的概念,而不是连续媒体(想像滚动条)的概念。样式表可以设置页面的大小及其页边距。可以为页面模板指定名称,元素可以声明要在其上打印的命名页面。同样,源文档中的元素可能会强制分页符。这是我们使用的样式表的摘录:
@page { size: 7in 9.25in; margin: 27mm 16mm 27mm 16mm; }
拥有一家美国发行商,我们得到的页面大小以英寸为单位。作为欧洲人,我们继续进行公制测量。CSS都接受。
设置页面大小和边距后,我们需要确保在正确的位置存在分页符。以下摘录显示了如何在各章和附录之后生成分页符:
div.chapter, div.appendix { page-break-after: always; }
另外,我们使用CSS2来声明命名页面:
div.titlepage { page: blank; }
即,标题页将被打印在名称为“空白”的页面上。CSS2描述了命名页面的概念,但是仅当页眉和页脚可用时,它们的价值才变得显而易见。
无论如何…
由于要打印A4,因此当然需要不同的尺寸:
@page {
size: 21cm 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
本文深入探讨了设置分页符等内容,因此您可能需要完整阅读。
就您而言,诀窍是首先创建打印CSS。大多数现代浏览器(> 2005)都支持缩放,并且已经能够基于打印CSS显示网站。
现在,您将要使Web外观看起来有些不同,并使整个设计也适应大多数浏览器(包括2005年之前的旧浏览器)。为此,您必须创建一个Web
CSS文件或覆盖打印CSS的某些部分。在创建用于网络显示的CSS时,请记住浏览器可以具有任意大小(例如:“移动”到“大屏幕电视”)。含义:对于Web
CSS,最好使用可变宽度(%)来设置页面宽度和图像宽度,以支持尽可能多的显示设备和Web浏览客户端。
编辑(30-10-2018)
它引起了我的注意,因为size
它不是有效的CSS3,这确实是正确的-
我只重复了文章中引用的代码(如前所述),它是旧的CSS2(当您查看本文的年份和此答案首次发布)。无论如何,以下是有效的CSS3代码,以方便您进行复制和粘贴:
@media print {
body{
width: 21cm;
height: 29.7cm;
margin: 30mm 45mm 30mm 45mm;
/* change the margins as you want them to be. */
}
}
如果您认为确实需要像素( 实际上应该避免使用pixel ),则必须选择正确的DPI进行打印:
Yet, I would avoid the hassle and simply use cm
(centimeters) or mm
(millimeters) for sizing as that avoids rendering glitches that can arise
depending on which client you use.
我成功地使用Apache Batik将SVG文件转换为PDF。 以下代码用于生成 PDF: 现在我想影响生成的PDF的页面大小,所以我得到了A4的页面大小。我怎么能这么做呢? 我已经尝试了一些关键提示,但没有效果。
我正在用Confluence为我的代码库编写文档,我想添加动态生成的gitgraphs(https://gitgraphjs.com/)。
问题内容: 如何使用PDFBox查找(以毫米为单位)pdf页面的宽度和高度?目前,我正在使用此: 但结果是(不是毫米): 问题答案: PDF内的度量单位是磅,这是传统的图形行业度量单位。Adobe使用以下定义: 并且由于将一英寸定义为正好是25.4毫米(真的!),因此您可以使用以下公式将点数转换为毫米 顺便说一下,您的值将(宽松地)转换为A4纸张尺寸210 x 297毫米。(“松散”的原因有两个:
问题内容: 我需要在网络中模拟A4纸,并允许打印此页,因为它在浏览器(特别是Chrome)上显示。我将元素大小设置为21cm x 29.7cm,但是当我发送打印(或打印预览)时,它会裁剪页面。 我想我忘记了什么。但是会是什么呢? Chrome :剪贴页,双页( 这正是我需要的工作 ) Firefox :完美运行。 IE10 :信不信由你,这很完美! Opera :打印预览时非常容易出错 问题答案:
问题内容: 如何使用HTML5和CSS3画圆? 也可以在其中放入文字吗? 问题答案: 本身不能画一个圆。但是您可以制作与圆相同的东西。 您必须创建一个带有圆角(通过border-radius)的矩形,该圆角是要制作的圆的宽度/高度的一半。
注意: Adobe Muse 不再添加新增功能,并将于 2020 年 3 月 26 日停止支持。有关详细信息和帮助,请参阅 Adobe Muse 服务结束页面。 使用参考线设置页眉、页脚和内容区域 主页包含五根可移动的水平参考线。顶部和底部的参考线确定整体页面大小。中间的两根参考线定义页面内容的主要部分:页眉下边缘与页脚区域上边缘之间的区域。在“设计”视图中将鼠标悬停在每根参考线上方以查看说明性工