分页符后重新显示当前标题 [英] Re-displaying the current heading after a page break
问题描述
我正在使用WeasyPrint创建文档.我有一些具有名称的部分，其中一些名称可能跨越多个页面.当节太长时，将发生分页符.我想做的是重新显示当前部分的名称，最好使用相同的格式.
以下MWE显示分页符后如何不显示节标题:
< html><身体>< h1>第一部分</h1>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p style ="break-after:always;"></p>< p> Lorem ipsum ...</p></body></html> weasyprint example.html example.pdf 的输出:
我希望在左侧页面顶部以< h1> 标签显示第一部分.
我想作为
让我为您添加一些代码:
< html><身体>< h1>第一部分</h1>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p style ="break-after:always;"></p>< p> Lorem ipsum ...</p>< h1>第二部分</h1>< p> Lorem ipsum 2 ...</p>< p> Lorem ipsum 2 ...</p>< p> Lorem ipsum 2 ...</p>< p> Lorem ipsum 2 ...</p>< p style ="break-after:always;"></p>< p> Lorem ipsum 2 ...</p></body></html> 在这种情况下，您的标题将是:
- 第一页:第一部分"
- 第二页:第一部分"…然后将在同一页面中以自己的标题开始第二部分
- 第三页:第二部分"
下一步:为标题和章节标题设置相同的样式，因此标题可以与标题具有相同的外观:
h1 {字符串集:doctitle content();font-family:解放衬线"；字体大小:28pt；行高:1.2em；}@页 {尺寸:A4;边距:1.6cm .6cm 1.2cm .6cm;@左上方 {内容:字符串(doctitle);font-family:解放衬线"；字体大小:28pt；行高:1.2em；}} 然后您将看到类似这样的内容:
现在，我们需要修复最新的问题:由于标题和标题都存在，因此首页中的标题看起来像是重复的.
修复非常简单:
body h1:first-of-type {位置:绝对；左:-30cm;} 我已将第一个标题放置在打印区域之外.不幸的是，将其设置为 display:none 会导致甚至不显示标题.您还有其他选择，例如 visibility:hidden 或 font-size:0 或 color:transparent ，但是这三个选项将始终允许标题和第一段之间的空白.
现在可能是时候增加标题的高度了，在@ top-left上添加top-padding；结果应如下所示:
这种技术不是100％安全的:如果不是第一章的一章将同时在新页面中开始，则将显示标题和标题，一个和另一个接近.无论如何，这都不是常见的情况.
进一步的改进可以考虑使用不同的分页符方法.
< html><身体>< section class ="chapter">< h1>第一部分</h1>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< p> Lorem ipsum ...</p>< h1>第二部分</h1>< p> Lorem ipsum 2 ...</p>< p> Lorem ipsum 2 ...</p>< p> Lorem ipsum 2 ...</p></section>< section class ="chapter">< h1>第三节</h1>< p> Lorem ipsum 3 ...</p>< p> Lorem ipsum 3 ...</p>< p> Lorem ipsum 3 ...</p>< p> Lorem ipsum 3 ...</p></section></body></html> 为章节设置分页符样式，并为任何章节的第一个孩子管理标题隐藏:
section.chapter {突破:总是；}section.chapter h1:first-of-type {位置:绝对；左:-30cm;} I'm creating a document with WeasyPrint. I have sections that have names, some of which might span across multiple pages. When a section is too long, a page break occurs. What I am trying to do is to re-display the current section's name, ideally with the same formatting.
The following MWE shows how the section title is not displayed after a page break:
<html>
<body>
<h1>First section</h1>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p style="break-after: always;"></p>
<p>Lorem ipsum...</p>
</body>
</html>
Output of weasyprint example.html example.pdf:
I want First section to be displayed, as a <h1> tag, at the top on the left page.
I would like to do as this tex.stackexchange post which, as I understand it, basically consists in checking if the current page number exceeds the current total page count, and if it does, inserting the last section title encountered.
I'm not aware of the possibility to do so in HTML, does it exist?
Is there any workaround to do this? If not, is it possible to have WeasyPrint execute custom Python code on some page-break hook?
While it is not possible at this time, you can still use an awesome workaround.
When printing, only three kind of elements are automatically reproduced on each page:
- elements with fixed position
- headers, declared with @top-left, @top-center, @top-right etc.
- footers, declared with @bottom-left etc.
We have to use one of them to build up a css-only solution: we will choose headers. So, the first part of the question is: how can I set a different header for each page? Or, in other words, how can I set a chapter's header?
Achieving this goal is quite simple: once decided which tag or class should contain the chapter's title, set a new CSS string for it:
h1 {
string-set: doctitle content();
}
Then display the string in the header:
@page {
size: A4;
margin: 1.6cm .6cm 1.2cm .6cm;
@top-center {
content: string(doctitle);
}
}
Now you will have something like this:
Let me add some code to your:
<html>
<body>
<h1>First section</h1>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p style="break-after: always;"></p>
<p>Lorem ipsum...</p>
<h1>Second section</h1>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p style="break-after: always;"></p>
<p>Lorem ipsum 2...</p>
</body>
</html>
In this case your headers will be:
- 1st page: "First section"
- 2nd page: "First section"… then will start the second section in the same page, with his own title
- 3rd page: "Second section"
Next step: set same style for headers and chapter's titles, so headers can have the same appearance as titles:
h1 {
string-set: doctitle content();
font-family: 'Liberation Serif';
font-size: 28pt;
line-height: 1.2em;
}
@page {
size: A4;
margin: 1.6cm .6cm 1.2cm .6cm;
@top-left {
content: string(doctitle);
font-family: 'Liberation Serif';
font-size: 28pt;
line-height: 1.2em;
}
}
Then you will have something like this:
Now, we need to fix the latest issue: the title in the first page looks like duplicated, because of the presence of both title and header.
Fixing it is quite simple:
body h1:first-of-type {
position: absolute;
left: -30cm;
}
I have positioned the first title outside the printing area. Unfortunately setting it to display: none will cause that not even the header will be displayed. You have other alternatives, such as visibility: hidden or font-size: 0 or color: transparent, but these three options will always let some blank space between the header and the first paragraph.
Now probably it's time to increase the header's height, adding top-padding to @top-left; The result should look like this:
This technique is not 100% safe: if a chapter that is not the first one will coincidentally start in a new page, both header and title will be shown, one close to the other. In any case this is not a frequent scenario.
Further improvements can consider a different approach to page breaks.
<html>
<body>
<section class="chapter">
<h1>First section</h1>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<h1>Second section</h1>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
<p>Lorem ipsum 2...</p>
</section>
<section class="chapter">
<h1>Third section</h1>
<p>Lorem ipsum 3...</p>
<p>Lorem ipsum 3...</p>
<p>Lorem ipsum 3...</p>
<p>Lorem ipsum 3...</p>
</section>
</body>
</html>
Styling page-breaks on chapters, and managing title hiding for the first child of any chapter:
section.chapter {
break-after: always;
}
section.chapter h1:first-of-type {
position: absolute;
left: -30cm;
}
这篇关于分页符后重新显示当前标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
