该CSS3 GCPM规范定义了以下
<style>
.footnote { float: footnote }
</style>
<p>A sentence consists of words. <span class="footnote">Most often.</span>.
渲染为
一个句子由单词组成.¹
¹最常见的.[在(每个)页面的末尾]
打印时(也适用于屏幕媒体类型,但只要它适用于打印我很高兴).
这正是我想要做的,无论多么复杂,但据我所知,没有现代浏览器实现此规范,也没有css-paging规范.如果我愿意使用javascript,有没有办法实现这种效果.至少可以使用一些库生成pdf,但如果可能的话,我希望不会失去html的功能(像浮动等等).
而且如果你想知道,请注意
注释是放置在书籍或文档中页面底部或章节,卷或整个文本末尾的一串文本.
和脚注是
...页面底部的注释,而尾注是在章节,卷或整个工作结束时的单独标题下收集的.
有关更多信息,请参阅排版注释中的wikipage.
可以寻找解决方案的一个可能方向是确定单页的高度,在这种情况下,在预期高度29.7cm和试验和误差高度(至少在我的系统上)之间注意到差异26.1cm,这可以使用以下方法观察到码:
<style>
@page{
margin:0px;
padding:0px;
}
html,body,*{
margin:0px;
padding:0px;
}
p{
border:1px solid black;
height:26.1cm;
}
</style>
还有几个空<p>的.我会考虑对这种差异的解释(从而允许它的控制)足够解决问题.
您好我已经使用CSS3页面媒体模块http://www.w3.org/TR/css-gcpm-3/直接从浏览器打印HTML内容到PDF,但我没有得到任何浏览器来处理它.我的工作如下.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@media print {
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "sans-serif";
position: relative;
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
@page {
size: letter;
margin: 20mm 25mm;
}
@page {
@top-center {
content: element(pageHeader);
}
}
@page {
@bottom-center {
content: element(pageFooter);
}
}
#pageHeader {
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
}
</style>
</head>
<body>
<div id="pageHeader">
<p>This is the Header shown on first page.</p> …在 CSS 3 中放置页眉和页脚的正确方法是什么？我正在阅读http://www.w3.org/TR/css3-gcpm/，我想知道以下内容是否正确解释了如何使用运行元素。
运行元素具有从文档的正常“流”转移的属性，页眉和页脚需要它。
这是我试图实现的重要部分，否则有一个 string-set 属性可用于命名一个部分并在页边距的其他地方使用它。我也很好奇 3rd 方实现是否支持它们？我知道一些工具中有一些类似的标记，但我想知道这是否是 CSS 的意思？
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Testing</title>
<style type="text/css">
div.header {position: running(header)}
div.footer {position: running(footer)}
@page{
@top-center {content: element(header)}
@bottom-center {content: element(footer)}
}
</style>
</head>
<body>
<div class="header"> HEADER </div>
<div class="footer"> FOOTER </div>
<div>
Normal Text
</div>
</body>
<html>
http://jsfiddle.net/VubtS/ - 但当然浏览器不会显示它，因为它用于分页媒体。
我正在一些 HTML-PDF 转换中尝试此操作，以查看它们符合 CSS 3 的程度，但显然它们都没有呈现此。根据 Css3 定义，我的标记是否正确？