feat(print): respect user's detail font when printing

This commit is contained in:
Elian Doran
2026-04-18 09:37:30 +03:00
parent 1674bf0a87
commit 374eeaeb08
4 changed files with 20 additions and 3 deletions

View File

@@ -1,7 +1,6 @@
@import "boxicons/css/boxicons.min.css";
:root {
--print-font-family: sans-serif;
--print-font-size: 11pt;
}
@@ -11,6 +10,8 @@
html,
body {
--print-font-family: var(--detail-font-family, sans-serif);
width: 100%;
height: 100%;
color: black;

View File

@@ -31,6 +31,13 @@ async function main() {
if (!noteId) return;
await import("./print.css");
// Load the user's font preferences so that --detail-font-family is available.
const fontLink = document.createElement("link");
fontLink.rel = "stylesheet";
fontLink.href = "api/fonts";
document.head.appendChild(fontLink);
const note = await froca.getNote(noteId);
const bodyWrapper = document.createElement("div");

View File

@@ -167,10 +167,16 @@ class="admonition note">
class="reference-link" href="#root/_help_KC1HB96bqqHX">Templates</a>.</li>
</ul>
<p>For example, to change the font of the document from the one defined by
the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">:root{
the theme or the user to a serif one:</p><pre><code class="language-text-x-trilium-auto">body{
--print-font-family: serif;
--print-font-size: 11pt;
}</code></pre>
<aside class="admonition important">
<p>When altering <code spellcheck="false">--print-font-family</code>, make
sure the change is done at <code spellcheck="false">body</code> level and
not <code spellcheck="false">:root</code>, since otherwise it won't be picked
up due to specificity rules.</p>
</aside>
<p>To remark:</p>
<ul>
<li>Multiple CSS notes can be add by using multiple <code spellcheck="false">~printCss</code> relations.</li>

View File

@@ -99,12 +99,15 @@ To do so:
For example, to change the font of the document from the one defined by the theme or the user to a serif one:
```
:root{
body{
--print-font-family: serif;
--print-font-size: 11pt;
}
```
> [!IMPORTANT]
> When altering `--print-font-family`, make sure the change is done at `body` level and not `:root`, since otherwise it won't be picked up due to specificity rules.
To remark:
* Multiple CSS notes can be add by using multiple `~printCss` relations.