mirror of
https://github.com/zadam/trilium.git
synced 2026-05-06 12:37:04 +02:00
feat(print): respect user's detail font when printing
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user