feat(docs): prepare documentation for RTL text support

This commit is contained in:
Elian Doran 2025-03-05 21:27:53 +02:00
parent 9ced699751
commit e514396c42
No known key found for this signature in database
61 changed files with 371 additions and 603 deletions

View File

@ -1,6 +1,6 @@
{
"formatVersion": 2,
"appVersion": "0.92.0-beta",
"appVersion": "0.92.2-beta",
"files": [
{
"isClone": false,
@ -34,7 +34,7 @@
"OkOZllzB3fqN",
"yoAe4jV2yzbd"
],
"title": "Features",
"title": "New Features",
"notePosition": 40,
"prefix": null,
"isExpanded": false,
@ -47,53 +47,91 @@
"value": "bx bx-star",
"isInheritable": false,
"position": 10
},
{
"type": "label",
"name": "sorted",
"value": "dateCreated",
"isInheritable": false,
"position": 20
},
{
"type": "label",
"name": "sortDirection",
"value": "desc",
"isInheritable": false,
"position": 30
}
],
"format": "html",
"attachments": [],
"dirFileName": "Features",
"dirFileName": "New Features",
"children": [
{
"isClone": false,
"noteId": "13D1lOc9sqmZ",
"noteId": "3I277VKYxWDH",
"notePath": [
"OkOZllzB3fqN",
"yoAe4jV2yzbd",
"13D1lOc9sqmZ"
"3I277VKYxWDH"
],
"title": "Export as PDF",
"notePosition": 20,
"title": "Right-to-left text notes",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-align-right",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Export as PDF.html",
"dataFileName": "Right-to-left text notes.html",
"attachments": [
{
"attachmentId": "xsGM34t8ssKV",
"attachmentId": "PSBNAvDyj5Vy",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Export as PDF_image.png"
"dataFileName": "Right-to-left text notes_i.png"
},
{
"attachmentId": "cvyes4f1Vhmm",
"attachmentId": "YXYIJznak915",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Export as PDF_image.png"
"dataFileName": "1_Right-to-left text notes_i.png"
},
{
"attachmentId": "b3v1pLE6TF1Y",
"attachmentId": "Do0S17lDl7uu",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Export as PDF_image.png"
"dataFileName": "2_Right-to-left text notes_i.png"
},
{
"attachmentId": "D3lyhPvPvocb",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "3_Right-to-left text notes_i.png"
},
{
"attachmentId": "Tu7llk3GgRkA",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "4_Right-to-left text notes_i.png"
}
]
},
@ -106,12 +144,20 @@
"B3YLYM4erjnW"
],
"title": "Zen mode",
"notePosition": 30,
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-yin-yang",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Zen mode.html",
"attachments": [
@ -180,6 +226,50 @@
"dataFileName": "7_Zen mode_image.png"
}
]
},
{
"isClone": false,
"noteId": "13D1lOc9sqmZ",
"notePath": [
"OkOZllzB3fqN",
"yoAe4jV2yzbd",
"13D1lOc9sqmZ"
],
"title": "Export as PDF",
"notePosition": 30,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bxs-file-pdf",
"isInheritable": false,
"position": 30
}
],
"format": "html",
"dataFileName": "Export as PDF.html",
"attachments": [
{
"attachmentId": "xsGM34t8ssKV",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Export as PDF_image.png"
},
{
"attachmentId": "b3v1pLE6TF1Y",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Export as PDF_image.png"
}
]
}
]
},
@ -233,8 +323,47 @@
}
],
"format": "html",
"dataFileName": "Text.html",
"attachments": []
"attachments": [],
"dirFileName": "Text",
"children": [
{
"isClone": false,
"noteId": "B0lcI9xz1r8K",
"notePath": [
"OkOZllzB3fqN",
"wmegHv51MJMd",
"crJtzsol4olb",
"B0lcI9xz1r8K"
],
"title": "Content language",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "3I277VKYxWDH",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Content language.html",
"attachments": [
{
"attachmentId": "OpIv6CnYCLVa",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Content language_image.png"
}
]
}
]
},
{
"isClone": false,
@ -382,7 +511,7 @@
"title": "Book",
"notePosition": 70,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
@ -576,6 +705,14 @@
"mime": "image/png",
"position": 10,
"dataFileName": "18_Calendar View_image.png"
},
{
"attachmentId": "JM6AU8N4MIgB",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "19_Calendar View_image.png"
}
]
}
@ -697,7 +834,7 @@
"wmegHv51MJMd",
"foPEtsL51pD2"
],
"title": "Geo Map",
"title": "Geo map",
"notePosition": 120,
"prefix": null,
"isExpanded": false,
@ -713,23 +850,15 @@
}
],
"format": "html",
"dataFileName": "Geo Map.html",
"dataFileName": "Geo map.html",
"attachments": [
{
"attachmentId": "J0baLTpafs7C",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Geo Map_image.png"
},
{
"attachmentId": "kcYjOvJDFkbS",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Geo Map_image.png"
"dataFileName": "Geo map_image.png"
},
{
"attachmentId": "FDP3JzIVSnuJ",
@ -737,7 +866,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Geo Map_image.png"
"dataFileName": "1_Geo map_image.png"
},
{
"attachmentId": "eUrcqc8RRuZG",
@ -745,7 +874,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "3_Geo Map_image.png"
"dataFileName": "2_Geo map_image.png"
},
{
"attachmentId": "1quk4yxJpeHZ",
@ -753,7 +882,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "4_Geo Map_image.png"
"dataFileName": "3_Geo map_image.png"
},
{
"attachmentId": "iSpyhQ5Ya6Nk",
@ -761,7 +890,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "5_Geo Map_image.png"
"dataFileName": "4_Geo map_image.png"
},
{
"attachmentId": "ut6vm2aXVfXI",
@ -769,7 +898,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "6_Geo Map_image.png"
"dataFileName": "5_Geo map_image.png"
},
{
"attachmentId": "uYdb9wWf5Nuv",
@ -777,15 +906,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "7_Geo Map_image.png"
},
{
"attachmentId": "GhHYO2LteDmZ",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "8_Geo Map_image.png"
"dataFileName": "6_Geo map_image.png"
},
{
"attachmentId": "viN50n5G4kB0",
@ -793,7 +914,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "9_Geo Map_image.png"
"dataFileName": "7_Geo map_image.png"
},
{
"attachmentId": "mgwGrtQZjxxb",
@ -801,7 +922,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "10_Geo Map_image.png"
"dataFileName": "8_Geo map_image.png"
},
{
"attachmentId": "PMqmCbNLlZOG",
@ -809,7 +930,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "11_Geo Map_image.png"
"dataFileName": "9_Geo map_image.png"
},
{
"attachmentId": "0AwaQMqt3FVA",
@ -817,7 +938,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "12_Geo Map_image.png"
"dataFileName": "10_Geo map_image.png"
},
{
"attachmentId": "gR2c2Thmfy3I",
@ -825,7 +946,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "13_Geo Map_image.png"
"dataFileName": "11_Geo map_image.png"
},
{
"attachmentId": "JULizn130rVI",
@ -833,7 +954,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "14_Geo Map_image.png"
"dataFileName": "12_Geo map_image.png"
},
{
"attachmentId": "MdC0DpifJwu4",
@ -841,7 +962,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "15_Geo Map_image.png"
"dataFileName": "13_Geo map_image.png"
},
{
"attachmentId": "gFR2Izzp18LQ",
@ -849,7 +970,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "16_Geo Map_image.png"
"dataFileName": "14_Geo map_image.png"
},
{
"attachmentId": "42AncDs7SSAf",
@ -857,15 +978,7 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "17_Geo Map_image.png"
},
{
"attachmentId": "pKdtiq4r0eFY",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "18_Geo Map_image.png"
"dataFileName": "15_Geo map_image.png"
},
{
"attachmentId": "FXRVvYpOxWyR",
@ -873,7 +986,23 @@
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "19_Geo Map_image.png"
"dataFileName": "16_Geo map_image.png"
},
{
"attachmentId": "qudP7UCtwIq3",
"title": "image.png",
"role": "image",
"mime": "image/jpg",
"position": 10,
"dataFileName": "17_Geo map_image.png"
},
{
"attachmentId": "utecGxWk08QY",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "18_Geo map_image.png"
}
]
}
@ -943,173 +1072,6 @@
}
]
},
{
"isClone": false,
"noteId": "DtJJ20yEozPA",
"notePath": [
"OkOZllzB3fqN",
"DtJJ20yEozPA"
],
"title": "Theme development",
"notePosition": 130,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "label",
"name": "iconClass",
"value": "bx bx-palette",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"attachments": [],
"dirFileName": "Theme development",
"children": [
{
"isClone": false,
"noteId": "5HH79ztN0fZA",
"notePath": [
"OkOZllzB3fqN",
"DtJJ20yEozPA",
"5HH79ztN0fZA"
],
"title": "Creating a custom theme",
"notePosition": 10,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "aH8Dk5aMiq7R",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Creating a custom theme.html",
"attachments": [
{
"attachmentId": "AJHVfQtIQgJ7",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Creating a custom theme_im.png"
},
{
"attachmentId": "gXLyv5KXjfxg",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Creating a custom theme_im.png"
},
{
"attachmentId": "on1gD7BzCWdN",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "2_Creating a custom theme_im.png"
},
{
"attachmentId": "17p6z24yW5eP",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "3_Creating a custom theme_im.png"
},
{
"attachmentId": "K3cdwj8f90m0",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "4_Creating a custom theme_im.png"
},
{
"attachmentId": "bn93hwF7C8sR",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "5_Creating a custom theme_im.png"
}
]
},
{
"isClone": false,
"noteId": "aH8Dk5aMiq7R",
"notePath": [
"OkOZllzB3fqN",
"DtJJ20yEozPA",
"aH8Dk5aMiq7R"
],
"title": "Customize the Next theme",
"notePosition": 20,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
"format": "html",
"dataFileName": "Customize the Next theme.html",
"attachments": [
{
"attachmentId": "5z4bC0x0eH0P",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "Customize the Next theme_i.png"
},
{
"attachmentId": "u0zkXkD7rGXA",
"title": "image.png",
"role": "image",
"mime": "image/png",
"position": 10,
"dataFileName": "1_Customize the Next theme_i.png"
}
]
},
{
"isClone": false,
"noteId": "pMq6N1oBV9oo",
"notePath": [
"OkOZllzB3fqN",
"DtJJ20yEozPA",
"pMq6N1oBV9oo"
],
"title": "Reference",
"notePosition": 30,
"prefix": null,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [
{
"type": "relation",
"name": "internalLink",
"value": "po38jIc0LD2H",
"isInheritable": false,
"position": 10
}
],
"format": "html",
"dataFileName": "Reference.html",
"attachments": []
}
]
},
{
"isClone": false,
"noteId": "LTnkDnYmmZ7s",
@ -1283,7 +1245,7 @@
"title": "ETAPI",
"notePosition": 10,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],
@ -1333,7 +1295,7 @@
"title": "Internal API",
"notePosition": 20,
"prefix": null,
"isExpanded": true,
"isExpanded": false,
"type": "text",
"mime": "text/html",
"attributes": [],

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@ -23,7 +23,7 @@
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="2_Export as PDF_image.png" width="29"
<img src="1_Export as PDF_image.png" width="29"
height="31">button to the right of the note and select <i>Export as PDF</i>.</p>
<p>Afterwards you will be prompted to select where to save the PDF file.
Upon confirmation, the resulting PDF will be opened automatically using
@ -33,7 +33,7 @@
<a
href="#root/OeKBfN6JbMIq/jRV1MPt4mNSP/hrC6xn7hnDq5">report the issue</a>. In this case, it's best to offer a sample note (click
on the
<img src="2_Export as PDF_image.png" width="29" height="31">button, select Export note → This note and all of its descendants → HTML
<img src="1_Export as PDF_image.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>
<h2>Landscape mode</h2>
<p>When exporting to PDF, there are no customizable settings such as page

View File

@ -0,0 +1,56 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Right-to-left text notes</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Right-to-left text notes</h1>
<div class="ck-content">
<p>Trilium now has basic support for right-to-left text, at note level.</p>
<figure
class="table">
<table>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:906/557;" src="3_Right-to-left text notes_i.png"
width="906" height="557">
</figure>
</td>
<td>
<figure class="image">
<img style="aspect-ratio:906/557;" src="2_Right-to-left text notes_i.png"
width="906" height="557">
</figure>
</td>
</tr>
</tbody>
</table>
</figure>
<p>Note that only the Text note type supports this.</p>
<p>The list of languages is configurable via the a new dedicated settings
page:</p>
<figure class="image">
<img style="aspect-ratio:1248/635;" src="4_Right-to-left text notes_i.png"
width="1248" height="635">
</figure>
<p>To select the corresponding language of the text, go to “Basic Properties”
and select your desired language.</p>
<p>
<img src="1_Right-to-left text notes_i.png" width="635" height="492">
</p>
<p>Feel free to report any issues regarding right to left support.</p>
<p>&nbsp;</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

@ -118,6 +118,12 @@
<td>When present (regardless of value), it will show the number of the week
on the calendar.</td>
</tr>
<tr>
<td><code>~child:template</code>
</td>
<td>Defines the template for newly created notes in the calendar (via dragging
or clicking).</td>
</tr>
</tbody>
</table>
</figure>
@ -175,6 +181,36 @@
than the title, either a label (e.g. <code>#assignee</code>) or a relation
(e.g. <code>~for</code>). See <i>Advanced use-cases</i> for more information.</td>
</tr>
<tr>
<td><code>#calendar:promotedAttributes</code>
</td>
<td>
<p>Allows displaying the value of one or more promoted attributes in the
calendar like this:
<img src="19_Calendar View_image.png" width="131" height="113">
</p><pre><code class="language-text-x-trilium-auto">#label:weight="promoted,number,single,precision=1"
#label:mood="promoted,alias=Mood,single,text"
#calendar:promotedAttributes="label:weight,label:mood" </code></pre>
<p>It can also be used with relations, case in which it will display the
title of the target note:</p><pre><code class="language-text-x-trilium-auto">#relation:assignee="promoted,alias=Assignee,single,text"
#calendar:promotedAttributes="relation:assignee"
~assignee=@My assignee</code></pre>
</td>
</tr>
<tr>
<td><code>#calendar:startDate</code>
</td>
<td>Allows using a different label to represent the start date, other than <code>#startDate</code> (e.g. <code>#expiryDate</code>).
The label name must be prefixed with <code>#</code>. If the label is not
defined for a note, the default will be used instead.</td>
</tr>
<tr>
<td><code>#calendar:endDate</code>
</td>
<td>Allows using a different label to represent the start date, other than <code>#endDate</code>.
The label name must be prefixed with <code>#</code>. If the label is not
defined for a note, the default will be used instead.</td>
</tr>
</tbody>
</table>
</figure>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.5 KiB

View File

@ -5,12 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Geo Map</title>
<title data-trilium-title>Geo map</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Geo Map</h1>
<h1 data-trilium-h1>Geo map</h1>
<div class="ck-content">
<h2>Creating a new geo map</h2>
@ -26,7 +26,7 @@
<th>1</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:1256/1044;" src="9_Geo Map_image.png" width="1256"
<img style="aspect-ratio:1256/1044;" src="7_Geo map_image.png" width="1256"
height="1044">
</figure>
</td>
@ -36,7 +36,7 @@
<th>2</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:1720/1396;" src="3_Geo Map_image.png" width="1720"
<img style="aspect-ratio:1720/1396;" src="2_Geo map_image.png" width="1720"
height="1396">
</figure>
</td>
@ -69,18 +69,18 @@
<p>To create a marker, first navigate to the desired point on the map. Then
press the
<img class="image_resized" style="aspect-ratio:72/66;width:7.37%;"
src="4_Geo Map_image.png" width="72" height="66">button on the top-right of the map.</p>
src="3_Geo map_image.png" width="72" height="66">button on the top-right of the map.</p>
<p>If the button is not visible, make sure the button section is visible
by pressing the chevron button (
<img class="image_resized" style="aspect-ratio:72/66;width:7.51%;"
src="10_Geo Map_image.png" width="72" height="66">) in the top-right of the map.</p>
src="8_Geo map_image.png" width="72" height="66">) in the top-right of the map.</p>
</td>
</tr>
<tr>
<th>2</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:1730/416;" src="14_Geo Map_image.png" width="1730"
<img style="aspect-ratio:1730/416;" src="12_Geo map_image.png" width="1730"
height="416">
</figure>
<p>&nbsp;</p>
@ -96,7 +96,7 @@
<th>3</th>
<td>
<figure class="image">
<img style="aspect-ratio:1586/404;" src="1_Geo Map_image.png" width="1586"
<img style="aspect-ratio:1586/404;" src="Geo map_image.png" width="1586"
height="404">
</figure>
<p>&nbsp;</p>
@ -107,7 +107,7 @@
<th>4</th>
<td>
<figure class="image">
<img style="aspect-ratio:1696/608;" src="6_Geo Map_image.png" width="1696"
<img style="aspect-ratio:1696/608;" src="5_Geo map_image.png" width="1696"
height="608">
</figure>
<p>&nbsp;</p>
@ -122,7 +122,7 @@
<p>The location of a marker is stored in the <code>#geolocation</code> attribute
of the child notes:</p>
<figure class="image">
<img style="aspect-ratio:1288/278;" src="12_Geo Map_image.png" width="1288"
<img style="aspect-ratio:1288/278;" src="10_Geo map_image.png" width="1288"
height="278">
</figure>
<p>This value can be added manually if needed. The value of the attribute
@ -155,6 +155,13 @@
</ul>
</li>
</ul>
<h2>Icon and color of the markers</h2>
<p>
<img src="18_Geo map_image.png" alt="image" width="523" height="295">
</p>
<p>The markers will have the same icon as the note.</p>
<p>It's possible to add a custom color to a marker by assigning them a <code>#color</code> attribute
such as <code>#color=green</code>.</p>
<h2>Adding the coordinates manually</h2>
<p>In a nutshell, create a child note and set the <code>#geolocation</code> attribute
to the coordinates.</p>
@ -168,7 +175,7 @@
<th>1</th>
<td>
<figure class="image image-style-align-center image_resized" style="width:100%;">
<img style="aspect-ratio:732/918;" src="16_Geo Map_image.png" width="732"
<img style="aspect-ratio:732/918;" src="14_Geo map_image.png" width="732"
height="918">
</figure>
</td>
@ -185,7 +192,7 @@
<th>2</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:518/84;" src="19_Geo Map_image.png" width="518"
<img style="aspect-ratio:518/84;" src="16_Geo map_image.png" width="518"
height="84">
</figure>
</td>
@ -199,7 +206,7 @@
<th>3</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:1074/276;" src="11_Geo Map_image.png" width="1074"
<img style="aspect-ratio:1074/276;" src="9_Geo map_image.png" width="1074"
height="276">
</figure>
</td>
@ -225,7 +232,7 @@
<th>1</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:562/454;" src="17_Geo Map_image.png" width="562"
<img style="aspect-ratio:562/454;" src="15_Geo map_image.png" width="562"
height="454">
</figure>
</td>
@ -236,7 +243,7 @@
<th>2</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:696/480;" src="13_Geo Map_image.png" width="696"
<img style="aspect-ratio:696/480;" src="11_Geo map_image.png" width="696"
height="480">
</figure>
</td>
@ -250,7 +257,7 @@
<th>3</th>
<td>
<figure class="image">
<img style="aspect-ratio:640/276;" src="2_Geo Map_image.png" width="640"
<img style="aspect-ratio:640/276;" src="1_Geo map_image.png" width="640"
height="276">
</figure>
</td>
@ -275,7 +282,7 @@
<th>1</th>
<td>
<figure class="image">
<img style="aspect-ratio:226/74;" src="7_Geo Map_image.png" width="226"
<img style="aspect-ratio:226/74;" src="6_Geo map_image.png" width="226"
height="74">
</figure>
</td>
@ -286,7 +293,7 @@
<th>2</th>
<td>
<figure class="image">
<img style="aspect-ratio:322/222;" src="5_Geo Map_image.png" width="322"
<img style="aspect-ratio:322/222;" src="4_Geo map_image.png" width="322"
height="222">
</figure>
</td>
@ -297,7 +304,7 @@
<th>3</th>
<td>
<figure class="image image_resized" style="width:100%;">
<img style="aspect-ratio:620/530;" src="15_Geo Map_image.png" width="620"
<img style="aspect-ratio:620/530;" src="13_Geo map_image.png" width="620"
height="530">
</figure>
</td>
@ -310,9 +317,16 @@
</tbody>
</table>
</figure>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>Troubleshooting</h2>
<h3>Grid-like artifacts on the map</h3>
<p>
<img class="image_resized" style="aspect-ratio:678/499;width:58%;" src="17_Geo map_image.png"
width="678" height="499">
</p>
<p>This occurs if the application is not at 100% zoom which causes the pixels
of the map to not render correctly due to fractional scaling. The only
possible solution i to set the UI zoom at 100% (default keyboard shortcut
is Ctrl+0).</p>
<p>&nbsp;</p>
</div>
</div>

View File

@ -1,19 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Text</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Text</h1>
<div class="ck-content"></div>
</div>
</body>
</html>

View File

@ -0,0 +1,34 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../../style.css">
<base target="_parent">
<title data-trilium-title>Content language</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Content language</h1>
<div class="ck-content">
<p>A language hint can be provided for text notes. This option informs the
browser or the desktop application about the language the note is written
in (for example this might help with spellchecking), and it also determines
whether the text is displayed from right-to-left for languages such as
Arabic, Hebrew, etc.</p>
<p>For more information about right-to-left support, see&nbsp;<a class="reference-link"
href="../../New%20Features/Right-to-left%20text%20notes.html">Right-to-left text notes</a>.</p>
<p>To set the language of the content, go to “Basic Properties” and look
for the “Language” field. By default there will be no content languages
set, they can be configured by going to settings or by selecting the “Configure
languages” item in the list.</p>
<p>
<img src="Content language_image.png" width="635" height="492">
</p>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 89 KiB

View File

@ -1,94 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Creating a custom theme</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Creating a custom theme</h1>
<div class="ck-content">
<h2>Step 1. Find a place to place the themes</h2>
<p>Organization is an important aspect of managing a knowledge base. When
developing a new theme or importing an existing one it's a good idea to
keep them into one place.</p>
<p>As such, the first step is to create a new note to gather all the themes.</p>
<p>
<img src="5_Creating a custom theme_im.png" width="181" height="84">
</p>
<h2>Step 2. Create the theme</h2>
<figure class="table" style="width:100%;">
<table class="ck-table-resized">
<colgroup>
<col style="width:32.47%;">
<col style="width:67.53%;">
</colgroup>
<tbody>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:651/220;" src="3_Creating a custom theme_im.png"
width="651" height="220">
</figure>
</td>
<td style="vertical-align:top;">Themes are code notes with a special attribute. Start by creating a new
code note.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:302/349;" src="1_Creating a custom theme_im.png"
width="302" height="349">
</figure>
</td>
<td style="vertical-align:top;">Then change the note type to a CSS code.</td>
</tr>
<tr>
<td>
<figure class="image">
<img style="aspect-ratio:316/133;" src="Creating a custom theme_im.png"
width="316" height="133">
</figure>
</td>
<td style="vertical-align:top;">In the <i>Owned Attributes</i> section define the <code>#appTheme</code> attribute
to point to any desired name. This is the name that will show up in the
appearance section in settings.</td>
</tr>
</tbody>
</table>
</figure>
<h2>Step 3. Define the theme's CSS</h2>
<p>As a very simple example we will change the background color of the launcher
pane to a shade of blue.</p>
<p>To alter the different variables of the theme:</p><pre><code class="language-text-css">:root {
--launcher-pane-background-color: #0d6efd;
}</code></pre>
<h2>Step 4. Activating the theme</h2>
<p>Refresh the application (Ctrl+Shift+R is a good way to do so) and go to
settings. You should see the newly created theme:</p>
<p>
<img src="2_Creating a custom theme_im.png" width="631" height="481">
</p>
<p>Afterwards the application will refresh itself with the new theme:</p>
<p>
<img src="4_Creating a custom theme_im.png" width="653" height="554">
</p>
<p>Do note that the theme will be based off of the legacy theme. To override
that and base the theme on the new TriliumNext theme, see:&nbsp;<a class="reference-link"
href="Customize%20the%20Next%20theme.html">Theme base (legacy vs. next)</a>
</p>
<h2>Step 5. Making changes</h2>
<p>Simply go back to the note and change according to needs. To apply the
changes to the current window, press Ctrl+Shift+R to refresh.</p>
<p>It's a good idea to keep two windows, one for editing and the other one
for previewing the changes.</p>
</div>
</div>
</body>
</html>

View File

@ -1,36 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Customize the Next theme</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Customize the Next theme</h1>
<div class="ck-content">
<p>By default, any custom theme will be based on the legacy light theme.
To use the TriliumNext theme instead, add the <code>#appThemeBase=next</code> attribute
onto the existing theme. The <code>appTheme</code> attribute must also be
present.</p>
<p>
<img src="Customize the Next theme_i.png" width="424" height="140">
</p>
<p>When <code>appThemeBase</code> is set to <code>next</code> it will use the
“TriliumNext (auto)” theme. Any other value is ignored and will use the
legacy white theme instead.</p>
<h2>Overrides</h2>
<p>Do note that the TriliumNext theme has a few more overrides than the legacy
theme, so you might need to suffix <code>!important</code> if the style changes
are not applied.</p><pre><code class="language-text-css">:root {
--launcher-pane-background-color: #0d6efd !important;
}</code></pre>
</div>
</div>
</body>
</html>

View File

@ -1,180 +0,0 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../style.css">
<base target="_parent">
<title data-trilium-title>Reference</title>
</head>
<body>
<div class="content">
<h1 data-trilium-h1>Reference</h1>
<div class="ck-content">
<h2>Detecting mobile vs. desktop</h2>
<p>The mobile layout is different than the one on the desktop. Use <code>body.mobile</code> and <code>body.desktop</code> to
differentiate between them.</p><pre><code class="language-text-css">body.mobile #root-widget {
/* Do something on mobile */
}
body.desktop #root-widget {
/* Do something on desktop */
}</code></pre>
<p>Do note that there is also a “tablet mode” in the mobile layout. For that
particular case media queries are required:</p><pre><code class="language-text-css">@media (max-width: 991px) {
#launcher-pane {
/* Do something on mobile layout */
}
}
@media (min-width: 992px) {
#launcher-pane {
/* Do something on mobile tablet + desktop layout */
}
}</code></pre>
<h2>Detecting horizontal vs. vertical layout</h2>
<p>The user can select between vertical layout (the classical one, where
the launcher bar is on the left) and a horizontal layout (where the launcher
bar is on the top and tabs are full-width).</p>
<p>Different styles can be applied by using classes at <code>body</code> level:</p><pre><code class="language-text-x-trilium-auto">body.layout-vertical #left-pane {
/* Do something */
}
body.layout-horizontal #center-pane {
/* Do something else */
}</code></pre>
<p>The two different layouts use different containers (but they are present
in the DOM regardless of the user's choice), for example <code>#horizontal-main-container</code> and <code>#vertical-main-container</code> can
be used to customize the background of the content section.</p>
<h2>Detecting platform (Windows, macOS) or Electron</h2>
<p>It is possible to add particular styles that only apply to a given platform
by using the classes in <code>body</code>:</p>
<figure class="table">
<table>
<thead>
<tr>
<th>Windows</th>
<th>macOS</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre><code class="language-text-x-trilium-auto">body.platform-win32 {
background: red;
}</code></pre>
</td>
<td><pre><code class="language-text-x-trilium-auto">body.platform-darwin {
background: red;
}</code></pre>
</td>
</tr>
</tbody>
</table>
</figure>
<p>It is also possible to only apply a style if running under Electron (desktop
application):</p><pre><code class="language-text-x-trilium-auto">body.electron {
background: blue;
}</code></pre>
<h3>Native title bar</h3>
<p>It's possible to detect if the user has selected the native title bar
or the custom title bar by querying against <code>body</code>:</p><pre><code class="language-text-x-trilium-auto">body.electron.native-titlebar {
/* Do something */
}
body.electron:not(.native-titlebar) {
/* Do something else */
}</code></pre>
<h3>Native window buttons</h3>
<p>When running under Electron with native title bar off, a feature was introduced
to use the platform-specific window buttons such as the semaphore on macOS.</p>
<p>See <a href="https://github.com/TriliumNext/Notes/pull/702">Native title bar buttons by eliandoran · Pull Request #702 · TriliumNext/Notes</a> for
the original implementation of this feature, including screenshots.</p>
<h4>On Windows</h4>
<p>The colors of the native window button area can be adjusted using a RGB
hex color:</p><pre><code class="language-text-x-trilium-auto">body {
--native-titlebar-foreground: #ffffff;
--native-titlebar-background: #ff0000;
}</code></pre>
<p>It is also possible to use transparency at the cost of reduced hover colors
using a RGBA hex color:</p><pre><code class="language-text-x-trilium-auto">body {
--native-titlebar-background: #ff0000aa;
}</code></pre>
<p>Note that the value is read when the window is initialized and then it
is refreshed only when the user changes their light/dark mode preference.</p>
<h4>On macOS</h4>
<p>On macOS the semaphore window buttons are enabled by default when the
native title bar is disabled. The offset of the buttons can be adjusted
using:</p><pre><code class="language-text-css">body {
--native-titlebar-darwin-x-offset: 12;
--native-titlebar-darwin-y-offset: 14 !important;
}</code></pre>
<h3>Background/transparency effects on Windows (Mica)</h3>
<p>Windows 11 offers a special background/transparency effect called Mica,
which can be enabled by themes by setting the <code>--background-material</code> variable
at <code>body</code> level:</p><pre><code class="language-text-css">body.electron.platform-win32 {
--background-material: tabbed;
}</code></pre>
<p>The value can be either <code>tabbed</code> (especially useful for the horizontal
layout) or <code>mica</code> (ideal for the vertical layout).</p>
<p>Do note that the Mica effect is applied at <code>body</code> level and the
theme needs to make the entire hierarchy (semi-)transparent in order for
it to be visible. Use the TrilumNext theme as an inspiration.</p>
<h2>Note icons, tab workspace accent color</h2>
<p>Theme capabilities are small adjustments done through CSS variables that
can affect the layout or the visual aspect of the application.</p>
<p>In the tab bar, to display the icons of notes instead of the icon of the
workspace:</p><pre><code class="language-text-css">:root {
--tab-note-icons: true;
}</code></pre>
<p>When a workspace is hoisted for a given tab, it is possible to get the
background color of that workspace, for example to apply a small strip
on the tab instead of the whole background color:</p><pre><code class="language-text-css">.note-tab .note-tab-wrapper {
--tab-background-color: initial !important;
}
.note-tab .note-tab-wrapper::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background-color: var(--workspace-tab-background-color);
}</code></pre>
<h2>Custom fonts</h2>
<p>Currently the only way to include a custom font is to use&nbsp;<a class="reference-link"
href="../Advanced%20topics/Custom%20resource%20providers.html">Custom resource providers</a>.
Basically import a font into Trilium and assign it <code>#customResourceProvider=fonts/myfont.ttf</code> and
then import the font in CSS via <code>/custom/fonts/myfont.ttf</code>.</p>
<h2>Dark and light themes</h2>
<p>A light theme needs to have the following CSS:</p><pre><code class="language-text-css">:root {
--theme-style: light;
}</code></pre>
<p>if the theme is dark, then <code>--theme-style</code> needs to be <code>dark</code>.</p>
<p>If the theme is auto (e.g. supports both light or dark based on <code>prefers-color-scheme</code>)
it must also declare (in addition to setting <code>--theme-style</code> to
either <code>light</code> or <code>dark</code>):</p><pre><code class="language-text-css">:root {
--theme-style-auto: true;
}</code></pre>
<p>This will affect the behavior of the Electron application by informing
the operating system of the color preference (e.g. background effects will
appear correct on Windows).</p>
</div>
</div>
</body>
</html>

View File

@ -6,6 +6,6 @@
</head>
<frameset cols="25%,75%">
<frame name="navigation" src="navigation.html">
<frame name="detail" src="User%20Guide/Features/Export%20as%20PDF.html">
<frame name="detail" src="User%20Guide/New%20Features/Right-to-left%20text%20notes.html">
</frameset>
</html>

View File

@ -9,17 +9,24 @@
<ul>
<li>User Guide
<ul>
<li>Features
<li>New Features
<ul>
<li><a href="User%20Guide/Features/Export%20as%20PDF.html" target="detail">Export as PDF</a>
<li><a href="User%20Guide/New%20Features/Right-to-left%20text%20notes.html"
target="detail">Right-to-left text notes</a>
</li>
<li><a href="User%20Guide/Features/Zen%20mode.html" target="detail">Zen mode</a>
<li><a href="User%20Guide/New%20Features/Zen%20mode.html" target="detail">Zen mode</a>
</li>
<li><a href="User%20Guide/New%20Features/Export%20as%20PDF.html" target="detail">Export as PDF</a>
</li>
</ul>
</li>
<li>Note Types
<ul>
<li><a href="User%20Guide/Note%20Types/Text.html" target="detail">Text</a>
<li>Text
<ul>
<li><a href="User%20Guide/Note%20Types/Text/Content%20language.html" target="detail">Content language</a>
</li>
</ul>
</li>
<li><a href="User%20Guide/Note%20Types/Code.html" target="detail">Code</a>
</li>
@ -45,7 +52,7 @@
</li>
<li><a href="User%20Guide/Note%20Types/Mind%20Map.html" target="detail">Mind Map</a>
</li>
<li><a href="User%20Guide/Note%20Types/Geo%20Map.html" target="detail">Geo Map</a>
<li><a href="User%20Guide/Note%20Types/Geo%20map.html" target="detail">Geo map</a>
</li>
</ul>
</li>
@ -56,18 +63,6 @@
</li>
</ul>
</li>
<li>Theme development
<ul>
<li><a href="User%20Guide/Theme%20development/Creating%20a%20custom%20theme.html"
target="detail">Creating a custom theme</a>
</li>
<li><a href="User%20Guide/Theme%20development/Customize%20the%20Next%20theme.html"
target="detail">Customize the Next theme</a>
</li>
<li><a href="User%20Guide/Theme%20development/Reference.html" target="detail">Reference</a>
</li>
</ul>
</li>
<li>Scripting
<ul>
<li>Examples