mirror of
https://github.com/zadam/trilium.git
synced 2025-10-26 07:46:30 +01:00
docs(user): improve & update documentation for printing
This commit is contained in:
Elian Doran
2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json
generated
vendored
2
apps/server/src/assets/doc_notes/en/User Guide/!!!meta.json
generated
vendored
File diff suppressed because one or more lines are too long
@@ -302,7 +302,9 @@
|
||||
<td><code>color</code>
|
||||
</td>
|
||||
<td>defines color of the note in note tree, links etc. Use any valid CSS color
|
||||
value like 'red' or #a13d5f</td>
|
||||
value like 'red' or #a13d5f
|
||||
<br>Note: this color may be automatically adjusted when displayed to ensure
|
||||
sufficient contrast with the background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>keyboardShortcut</code>
|
||||
|
||||
|
Before Width: | Height: | Size: 150 B After Width: | Height: | Size: 150 B |
@@ -1,42 +0,0 @@
|
||||
<p>
|
||||
<img src="Export as PDF_image.png">
|
||||
</p>
|
||||
<p>Screenshot of the note contextual menu indicating the “Export as PDF”
|
||||
option.</p>
|
||||
<p>On the desktop application of Trilium it is possible to export a note
|
||||
as PDF. On the server or PWA (mobile), the option is not available due
|
||||
to technical constraints and it will be hidden.</p>
|
||||
<p>To print a note, select the
|
||||
<img src="1_Export as PDF_image.png">button to the right of the note and select <em>Export as PDF</em>.</p>
|
||||
<p>Afterwards you will be prompted to select where to save the PDF file.</p>
|
||||
<h2>Automatic opening of the file</h2>
|
||||
<p>When the PDF is exported, it is automatically opened with the system default
|
||||
application for easy preview.</p>
|
||||
<p>Note that if you are using Linux with the GNOME desktop environment, sometimes
|
||||
the default application might seem incorrect (such as opening in GIMP).
|
||||
This is because it uses Gnome's “Recommended applications” list.</p>
|
||||
<p>To solve this, you can change the recommended application for PDFs via
|
||||
this command line. First, list the available applications via <code>gio mime application/pdf</code> and
|
||||
then set the desired one. For example to use GNOME's Evince:</p><pre><code class="language-text-x-trilium-auto">gio mime application/pdf</code></pre>
|
||||
<h2>Reporting issues with the rendering</h2>
|
||||
<p>Should you encounter any visual issues in the resulting PDF file (e.g.
|
||||
a table does not fit properly, there is cut off text, etc.) feel free to
|
||||
<a
|
||||
href="#root/_help_wy8So3yZZlH9">report the issue</a>. In this case, it's best to offer a sample note (click
|
||||
on the
|
||||
<img src="1_Export as PDF_image.png">button, select Export note → This note and all of its descendants → HTML
|
||||
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
|
||||
<h2>Landscape mode</h2>
|
||||
<p>When exporting to PDF, there are no customizable settings such as page
|
||||
orientation, size, etc. However, it is possible to specify a given note
|
||||
to be printed as a PDF in landscape mode by adding the <code>#printLandscape</code> attribute
|
||||
to it (see <a class="reference-link" href="#root/_help_zEY4DaJG4YT5">Attributes</a>).</p>
|
||||
<h2>Page size</h2>
|
||||
<p>By default, the resulting PDF will be in Letter format. It is possible
|
||||
to adjust it to another page size via the <code>#printPageSize</code> attribute,
|
||||
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</p>
|
||||
<h2>Keyboard shortcut</h2>
|
||||
<p>It's possible to trigger the export to PDF from the keyboard by going
|
||||
to <em>Keyboard shortcuts</em> in <a class="reference-link"
|
||||
href="#root/_help_4TIF1oA4VQRO">Options</a> and assigning a key combination
|
||||
for the <code>exportAsPdf</code> action.</p>
|
||||
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
111
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html
generated
vendored
Normal file
111
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html
generated
vendored
Normal file
@@ -0,0 +1,111 @@
|
||||
<figure class="image">
|
||||
<img style="aspect-ratio:951/432;" src="Printing & Exporting as PD.png"
|
||||
width="951" height="432">
|
||||
<figcaption>Screenshot of the note contextual menu indicating the “Export as PDF”
|
||||
option.</figcaption>
|
||||
</figure>
|
||||
<h2>Printing</h2>
|
||||
<p>This feature allows printing of notes. It works on both the desktop client,
|
||||
but also on the web.</p>
|
||||
<p>Note that not all note types are printable as of now. We do plan to increase
|
||||
the coverage of supported note types in the future.</p>
|
||||
<p>To print a note, select the
|
||||
<img src="1_Printing & Exporting as PD.png"
|
||||
width="29" height="31">button to the right of the note and select <em>Print note</em>. Depending
|
||||
on the size and type of the note, this can take up to a few seconds. Afterwards
|
||||
you will be redirected to the system/browser printing dialog.</p>
|
||||
<aside
|
||||
class="admonition note">
|
||||
<p>Printing and exporting as PDF are not perfect. Due to technical limitations,
|
||||
and sometimes even browser glitches the text might appear cut off in some
|
||||
circumstances. </p>
|
||||
</aside>
|
||||
<h2>Reporting issues with the rendering</h2>
|
||||
<p>Should you encounter any visual issues in the resulting PDF file (e.g.
|
||||
a table does not fit properly, there is cut off text, etc.) feel free to
|
||||
<a
|
||||
href="#root/_help_wy8So3yZZlH9">report the issue</a>. In this case, it's best to offer a sample note (click
|
||||
on the
|
||||
<img src="1_Printing & Exporting as PD.png" width="29" height="31">button, select Export note → This note and all of its descendants → HTML
|
||||
in ZIP archive). Make sure not to accidentally leak any personal information.</p>
|
||||
<p>Consider adjusting font sizes and using <a href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/_help_CohkqWQC1iBv">page breaks</a> to
|
||||
work around the layout.</p>
|
||||
<h2>Exporting as PDF</h2>
|
||||
<p>On the desktop application of Trilium it is possible to export a note
|
||||
as PDF. On the server or PWA (mobile), the option is not available due
|
||||
to technical constraints and it will be hidden.</p>
|
||||
<p>To print a note, select the
|
||||
<img src="1_Printing & Exporting as PD.png">button to the right of the note and select <em>Export as PDF</em>. Afterwards
|
||||
you will be prompted to select where to save the PDF file.</p>
|
||||
<h3>Automatic opening of the file</h3>
|
||||
<p>When the PDF is exported, it is automatically opened with the system default
|
||||
application for easy preview.</p>
|
||||
<p>Note that if you are using Linux with the GNOME desktop environment, sometimes
|
||||
the default application might seem incorrect (such as opening in GIMP).
|
||||
This is because it uses Gnome's “Recommended applications” list.</p>
|
||||
<p>To solve this, you can change the recommended application for PDFs via
|
||||
this command line. First, list the available applications via <code>gio mime application/pdf</code> and
|
||||
then set the desired one. For example to use GNOME's Evince:</p><pre><code class="language-text-x-trilium-auto">gio mime application/pdf</code></pre>
|
||||
<h3>Customizing exporting as PDF</h3>
|
||||
<p>When exporting to PDF, there are no customizable settings such as page
|
||||
orientation, size. However, there are a few <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_zEY4DaJG4YT5">Attributes</a> to
|
||||
adjust some of the settings:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e76a765fe309058890d4f4d3e63bca578">To print in landscape mode instead of portrait (useful for big diagrams
|
||||
or slides), add <code>#printLandscape</code>.</li>
|
||||
<li data-list-item-id="e78123a3a12954d7c9f520f4e75ed375d">By default, the resulting PDF will be in Letter format. It is possible
|
||||
to adjust it to another page size via the <code>#printPageSize</code> attribute,
|
||||
with one of the following values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.</li>
|
||||
</ul>
|
||||
<aside class="admonition note">
|
||||
<p>These options have no effect when used with the printing feature, since
|
||||
the user-defined settings are used instead.</p>
|
||||
</aside>
|
||||
<h2>Keyboard shortcut</h2>
|
||||
<p>It's possible to trigger both printing and export as PDF from the keyboard
|
||||
by going to <em>Keyboard shortcuts</em> in <a class="reference-link"
|
||||
href="#root/_help_4TIF1oA4VQRO">Options</a> and assigning a key combination
|
||||
for:</p>
|
||||
<ul>
|
||||
<li class="ck-list-marker-italic" data-list-item-id="e52b4441f2a3af7773585b19c8f796c8d"><em>Print Active Note</em>
|
||||
</li>
|
||||
<li class="ck-list-marker-italic" data-list-item-id="e40e1f6f480c7857100f64c2f63e062fb"><em>Export Active Note as PDF</em>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Constraints & limitations</h2>
|
||||
<p>Not all <a class="reference-link" href="#root/pOsGYCXsbNQG/_help_KSZ04uQ2D1St">Note Types</a> are
|
||||
supported when printing, in which case the <em>Print</em> and <em>Export as PDF</em> options
|
||||
will be disabled.</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e448a833da1bb1643181c72779382d1b6">For <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_6f9hih2hXXZk">Code</a> notes:
|
||||
<ul>
|
||||
<li data-list-item-id="e6b699104a21930de7c2618123d0d5750">Line numbers are not printed.</li>
|
||||
<li data-list-item-id="e342cba939534f0989c9620520c7b87a3">Syntax highlighting is enabled, however a default theme (Visual Studio)
|
||||
is enforced.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="ea23948a21d6ad2a01d70dfbdfa9bd62f">For <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_GTwFsgaA0lCt">Collections</a>:
|
||||
<ul>
|
||||
<li data-list-item-id="e387ee52424d8b78fd61c3a1e0d395d3e">Only <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation View</a> is
|
||||
currently supported.</li>
|
||||
<li data-list-item-id="e94fa0cced6a7668c96cf7513557f2906">We plan to add support for all the collection types at some point.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e8b17c931e05f9d579767536088a108da">Using <a class="reference-link" href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a> for
|
||||
printing is not longer supported, due to a more stable but isolated mechanism.
|
||||
<ul>
|
||||
<li data-list-item-id="eae91219e277cc2366d86d47291ed9cec">We plan to introduce a new mechanism specifically for a print CSS.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Under the hood</h2>
|
||||
<p>Both printing and exporting as PDF use the same mechanism: a note is rendered
|
||||
individually in a separate webpage that is then sent to the browser or
|
||||
the Electron application either for printing or exporting as PDF.</p>
|
||||
<p>The webpage that renders a single note can actually be accessed in a web
|
||||
browser. For example <code>http://localhost:8080/#root/WWRGzqHUfRln/RRZsE9Al8AIZ?ntxId=0o4fzk</code> becomes <code>http://localhost:8080/?print#root/WWRGzqHUfRln/RRZsE9Al8AIZ</code>.</p>
|
||||
<p>Accessing the print note in a web browser allows for easy debugging to
|
||||
understand why a particular note doesn't render well. The mechanism for
|
||||
rendering is similar to the one used in <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a>.</p>
|
||||
@@ -6,33 +6,31 @@
|
||||
within Trilium.</p>
|
||||
<h2>How it works</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="e51cbe078fb06e2bfdfb1f2bf6fd82225">Each slide is a child note of the collection.</li>
|
||||
<li data-list-item-id="efffc6f15623109770c57338c61b4ccb6">The order of the child notes determines the order of the slides.</li>
|
||||
<li
|
||||
data-list-item-id="e1a795af0f85ba888f84586be6ed2de2a">Unlike traditional presentation software, slides can be laid out both
|
||||
<li>Each slide is a child note of the collection.</li>
|
||||
<li>The order of the child notes determines the order of the slides.</li>
|
||||
<li>Unlike traditional presentation software, slides can be laid out both
|
||||
horizontally and vertically (see belwo for more information).</li>
|
||||
<li data-list-item-id="e9a2a74d8e19974766f65416100e8f877">Direct children will be laid out horizontally and the children of those
|
||||
<li>Direct children will be laid out horizontally and the children of those
|
||||
will be laid out vertically. Children deeper than two levels of nesting
|
||||
are ignored.</li>
|
||||
</ul>
|
||||
<h2>Interaction and navigation</h2>
|
||||
<p>In the floating buttons section (top-right):</p>
|
||||
<ul>
|
||||
<li data-list-item-id="ee6dd604137e6918dcfac24fe271b05bf">Edit button to go to the corresponding note of the current slide.</li>
|
||||
<li
|
||||
data-list-item-id="e4805f237077e9dc8ddbed2cb0b56e585">Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
|
||||
<li>Edit button to go to the corresponding note of the current slide.</li>
|
||||
<li>Press Overview button (or the <kbd>O</kbd> key) to show a birds-eye view
|
||||
of the slides. Press the button again to disable it.</li>
|
||||
<li data-list-item-id="ee714da289257895faf87a26f6849e050">Press the “Start presentation” button to show the presentation in full-screen.</li>
|
||||
<li>Press the “Start presentation” button to show the presentation in full-screen.</li>
|
||||
</ul>
|
||||
<p>The following keyboard shortcuts are supported:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e5a34fbaa9c98cd91ffac8301e153a083">Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go
|
||||
<li>Press <kbd>←</kbd> and <kbd>→</kbd> (or <kbd>H</kbd> and <kbd>L</kbd>) to go
|
||||
to the slide on the left or on the right (horizontal).</li>
|
||||
<li data-list-item-id="e39394b060a9b767d04c466440106cbf0">Press <kbd>↑</kbd> and <kbd>↓</kbd> (or <kbd>K</kbd> and <kbd>J</kbd>)
|
||||
<li>Press <kbd>↑</kbd> and <kbd>↓</kbd> (or <kbd>K</kbd> and <kbd>J</kbd>)
|
||||
to go to the upward or downward slide (vertical).</li>
|
||||
<li data-list-item-id="e17441e9598f687e89a161a8afe2f703d">Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or to go
|
||||
<li>Press <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> or to go
|
||||
to the next/previous slide in order.</li>
|
||||
<li data-list-item-id="e4212130fc1fdc5de980e2e40feae68c2">And a few more, press <kbd>?</kbd> to display a popup with all the supported
|
||||
<li>And a few more, press <kbd>?</kbd> to display a popup with all the supported
|
||||
keyboard combinations.</li>
|
||||
</ul>
|
||||
<h2>Vertical slides and nesting</h2>
|
||||
@@ -42,15 +40,15 @@
|
||||
<p>This horizontal/vertical organization affects transitions (especially
|
||||
on the “slide” transition), however it is most noticeable in navigation.</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e9245eba99da45713930c1714202add31">Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally,
|
||||
<li>Pressing <kbd>←</kbd> and <kbd>→</kbd> will navigate through slides horizontally,
|
||||
thus skipping vertical notes under the current slide. This is useful to
|
||||
skip entire chapters/related slides. </li>
|
||||
<li data-list-item-id="ef9aedf69e5e2a599e9fbd0de1b89b4ad">Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical
|
||||
skip entire chapters/related slides.</li>
|
||||
<li>Pressing <kbd>↑</kbd> and <kbd>↓</kbd> will navigate through the vertical
|
||||
slides at the current level.</li>
|
||||
<li data-list-item-id="e436fc36f74a22fdefe31e498684e23b3">Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to
|
||||
<li>Pressing <kbd>Space</kbd> and <kbd>Shift</kbd> + <kbd>Space</kbd> will go to
|
||||
the next/previous slide in order, regardless of the direction. This is
|
||||
generally the key combination to use when presenting.</li>
|
||||
<li data-list-item-id="e9c5dcf5efec250876bd2c527082e76d7">The arrows on the bottom-right of the slide will also reflect this navigation
|
||||
<li>The arrows on the bottom-right of the slide will also reflect this navigation
|
||||
scheme.</li>
|
||||
</ul>
|
||||
<figure class="image image-style-align-right image_resized" style="width:55.57%;">
|
||||
@@ -62,19 +60,19 @@
|
||||
slides.</p>
|
||||
<p>In the following example, the note structure is as follows:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e4d5d440ec56a9c81b7c8323ab142478d">Presentation collection
|
||||
<li>Presentation collection
|
||||
<ul>
|
||||
<li data-list-item-id="e255021a351d18e2792c15ab2b80c0a57">Trilium Notes (demo page)</li>
|
||||
<li data-list-item-id="ef6f95ec54572aa247a13e8104a2db0c3">“Introduction” slide
|
||||
<li>Trilium Notes (demo page)</li>
|
||||
<li>“Introduction” slide
|
||||
<ul>
|
||||
<li data-list-item-id="eccb526d7f2dd67ac686f8e963e660a77">“The challenge of personal knowledge management”</li>
|
||||
<li data-list-item-id="e0aca477122bb0b00ab9b3bc163436b5f">“Note-taking structures”</li>
|
||||
<li>“The challenge of personal knowledge management”</li>
|
||||
<li>“Note-taking structures”</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li data-list-item-id="e3bbbe33c8d7a18cb17cd0de29b6eff05">“Demo & Feature highlights” slide
|
||||
<li>“Demo & Feature highlights” slide
|
||||
<ul>
|
||||
<li data-list-item-id="ebf5e3fe8a8b4400f21d5cc99b8198898">“Really fast installation process”</li>
|
||||
<li data-list-item-id="e0b6885a0bf7f76fa2ce7801f004a2d42">Video slide</li>
|
||||
<li>“Really fast installation process”</li>
|
||||
<li>Video slide</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -83,46 +81,44 @@
|
||||
<h2>Customization</h2>
|
||||
<p>At collection level, it's possible to adjust:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="edc0a7c71ee836a225a8793e3cb1e29e8">The theme of the entire presentation to one of the predefined themes by
|
||||
going to the <a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_BlN9DFI679QC">Ribbon</a> and
|
||||
<li>The theme of the entire presentation to one of the predefined themes by
|
||||
going to the <a class="reference-link" href="#root/_help_BlN9DFI679QC">Ribbon</a> and
|
||||
looking for the <em>Collection Properties</em> tab.</li>
|
||||
<li data-list-item-id="ed04e1bd7a997de717d8b8b8b90f19e7f">It's currently not possible to create custom themes, although it is planned.</li>
|
||||
<li
|
||||
data-list-item-id="edb37c7902c9e464de4555ec3ede05403">Note that it is note possible to alter the CSS via <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/pKK96zzmvBGf/_help_AlhDUqhENtH7">Custom app-wide CSS</a> because
|
||||
the slides are rendered isolated (in a shadow DOM).</li>
|
||||
<li>It's currently not possible to create custom themes, although it is planned.</li>
|
||||
<li>Note that it is note possible to alter the CSS via <a class="reference-link"
|
||||
href="#root/_help_AlhDUqhENtH7">Custom app-wide CSS</a> because the
|
||||
slides are rendered isolated (in a shadow DOM).</li>
|
||||
</ul>
|
||||
<p>At slide level:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="eb9c23ec94dcd00a3a8539d3cd633d7df">It's possible to adjust the background color of a slide by using the
|
||||
<li>It's possible to adjust the background color of a slide by using the
|
||||
<a
|
||||
href="#root/pOsGYCXsbNQG/tC7s2alapj8V/zEY4DaJG4YT5/_help_OFXdgB2nNk1F">predefined promoted attribute</a>for the color or manually setting <code>#slide:background</code> to
|
||||
href="#root/_help_OFXdgB2nNk1F">predefined promoted attribute</a>for the color or manually setting <code>#slide:background</code> to
|
||||
a hex color.</li>
|
||||
<li data-list-item-id="e70af66a7d3468b7fa86badb1e2c93cc9">More complex backgrounds can be achieved via gradients. There's no UI
|
||||
<li>More complex backgrounds can be achieved via gradients. There's no UI
|
||||
for it; it has to be set via <code>#slide:background</code> to a CSS gradient
|
||||
definition such as: <code>linear-gradient(to bottom, #283b95, #17b2c3)</code>.</li>
|
||||
</ul>
|
||||
<h2>Tips and tricks</h2>
|
||||
<ul>
|
||||
<li data-list-item-id="ec501025735d0063969f2a48eedb651dc">Text notes generally respect the formatting (bold, italic, foreground
|
||||
<li>Text notes generally respect the formatting (bold, italic, foreground
|
||||
and background colors) and font size. Code blocks and tables also work.</li>
|
||||
<li
|
||||
data-list-item-id="e8acd457a2660726905aee30a9325a620">Try using more than just text notes, the presentation uses the same mechanism
|
||||
as <a href="#root/pOsGYCXsbNQG/tC7s2alapj8V/_help_R9pX4DGra2Vt">shared notes</a> and
|
||||
<li>Try using more than just text notes, the presentation uses the same mechanism
|
||||
as <a href="#root/_help_R9pX4DGra2Vt">shared notes</a> and <a class="reference-link"
|
||||
href="#root/_help_0ESUbbAxVnoK">Note List</a> so it should be able
|
||||
to display <a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/_help_0ESUbbAxVnoK">Note List</a> so it should be able to display <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
<a
|
||||
class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a> and <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_gBbsAeiuUxI5">Mind Map</a> in
|
||||
class="reference-link" href="#root/_help_grjYqerjn243">Canvas</a> and <a class="reference-link" href="#root/_help_gBbsAeiuUxI5">Mind Map</a> in
|
||||
full-screen (without the interactivity).
|
||||
<ul>
|
||||
<li data-list-item-id="e91cdf4823552f771ed802de7fd6330e4">Consider using a transparent background for <a class="reference-link"
|
||||
href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_grjYqerjn243">Canvas</a>, if
|
||||
the slides have a custom background (go to the hamburger menu in the Canvas,
|
||||
press the button select a custom color and write <code>transparent</code>).</li>
|
||||
<li
|
||||
data-list-item-id="ebed408174c89a15dc9b0ee74d36e2e70">
|
||||
<p>For <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
<li>
|
||||
<p>Consider using a transparent background for <a class="reference-link"
|
||||
href="#root/_help_grjYqerjn243">Canvas</a>, if the slides have a custom
|
||||
background (go to the hamburger menu in the Canvas, press the button select
|
||||
a custom color and write <code>transparent</code>).</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>For <a class="reference-link" href="#root/_help_s1aBHPd79XYj">Mermaid Diagrams</a>,
|
||||
some of them have a predefined background which can be changed via the
|
||||
frontmatter. For example, for XY-charts:</p><pre><code class="language-text-x-trilium-auto">---
|
||||
config:
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
<p>It is possible to provide a CSS file to be used regardless of the theme
|
||||
set by the user.</p>
|
||||
<figure class="table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> </th>
|
||||
<th> </th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -32,7 +31,7 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</figure>
|
||||
|
||||
<h2>Seeing the changes</h2>
|
||||
<p>Adding a new <em>app CSS note</em> or modifying an existing one does not
|
||||
immediately apply changes. To see the changes, press Ctrl+Shift+R to refresh
|
||||
@@ -54,10 +53,9 @@
|
||||
workspaces.</p>
|
||||
<p>To do so:</p>
|
||||
<ol>
|
||||
<li data-list-item-id="eaca1b6777262e20c38dae5e2c2ef8496">In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
|
||||
<li>In the note with <code>#workspace</code>, add an inheritable attribute <code>#cssClass(inheritable)</code> with
|
||||
a value that uniquely identifies the workspace (say <code>my-workspace</code>).</li>
|
||||
<li
|
||||
data-list-item-id="e01663cf2128c10a0cd0cab1bb27fd44d">Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
|
||||
<li>Anywhere in the note structure, create a CSS note with <code>#appCss</code>.</li>
|
||||
</ol>
|
||||
<h4>Change the color of the icons in the <a class="reference-link" href="#root/_help_oPVyFC7WL2Lp">Note Tree</a></h4><pre><code class="language-text-x-trilium-auto">.fancytree-node.my-workspace.fancytree-custom-icon {
|
||||
color: #ff0000;
|
||||
@@ -73,8 +71,8 @@
|
||||
width="641" height="630">
|
||||
</figure>
|
||||
<ol>
|
||||
<li data-list-item-id="e6e7ec9751bdc6f7846d10bf42c42c9b1">Insert an image in any note and take the URL of the image.</li>
|
||||
<li data-list-item-id="edc7f77ed718593d91bda3b2983b81bed">Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
|
||||
<li>Insert an image in any note and take the URL of the image.</li>
|
||||
<li>Use the following CSS, adjusting the <code>background-image</code> and <code>width</code> and <code>height</code> to
|
||||
the desired values.</li>
|
||||
</ol><pre><code class="language-text-x-trilium-auto">.note-split.my-workspace .scrolling-container:after {
|
||||
position: fixed;
|
||||
@@ -94,5 +92,5 @@
|
||||
<p>Some parts of the application can't be styled directly via custom CSS
|
||||
because they are rendered in an isolated mode (shadow DOM), more specifically:</p>
|
||||
<ul>
|
||||
<li data-list-item-id="e3ce2c089fe536bc42856bb1b5edc8c8e">The slides in a <a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
|
||||
<li>The slides in a <a class="reference-link" href="#root/_help_zP3PMqaG71Ct">Presentation View</a>.</li>
|
||||
</ul>
|
||||
85
docs/User Guide/!!!meta.json
vendored
85
docs/User Guide/!!!meta.json
vendored
@@ -3472,7 +3472,7 @@
|
||||
"BFs8mudNFgCS",
|
||||
"NRnIZmSMc5sj"
|
||||
],
|
||||
"title": "Export as PDF",
|
||||
"title": "Printing & Exporting as PDF",
|
||||
"notePosition": 120,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
@@ -3503,13 +3503,62 @@
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bxs-file-pdf",
|
||||
"value": "bx bx-printer",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "CohkqWQC1iBv",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "0ESUbbAxVnoK",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "KSZ04uQ2D1St",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "6f9hih2hXXZk",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "AlhDUqhENtH7",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "GTwFsgaA0lCt",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "zP3PMqaG71Ct",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Export as PDF.md",
|
||||
"dataFileName": "Printing & Exporting as PDF.md",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "NfSjRsArIQHy",
|
||||
@@ -3517,7 +3566,7 @@
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Export as PDF_image.png"
|
||||
"dataFileName": "Printing & Exporting as PD.png"
|
||||
},
|
||||
{
|
||||
"attachmentId": "Om2EmdZr54vy",
|
||||
@@ -3525,7 +3574,7 @@
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "1_Export as PDF_image.png"
|
||||
"dataFileName": "1_Printing & Exporting as PD.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -8758,51 +8807,51 @@
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-slideshow",
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "BlN9DFI679QC",
|
||||
"isInheritable": false,
|
||||
"position": 10
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "BlN9DFI679QC",
|
||||
"value": "OFXdgB2nNk1F",
|
||||
"isInheritable": false,
|
||||
"position": 20
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OFXdgB2nNk1F",
|
||||
"value": "R9pX4DGra2Vt",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "R9pX4DGra2Vt",
|
||||
"value": "0ESUbbAxVnoK",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "0ESUbbAxVnoK",
|
||||
"value": "grjYqerjn243",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "s1aBHPd79XYj",
|
||||
"value": "AlhDUqhENtH7",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "grjYqerjn243",
|
||||
"value": "s1aBHPd79XYj",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
@@ -8814,11 +8863,11 @@
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "AlhDUqhENtH7",
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-slideshow",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
"position": 10
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
|
||||
|
Before Width: | Height: | Size: 150 B After Width: | Height: | Size: 150 B |
@@ -1,38 +0,0 @@
|
||||
# Export as PDF
|
||||
|
||||
|
||||
Screenshot of the note contextual menu indicating the “Export as PDF” option.
|
||||
|
||||
On the desktop application of Trilium it is possible to export a note as PDF. On the server or PWA (mobile), the option is not available due to technical constraints and it will be hidden.
|
||||
|
||||
To print a note, select the  button to the right of the note and select _Export as PDF_.
|
||||
|
||||
Afterwards you will be prompted to select where to save the PDF file.
|
||||
|
||||
## Automatic opening of the file
|
||||
|
||||
When the PDF is exported, it is automatically opened with the system default application for easy preview.
|
||||
|
||||
Note that if you are using Linux with the GNOME desktop environment, sometimes the default application might seem incorrect (such as opening in GIMP). This is because it uses Gnome's “Recommended applications” list.
|
||||
|
||||
To solve this, you can change the recommended application for PDFs via this command line. First, list the available applications via `gio mime application/pdf` and then set the desired one. For example to use GNOME's Evince:
|
||||
|
||||
```
|
||||
gio mime application/pdf
|
||||
```
|
||||
|
||||
## Reporting issues with the rendering
|
||||
|
||||
Should you encounter any visual issues in the resulting PDF file (e.g. a table does not fit properly, there is cut off text, etc.) feel free to [report the issue](../../Troubleshooting/Reporting%20issues.md). In this case, it's best to offer a sample note (click on the  button, select Export note → This note and all of its descendants → HTML in ZIP archive). Make sure not to accidentally leak any personal information.
|
||||
|
||||
## Landscape mode
|
||||
|
||||
When exporting to PDF, there are no customizable settings such as page orientation, size, etc. However, it is possible to specify a given note to be printed as a PDF in landscape mode by adding the `#printLandscape` attribute to it (see <a class="reference-link" href="../../Advanced%20Usage/Attributes.md">Attributes</a>).
|
||||
|
||||
## Page size
|
||||
|
||||
By default, the resulting PDF will be in Letter format. It is possible to adjust it to another page size via the `#printPageSize` attribute, with one of the following values: `A0`, `A1`, `A2`, `A3`, `A4`, `A5`, `A6`, `Legal`, `Letter`, `Tabloid`, `Ledger`.
|
||||
|
||||
## Keyboard shortcut
|
||||
|
||||
It's possible to trigger the export to PDF from the keyboard by going to _Keyboard shortcuts_ in <a class="reference-link" href="../UI%20Elements/Options.md">Options</a> and assigning a key combination for the `exportAsPdf` action.
|
||||
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
75
docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md
vendored
Normal file
75
docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md
vendored
Normal file
@@ -0,0 +1,75 @@
|
||||
# Printing & Exporting as PDF
|
||||
<figure class="image"><img style="aspect-ratio:951/432;" src="Printing & Exporting as PD.png" width="951" height="432"><figcaption>Screenshot of the note contextual menu indicating the “Export as PDF” option.</figcaption></figure>
|
||||
|
||||
## Printing
|
||||
|
||||
This feature allows printing of notes. It works on both the desktop client, but also on the web.
|
||||
|
||||
Note that not all note types are printable as of now. We do plan to increase the coverage of supported note types in the future.
|
||||
|
||||
To print a note, select the <img src="1_Printing & Exporting as PD.png" width="29" height="31"> button to the right of the note and select _Print note_. Depending on the size and type of the note, this can take up to a few seconds. Afterwards you will be redirected to the system/browser printing dialog.
|
||||
|
||||
> [!NOTE]
|
||||
> Printing and exporting as PDF are not perfect. Due to technical limitations, and sometimes even browser glitches the text might appear cut off in some circumstances.
|
||||
|
||||
## Reporting issues with the rendering
|
||||
|
||||
Should you encounter any visual issues in the resulting PDF file (e.g. a table does not fit properly, there is cut off text, etc.) feel free to [report the issue](../../Troubleshooting/Reporting%20issues.md). In this case, it's best to offer a sample note (click on the <img src="1_Printing & Exporting as PD.png" width="29" height="31"> button, select Export note → This note and all of its descendants → HTML in ZIP archive). Make sure not to accidentally leak any personal information.
|
||||
|
||||
Consider adjusting font sizes and using [page breaks](../../Note%20Types/Text/Insert%20buttons.md) to work around the layout.
|
||||
|
||||
## Exporting as PDF
|
||||
|
||||
On the desktop application of Trilium it is possible to export a note as PDF. On the server or PWA (mobile), the option is not available due to technical constraints and it will be hidden.
|
||||
|
||||
To print a note, select the  button to the right of the note and select _Export as PDF_. Afterwards you will be prompted to select where to save the PDF file.
|
||||
|
||||
### Automatic opening of the file
|
||||
|
||||
When the PDF is exported, it is automatically opened with the system default application for easy preview.
|
||||
|
||||
Note that if you are using Linux with the GNOME desktop environment, sometimes the default application might seem incorrect (such as opening in GIMP). This is because it uses Gnome's “Recommended applications” list.
|
||||
|
||||
To solve this, you can change the recommended application for PDFs via this command line. First, list the available applications via `gio mime application/pdf` and then set the desired one. For example to use GNOME's Evince:
|
||||
|
||||
```
|
||||
gio mime application/pdf
|
||||
```
|
||||
|
||||
### Customizing exporting as PDF
|
||||
|
||||
When exporting to PDF, there are no customizable settings such as page orientation, size. However, there are a few <a class="reference-link" href="../../Advanced%20Usage/Attributes.md">Attributes</a> to adjust some of the settings:
|
||||
|
||||
* To print in landscape mode instead of portrait (useful for big diagrams or slides), add `#printLandscape`.
|
||||
* By default, the resulting PDF will be in Letter format. It is possible to adjust it to another page size via the `#printPageSize` attribute, with one of the following values: `A0`, `A1`, `A2`, `A3`, `A4`, `A5`, `A6`, `Legal`, `Letter`, `Tabloid`, `Ledger`.
|
||||
|
||||
> [!NOTE]
|
||||
> These options have no effect when used with the printing feature, since the user-defined settings are used instead.
|
||||
|
||||
## Keyboard shortcut
|
||||
|
||||
It's possible to trigger both printing and export as PDF from the keyboard by going to _Keyboard shortcuts_ in <a class="reference-link" href="../UI%20Elements/Options.md">Options</a> and assigning a key combination for:
|
||||
|
||||
* _Print Active Note_
|
||||
* _Export Active Note as PDF_
|
||||
|
||||
## Constraints & limitations
|
||||
|
||||
Not all <a class="reference-link" href="../../Note%20Types.md">Note Types</a> are supported when printing, in which case the _Print_ and _Export as PDF_ options will be disabled.
|
||||
|
||||
* For <a class="reference-link" href="../../Note%20Types/Code.md">Code</a> notes:
|
||||
* Line numbers are not printed.
|
||||
* Syntax highlighting is enabled, however a default theme (Visual Studio) is enforced.
|
||||
* For <a class="reference-link" href="../../Note%20Types/Collections.md">Collections</a>:
|
||||
* Only <a class="reference-link" href="../../Note%20Types/Collections/Presentation%20View.md">Presentation View</a> is currently supported.
|
||||
* We plan to add support for all the collection types at some point.
|
||||
* Using <a class="reference-link" href="../../Theme%20development/Custom%20app-wide%20CSS.md">Custom app-wide CSS</a> for printing is not longer supported, due to a more stable but isolated mechanism.
|
||||
* We plan to introduce a new mechanism specifically for a print CSS.
|
||||
|
||||
## Under the hood
|
||||
|
||||
Both printing and exporting as PDF use the same mechanism: a note is rendered individually in a separate webpage that is then sent to the browser or the Electron application either for printing or exporting as PDF.
|
||||
|
||||
The webpage that renders a single note can actually be accessed in a web browser. For example `http://localhost:8080/#root/WWRGzqHUfRln/RRZsE9Al8AIZ?ntxId=0o4fzk` becomes `http://localhost:8080/?print#root/WWRGzqHUfRln/RRZsE9Al8AIZ`.
|
||||
|
||||
Accessing the print note in a web browser allows for easy debugging to understand why a particular note doesn't render well. The mechanism for rendering is similar to the one used in <a class="reference-link" href="Note%20List.md">Note List</a>.
|
||||
@@ -19,7 +19,7 @@ This section presents the most important changes by version. For a full set of c
|
||||
* v0.92.4:
|
||||
* macOS binaries are now signed.
|
||||
* <a class="reference-link" href="Note%20Types/Text.md">Text</a> notes can now have adjustable <a class="reference-link" href="Note%20Types/Text/Content%20language%20%26%20Right-to-le.md">Content language & Right-to-left support</a>.
|
||||
* <a class="reference-link" href="Basic%20Concepts%20and%20Features/Notes/Export%20as%20PDF.md">Export as PDF</a>
|
||||
* <a class="reference-link" href="Basic%20Concepts%20and%20Features/Notes/Printing%20%26%20Exporting%20as%20PDF.md">Export as PDF</a>
|
||||
* <a class="reference-link" href="Basic%20Concepts%20and%20Features/Zen%20mode.md">Zen mode</a>
|
||||
* <a class="reference-link" href="Note%20Types/Collections/Calendar%20View.md">Calendar View</a>, allowing notes to be displayed in a monthly grid based on start and end dates.
|
||||
* v0.91.5:
|
||||
|
||||
@@ -53,7 +53,7 @@ Alternatively, it's possible to insert a horizontal ruler by typing `---`.
|
||||
|
||||
<figure class="image image-style-align-right"><img style="aspect-ratio:371/79;" src="8_Insert buttons_image.png" width="371" height="79"></figure>
|
||||
|
||||
Page breaks provide a way to force the next paragraph or block (table, image, etc.) to be displayed onto the next page when printing (either to a real printer to [when exporting to PDF](../../Basic%20Concepts%20and%20Features/Notes/Export%20as%20PDF.md)).
|
||||
Page breaks provide a way to force the next paragraph or block (table, image, etc.) to be displayed onto the next page when printing (either to a real printer to [when exporting to PDF](../../Basic%20Concepts%20and%20Features/Notes/Printing%20%26%20Exporting%20as%20PDF.md)).
|
||||
|
||||
Page breaks are marked in the editor with the words _Page break_, but they will not actually be shown when printed.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user