From 08b4c14062f3f63cf59546022ab001011e388c36 Mon Sep 17 00:00:00 2001
From: Horus68 <horus68@users.noreply.hosted.weblate.org>
Date: Thu, 2 Jan 2025 13:28:12 +0000
Subject: [PATCH] Translated using Weblate (Portuguese (Portugal))

Currently translated at 0.3% (5 of 1294 strings)

Translation: KOReader/User Guide
Translate-URL: https://hosted.weblate.org/projects/koreader/user-guide/pt_PT/
---
 user_guide/pt_PT.html | 755 ++++++++++++++++++++----------------------
 1 file changed, 365 insertions(+), 390 deletions(-)
diff --git a/user_guide/pt_PT.html b/user_guide/pt_PT.html
index 0bff0c0..0713bad 100644
--- a/user_guide/pt_PT.html
+++ b/user_guide/pt_PT.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="pt-pt" dir="ltr">
 <head>
-<title>KOReader User Guide</title>
+<title>Guia do utilizador KOReader</title>
 
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 
@@ -415,7 +415,7 @@
 
 <body>
 
-    <button onclick="topFunction()" id="myBtn" title="Back to Table of Contents" style="background-color: var(--red-color);"><span class="label_red">⟸ Table of Contents</span></button>
+    <button onclick="topFunction()" id="myBtn" title="Voltar ao índice" style="background-color: var(--red-color);"><span class="label_red">⟸ Table of Contents</span></button>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -479,7 +479,7 @@
     <div class="standard-text"><img class="img" src="pictures/guide_main_logo_cut.webp" style="width:312px; box-shadow: none;">
     </div>
 
-    <div class="L1-Chapter-heading" style="margin-top: 0rem;">KOREADER USER GUIDE</div>
+    <div class="L1-Chapter-heading" style="margin-top: 0rem;">GUIA DO UTILIZADOR KOREADER</div>
 
     <div class="standard-text">
     This guide is designed for larger screens with color and contains links to relevant websites so we highly recommend reading this on a computer or a tablet (instead of your e-ink device). You can use the search function of your browser to find a specific topic. If you have a suggestion or question related to this user guide, you can write to this discussion thread: <a href="https://github.com/koreader/koreader/issues/11147">https://github.com/koreader/koreader/issues/11147</a>
@@ -487,18 +487,15 @@
     </div>
 
     <div class="standard-text" style="text-indent: 0em;margin-left: 25%;line-height: 260%;">
-    <span style="color: var(--blue-color); font-weight: bold;font-size: 1.2rem;text-shadow: 0px 0px 1px var(--blue-color);">BLUE	    ⇒	USER INTERFACE ELEMENTS OF KOREADER</span><br>
-    <span style="color:var(--green-color); font-weight: bold;font-size: 1.2rem; text-shadow: 0px 0px 1px var(--green-color);">GREEN 	⇒ 	MENU PATHS</span><br>
-    <span style="color: var(--external-color); font-weight: bold;font-size: 1.2rem; text-shadow: 0px 0px 1px var(--external-color);">PURPLE	⇒ 	EXTERNAL APPS AND SERVICES</span><br>
-    <span style="color: var(--link-color); font-weight: bold;font-size: 1.2rem; text-shadow: 0px 0px 1px var(--link-color);">TEAL	⇒ 	LINKS</span>
+    <span style="color: var(--blue-color); font-weight: bold;font-size: 1.2rem;text-shadow: 0px 0px 1px var(--blue-color);">BLUE ⇒ USER INTERFACE ELEMENTS OF KOREADER</span><br> <span style="color:var(--green-color); font-weight: bold;font-size: 1.2rem; text-shadow: 0px 0px 1px var(--green-color);">GREEN ⇒ MENU PATHS</span><br> <span style="color: var(--external-color); font-weight: bold;font-size: 1.2rem; text-shadow: 0px 0px 1px var(--external-color);">PURPLE ⇒ EXTERNAL APPS AND SERVICES</span><br> <span style="color: var(--link-color); font-weight: bold;font-size: 1.2rem; text-shadow: 0px 0px 1px var(--link-color);">TEAL ⇒ LINKS</span>
     </div>
     
     <div class="standard-text">
     <p>We also have different boxes throughout the guide to inform or warn you:</p>
-    <div class=warning><span class="label_red">WARNING</span> I am a warning box. I explain things when you need to be extra careful.</div>
-    <div class=info><span class="label_blue">INFO</span> I am an info box. I give contextual information or extra explanations.</div>
-    <div class=tip><span class="label_green">TIP</span> I am a tip box. I contain tips that makes your life easier when using KOReader.</div>
-    <div class=warning><span class="label_red">!!! ADVANCED</span> I am an <b>ADVANCED</b> tag. If you see me on a topic, it means that you need to have a certain degree of technical knowledge like working with a file system, CSS knowledge, installation of external files etc. depending on the procedure.</div>
+    <div class="warning"><span class="label_red">WARNING</span> I am a warning box. I explain things when you need to be extra careful.</div>
+    <div class="info"><span class="label_blue">INFO</span> I am an info box. I give contextual information or extra explanations.</div>
+    <div class="tip"><span class="label_green">TIP</span> I am a tip box. I contain tips that makes your life easier when using KOReader.</div>
+    <div class="warning"><span class="label_red">!!! ADVANCED</span> I am an <b>ADVANCED</b> tag. If you see me on a topic, it means that you need to have a certain degree of technical knowledge like working with a file system, CSS knowledge, installation of external files etc. depending on the procedure.</div>
     </div>
 
 <hr>
@@ -520,7 +517,7 @@
 
 <!-- ANCHOR TABLE OF CONTENTS -->
 
-    <div class="L1-Chapter-heading" id="toc">TABLE OF CONTENTS</div>
+    <div class="L1-Chapter-heading" id="toc">ÍNDICE</div>
 
     <div class="double-container">
         <div>
@@ -727,37 +724,37 @@
 
     <div class="standard-text">KOReader has a simple, mainly black and white user interface because gradients and different shades of gray can cause flashing and ghosting on e-ink screens which can degrade reading experience.
         
-    <p>KOReader has 2 main interfaces: <span class=ui>READING SCREEN</span> and <span class=ui>FILE BROWSER</span>.</p>
+    <p>KOReader has 2 main interfaces: <span class="ui">READING SCREEN</span> and <span class="ui">FILE BROWSER</span>.</p>
     </div>
 
     <div class="L2-Sub-heading" id="readingscreen">Reading Screen</div>
 
-    <div class="standard-text"> <b>READING SCREEN</b> has two toolbars. <span class=ui>TOP MENU</span> includes menu items related to the general usage of KOReader. You will access your books, KOReader preferences, plugins etc. here. <span class=ui>BOTTOM MENU</span> is focused on options for document formatting like font weight/size, line spacing etc. While adjusting your text appearance, you will mostly interact with the <span class=ui>BOTTOM MENU</span>.
+    <div class="standard-text"> <b>READING SCREEN</b> has two toolbars. <span class="ui">TOP MENU</span> includes menu items related to the general usage of KOReader. You will access your books, KOReader preferences, plugins etc. here. <span class="ui">BOTTOM MENU</span> is focused on options for document formatting like font weight/size, line spacing etc. While adjusting your text appearance, you will mostly interact with the <span class="ui">BOTTOM MENU</span>.
     </div>
 
     <br>
 
     <div class="double-container">
-        <div><img loading="lazy" src=pictures/menus.png style="width:350px;"></div>
-        <div><img loading="lazy" src=pictures/tap_zones.png style="width:350px;"></div>
+        <div><img loading="lazy" src="pictures/menus.png" style="width:350px;"></div>
+        <div><img loading="lazy" src="pictures/tap_zones.png" style="width:350px;"></div>
     </div>
 
-    <div class="standard-text">On the right you can see the default tap zones of KOReader. To show the <span class=ui>TOP MENU</span> or <span class=ui>BOTTOM MENU</span> you can tap the indicated zones. You can also swipe down the upper zone to show the <span class=ui>TOP MENU</span>. On non-touch devices like Kindle 4 you can open the <span class=ui>BOTTOM MENU</span> by pressing the button that corresponds to the <b>ENTER/OK</b> action.
+    <div class="standard-text">On the right you can see the default tap zones of KOReader. To show the <span class="ui">TOP MENU</span> or <span class="ui">BOTTOM MENU</span> you can tap the indicated zones. You can also swipe down the upper zone to show the <span class="ui">TOP MENU</span>. On non-touch devices like Kindle 4 you can open the <span class="ui">BOTTOM MENU</span> by pressing the button that corresponds to the <b>ENTER/OK</b> action.
     
-    <p>You can set <span class=ui>TOP MENU</span> zone to open both the <span class=ui>TOP</span> and <span class=ui>BOTTOM MENU</span> at the same time via this menu:</p>
+    <p>You can set <span class="ui">TOP MENU</span> zone to open both the <span class="ui">TOP</span> and <span class="ui">BOTTOM MENU</span> at the same time via this menu:</p>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and Gestures → Activate Menu
     </div>
     </div>
 
-    <div class="standard-text"><span class=ui>CORNER TAP ZONES</span> can be used for many different type of gestures including <b>TAP, DOUBLE TAP, TWO FINGER TAP</b> and <b>TAP and HOLD</b>.
+    <div class="standard-text"><span class="ui">CORNER TAP ZONES</span> can be used for many different type of gestures including <b>TAP, DOUBLE TAP, TWO FINGER TAP</b> and <b>TAP and HOLD</b>.
     <p><b>PREVIOUS PAGE</b> and <b>NEXT PAGE</b> zones can also be used for <b>DOUBLE TAP</b> gestures at the same time.</p>
-    <p><span class=ui>STATUS BAR</span> zone can be tapped to cycle between <span class=ui>STATUS BAR</span> items if only one item is visible. If all items are visible, tapping will show and hide the <span class=ui>STATUS BAR</span>. Check <b>“How can I configure the status bar ?”</b> heading for more info.</p>
+    <p><span class="ui">STATUS BAR</span> zone can be tapped to cycle between <span class="ui">STATUS BAR</span> items if only one item is visible. If all items are visible, tapping will show and hide the <span class="ui">STATUS BAR</span>. Check <b>“How can I configure the status bar ?”</b> heading for more info.</p>
     </div>
 
     <div class="L2-Sub-heading" id="filebrowser">File Browser</div>
 
-    <div class="standard-text">You will see <span class=ui>FILE BROWSER</span> when you run KOReader for the first time. You can access it from the reading screen by:
+    <div class="standard-text">You will see <span class="ui">FILE BROWSER</span> when you run KOReader for the first time. You can access it from the reading screen by:
     
     <div class="menu-breadcrumbs">⇑ TOP MENU →  <img class="img_inline" src="pictures/top_cabinet.svg" style="width:26px;"></div>
 
@@ -765,14 +762,14 @@
 
     <img loading="lazy" src="pictures/file_browser_ui.png" style="width:700px;">
 
-    <div class="standard-text">By default, <span class=ui>FILE BROWSER</span> shows your <span class=ui>HOME</span> which is your main library folder which you can change by <b>tapping and holding on any folder</b>. You can change its many options like how books are displayed or sorted via the <span class=ui>TOP MENU</span> by swiping down from the top part of the screen.
+    <div class="standard-text">By default, <span class="ui">FILE BROWSER</span> shows your <span class="ui">HOME</span> which is your main library folder which you can change by <b>tapping and holding on any folder</b>. You can change its many options like how books are displayed or sorted via the <span class="ui">TOP MENU</span> by swiping down from the top part of the screen.
     <p>Circled items in the image are explained below:</p>
-    <p><span class=ui>RESET:</span> This option allows you to reset some properties of your document like <b>reading progress, bookmarks, custom cover image</b> etc. which you can choose in a following dialog.</p>
-    <p class=warning><span class="label_red">WARNING</span> Be very careful when using this dialog and double check which items are marked, otherwise you can reset everything accidentally.</p>
-    <p><span class=ui>OPEN WITH:</span> KOReader has different engines for rendering different file types. In some cases you can open a file in a different engine to get some other features. See <b>Viewing archive files</b> and <b>Viewing image files</b> sections just below.</p>
-    <p><span class=ui>IGNORE COVER:</span> If for some reason you want to disable the cover for this book (it may have wrong cover or cover is not very readable on the e-ink screen) you can select this.</p>
-    <p><span class=ui>IGNORE METADATA:</span> If your book metadata is not correct, name field may show useless information. Select this option to show the file name instead of metadata.</p>
-    <p><span class=ui>REFRESH CACHED BOOK INFORMATION:</span> KOReader caches a book's metadata and book cover when you add it to your library. If you make some changes to the book after copying to your device, this information might need to be updated. If you see wrong cover or metadata, you can refresh the book information with this menu item.</p>
+    <p><span class="ui">RESET:</span> This option allows you to reset some properties of your document like <b>reading progress, bookmarks, custom cover image</b> etc. which you can choose in a following dialog.</p>
+    <p class="warning"><span class="label_red">WARNING</span> Be very careful when using this dialog and double check which items are marked, otherwise you can reset everything accidentally.</p>
+    <p><span class="ui">OPEN WITH:</span> KOReader has different engines for rendering different file types. In some cases you can open a file in a different engine to get some other features. See <b>Viewing archive files</b> and <b>Viewing image files</b> sections just below.</p>
+    <p><span class="ui">IGNORE COVER:</span> If for some reason you want to disable the cover for this book (it may have wrong cover or cover is not very readable on the e-ink screen) you can select this.</p>
+    <p><span class="ui">IGNORE METADATA:</span> If your book metadata is not correct, name field may show useless information. Select this option to show the file name instead of metadata.</p>
+    <p><span class="ui">REFRESH CACHED BOOK INFORMATION:</span> KOReader caches a book's metadata and book cover when you add it to your library. If you make some changes to the book after copying to your device, this information might need to be updated. If you see wrong cover or metadata, you can refresh the book information with this menu item.</p>
     </div>
 
     <div class="L3-Smaller-heading">Viewing archive files</div>
@@ -781,28 +778,27 @@
 
     <div class="standard-text">
     <ol>
-    <li>In <span class=ui>File Browser</span> long-press the file name</li>
-    <li>Tap <span class=ui>Open with…</span></li>
-    <li>Tap <span class=ui>Archive viewer</span></li>
+    <li>In <span class="ui">File Browser</span> long-press the file name</li>
+    <li>Tap <span class="ui">Open with…</span></li>
+    <li>Tap <span class="ui">Archive viewer</span></li>
     </ol>
     </div>
     
     <div class="L3-Smaller-heading">Viewing image files</div>
     <div class="standard-text">You can open image files with the image viewer instead of opening as a book. Files opened like this don’t show up in your history and have better scaling and rotation support.
     <ol>
-    <li>In <span class=ui>File Browser</span> long-press the file name</li>
-    <li>Tap <span class=ui>Open with…</span></li>
-    <li>Tap <span class=ui>Image viewer</span></li>
+    <li>In <span class="ui">File Browser</span> long-press the file name</li>
+    <li>Tap <span class="ui">Open with…</span></li>
+    <li>Tap <span class="ui">Image viewer</span></li>
     </ol>
     </div>
 
     <div class="L3-Smaller-heading">Setting file associations</div>
     <div class="standard-text">
-    You can also set file associations for file types which KOReader doesn’t automatically recognize. To associate a file with one of the KOReader providers, first long tap on your file in the <span class=ui>File Browser</span> then choose a provider engine to handle this file. You can check:
+    You can also set file associations for file types which KOReader doesn’t automatically recognize. To associate a file with one of the KOReader providers, first long tap on your file in the <span class="ui">File Browser</span> then choose a provider engine to handle this file. You can check:
     <ul>
-        <li><span class=ui>Always use this engine for this file</span> to associate this provider with this particular file only</li>
-        <li>Or check <span class=ui>Always use this engine for file type</span> to associate this provider with all the files that has same extension as this one
-    From the same dialog, you can see the associations you made by tapping on <span class=ui>View defaults for file types</span>.</li>
+        <li><span class="ui">Always use this engine for this file</span> to associate this provider with this particular file only</li>
+        <li>Or check <span class="ui">Always use this engine for file type</span> to associate this provider with all the files that has same extension as this one From the same dialog, you can see the associations you made by tapping on <span class="ui">View defaults for file types</span>.</li>
     </ul>
     
     <img loading="lazy" src="pictures/open_with_association.png" style="width:450px;">
@@ -814,9 +810,9 @@
     <div class="standard-text">
     Following methods are available for accessing your books and articles:
     <ul>
-    <li><span class=ui>File Browser</span> - As explained above</li>
-    <li><span class=ui>Favorites</span> - A list which you can add your books by long pressing on them in the <span class=ui>File Browser</span></li>
-    <li><span class=ui>History</span> - List of books you opened</li>
+    <li><span class="ui">File Browser</span> - As explained above</li>
+    <li><span class="ui">Favorites</span> - A list which you can add your books by long pressing on them in the <span class="ui">File Browser</span></li>
+    <li><span class="ui">History</span> - List of books you opened</li>
     </ul>
 
     <p>You can change how these screens look from:</p>
@@ -827,9 +823,9 @@
 
     <div class="menu-breadcrumbs">⇑ TOP MENU (in File Browser) → <img class="img_inline" src="pictures/top_cabinet.svg" style="width:26px;"> → Settings → Mosaic and detailed list settings</div>
 
-    <p>You can assign gestures for each of these dialogs. For example while reading a book, you can access your <span class=ui>History</span> or <span class=ui>Favorites</span> with a gesture and open another book without going through the <span class=ui>File Browser</span>.</p>
-    <p>You can search a book in the <span class=ui>History</span> screen by <b>filename</b> or <b>book metadata</b> from the upper left hamburger menu button.</p>
-    <p>You can also set KOReader to start with <span class=ui>Favorites</span> or <span class=ui>History</span> screen instead of <span class=ui>File Browser</span> via:</p>
+    <p>You can assign gestures for each of these dialogs. For example while reading a book, you can access your <span class="ui">History</span> or <span class="ui">Favorites</span> with a gesture and open another book without going through the <span class="ui">File Browser</span>.</p>
+    <p>You can search a book in the <span class="ui">History</span> screen by <b>filename</b> or <b>book metadata</b> from the upper left hamburger menu button.</p>
+    <p>You can also set KOReader to start with <span class="ui">Favorites</span> or <span class="ui">History</span> screen instead of <span class="ui">File Browser</span> via:</p>
     
 
     <div class="menu-breadcrumbs">⇑ TOP MENU (in File Browser) → <img class="img_inline" src="pictures/top_cabinet.svg" style="width:26px;"> → Start with</div>
@@ -842,45 +838,45 @@
     KOReader allows you to add your favorite folders to a quickly accessible Folder shortcuts menu. For example if you have an <b>Archive</b> folder in your library that is under <b>Home>Articles>Scientific>Archived</b>, you can assign a folder shortcut to this <b>Archived</b> folder and access it quickly even while reading a book.
 
     <p><b>Adding a folder shortcut</b></p>
-    <p>There are two ways of adding a folder to your <span class=ui>Folder shortcuts</span> list:</p>
+    <p>There are two ways of adding a folder to your <span class="ui">Folder shortcuts</span> list:</p>
     <ol>
-        <li>When you are in the File Browser, tap right corner <span class=ui>+ (plus) menu</span> button then tap <span class=ui>Add to folder shortcuts</span> item and enter a descriptive name for this shortcut. <b>This will add the folder you are currently in.</b></li>
-        <li>When you are in the File Browser, long-press on a folder name to open the context menu. Tap <span class=ui>Add to folder shortcuts</span> item and enter a descriptive name for this shortcut. <b>This will add the folder you pressed on.</b></li>
+        <li>When you are in the File Browser, tap right corner <span class="ui">+ (plus) menu</span> button then tap <span class="ui">Add to folder shortcuts</span> item and enter a descriptive name for this shortcut. <b>This will add the folder you are currently in.</b></li>
+        <li>When you are in the File Browser, long-press on a folder name to open the context menu. Tap <span class="ui">Add to folder shortcuts</span> item and enter a descriptive name for this shortcut. <b>This will add the folder you pressed on.</b></li>
     </ol>
 
-    <p>Folders which are in your <span class=ui>Folder shortcuts</span> list will have a <b>star (★)</b> in the <span class=ui>File Browser</span>.</p>
+    <p>Folders which are in your <span class="ui">Folder shortcuts</span> list will have a <b>star (★)</b> in the <span class="ui">File Browser</span>.</p>
 
-    <p>You can remove a folder from the shortcuts in the same way, by long-pressing on it and selecting <span class=ui>Remove from folder shortcuts</span>.</p>
+    <p>You can remove a folder from the shortcuts in the same way, by long-pressing on it and selecting <span class="ui">Remove from folder shortcuts</span>.</p>
     
     <br>
     <p><b>Viewing your folder shortcuts</b></p>
-    <p>You can open your <span class=ui>Folder shortcuts</span> from the <span class=ui>File Browser</span> or <span class=ui>Reading screen</span> while reading a book.</p>
+    <p>You can open your <span class="ui">Folder shortcuts</span> from the <span class="ui">File Browser</span> or <span class="ui">Reading screen</span> while reading a book.</p>
     <ul>
-        <li><b>From the File browser:</b> Top right corner <span class=ui>+ (plus) menu</span> then choosing <span class=ui>Folder shortcuts</span> or assigning a gesture.</li>
+        <li><b>From the File browser:</b> Top right corner <span class="ui">+ (plus) menu</span> then choosing <span class="ui">Folder shortcuts</span> or assigning a gesture.</li>
         <li><b>From the reading screen:</b> By assigning a gesture to it.</li>
     </ul>
 
-    <p> It is under the <span class=ui>File browser</span> section of the <span class=ui>Gesture manager</span>. You can learn how to set gestures in the relevant section of this guide.</p>
+    <p> It is under the <span class="ui">File browser</span> section of the <span class="ui">Gesture manager</span>. You can learn how to set gestures in the relevant section of this guide.</p>
 
     </div>
 
     <div class="L2-Sub-heading" id="uitips">User Interface Tips</div>
 
     <div class="standard-text">
-    <div class=info><span class="label_blue">INFO</span> KOReader’s user interface and options can change depending on the file type you open. There are two categories: <b>Fixed layout documents</b> (PDF, DJVU, image files...) and <b>Reflowable documents</b> (EPUB, HTML, DOCX, RTF, TXT…).
+    <div class="info"><span class="label_blue">INFO</span> KOReader’s user interface and options can change depending on the file type you open. There are two categories: <b>Fixed layout documents</b> (PDF, DJVU, image files...) and <b>Reflowable documents</b> (EPUB, HTML, DOCX, RTF, TXT…).
     </div>
 
     <ul>
         <li>You can change the interface language via: <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Language</div></li>
 
-        <li>If you tap and hold an <b>option</b> or <b>menu item</b> (font weight, line spacing etc.), you can set its value as <span class=ui>DEFAULT</span>.  The new value will only be applied to books opened from now on. Previously opened books will keep their settings. You can identify default values as a <span class=ui>star</span> (★) in the menu or as a <span class=ui>black border</span> around the indicators as seen below:
+        <li>If you tap and hold an <b>option</b> or <b>menu item</b> (font weight, line spacing etc.), you can set its value as <span class="ui">DEFAULT</span>. The new value will only be applied to books opened from now on. Previously opened books will keep their settings. You can identify default values as a <span class="ui">star</span> (★) in the menu or as a <span class="ui">black border</span> around the indicators as seen below:
             
             <img loading="lazy" src="pictures/default_border.png" style="width:500px;">
             <img loading="lazy" src="pictures/default_star.png" style="width:240px;"></li>
 
         <li>On the <b>BOTTOM MENU</b> if you tap and hold an option’s name, you can see its explanation.</li>
 
-        <li>You can <b>CLOSE</b> full screen dialogs (<span class=ui>History, Table of Contents, Bookmarks, Reading Statistics</span> etc.) by <b>swiping down.</b></li>
+        <li>You can <b>CLOSE</b> full screen dialogs (<span class="ui">History, Table of Contents, Bookmarks, Reading Statistics</span> etc.) by <b>swiping down.</b></li>
 
         <li>You can take a screenshot by making a <b>long diagonal swipe</b> with your finger. Also <b>touching opposing diagonal corners</b> will take a screenshot. You can use this second shortcut for example when viewing an image.</li>
 
@@ -895,19 +891,19 @@
 
         <li>Pressing and holding a word brings up a dialog where you can also search the selection in the document for more occurrences or look it up on Wikipedia.</li>
 
-        <li>If you want to change the size of user interface, there is a <span class=ui>DPI</span> setting for that:
+        <li>If you want to change the size of user interface, there is a <span class="ui">DPI</span> setting for that:
     
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Screen → Screen DPI</div>
 
-        <p>You can choose a value from the menu or select <span class=ui>CUSTOM DPI</span> to enter a value for fine tuning: <b>Higher DPI = Bigger Interface</b></p>
-        <p>Note that there is also a <span class=ui>Zoom (dpi)</span> setting in the bottom bar. That one is related to the documents only. You can find the explanation in the next section.</p>
+        <p>You can choose a value from the menu or select <span class="ui">CUSTOM DPI</span> to enter a value for fine tuning: <b>Higher DPI = Bigger Interface</b></p>
+        <p>Note that there is also a <span class="ui">Zoom (dpi)</span> setting in the bottom bar. That one is related to the documents only. You can find the explanation in the next section.</p>
         </li>
 
         <li>You can disable black flashing (automatic partial refresh to clear ghosting) of user interface if it disturbs you:
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Screen → E-ink Settings</div>
         </li>
 
-        <li>If you want to check the current date you can tap on the clock in the <span class=ui>TOP MENU</span>.</li>
+        <li>If you want to check the current date you can tap on the clock in the <span class="ui">TOP MENU</span>.</li>
     </ul>
 
     </div>
@@ -920,7 +916,7 @@
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_hamburger.svg" style="width:26px;"> → Help → Menu search</div>
 
-    <p>Also you can assign this feature to a gesture or add it to your <span class=ui>Quick Menu</span> for faster access.</p>
+    <p>Also you can assign this feature to a gesture or add it to your <span class="ui">Quick Menu</span> for faster access.</p>
     </div>
             
     <div class="L3-Smaller-heading">Scrolling types</div>
@@ -929,24 +925,24 @@
     
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and Gestures → Scrolling</div>
 
-    <div class=info><span class="label_blue">INFO</span> You have to enable <span class=ui>Continuous mode</span> from the <span class=ui>Bottom menu</span> to be able to use scrolling.</div>
+    <div class="info"><span class="label_blue">INFO</span> You have to enable <span class="ui">Continuous mode</span> from the <span class="ui">Bottom menu</span> to be able to use scrolling.</div>
 
     <p><b>Classic scrolling:</b> This mode works exactly like your phone/tablet scrolling.</p>
 
-    <p><b>Turbo scrolling:</b> This mode allows you to scroll faster than <span class=ui>classic scrolling</span>. Also you can scroll several pages without lifting your finger. Scrolling amount is proportional to the distance you move your finger after you initiated scrolling.</p>
+    <p><b>Turbo scrolling:</b> This mode allows you to scroll faster than <span class="ui">classic scrolling</span>. Also you can scroll several pages without lifting your finger. Scrolling amount is proportional to the distance you move your finger after you initiated scrolling.</p>
 
-    <p><b>On-release scrolling:</b> This scrolling type is more suitable for e-ink screens. Because unlike other scrolling types, this mode doesn’t refresh your page continuously while scrolling. It works like <span class=ui>classic scrolling</span> but intermediate steps are not shown. So you scroll with your finger and when you release, page jumps to that position. This is especially useful <b>to reposition and adjust the view</b> if your book contains pictures or tables and you want to see all of it.</p>
+    <p><b>On-release scrolling:</b> This scrolling type is more suitable for e-ink screens. Because unlike other scrolling types, this mode doesn’t refresh your page continuously while scrolling. It works like <span class="ui">classic scrolling</span> but intermediate steps are not shown. So you scroll with your finger and when you release, page jumps to that position. This is especially useful <b>to reposition and adjust the view</b> if your book contains pictures or tables and you want to see all of it.</p>
     </div>
 
     <div class="L3-Smaller-heading">Go back to previous location</div>
     <div class="standard-text">
-        This useful feature works like the <b>Back</b> button in your browser. When you jump to some other part of the book using <span class=ui>Skim widget, Bookmarks list, Book map</span> etc. KOReader remembers your previous location. This is useful for example if you follow an internal link or reference. With one tap you can go back to where you come from. You can access this feature from:
+        This useful feature works like the <b>Back</b> button in your browser. When you jump to some other part of the book using <span class="ui">Skim widget, Bookmarks list, Book map</span> etc. KOReader remembers your previous location. This is useful for example if you follow an internal link or reference. With one tap you can go back to where you come from. You can access this feature from:
     </div>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Go back to previous location</div>
 
     <div class="standard-text">
-        Also you can go forward too, from the same menu. This feature is assigned to ← → multiswipe gesture. You can assign this to another gesture if you want (like tapping a corner) or add it to your <span class=ui>Quick Menu</span>.
+        Also you can go forward too, from the same menu. This feature is assigned to ← → multiswipe gesture. You can assign this to another gesture if you want (like tapping a corner) or add it to your <span class="ui">Quick Menu</span>.
     </div>
 
     <div class="L3-Smaller-heading">Prevent flashing on pages with images</div>
@@ -964,7 +960,7 @@
 
     <p>With this new feature, when reading EPUB documents, text appearance adjustments can be done much quicker by only rendering the current chapter.</p>
 
-    <div class=info><span class="label_blue">INFO</span> This is only possible if your EPUB is composed of multiple fragments. EPUB files are basically .zip archives that contain .html files. Some books can be a single .html file while others may be composed of multiple .html files like each chapter of the book is a separate .html file. <b>If your book is only a single .html file, partial rendering can not work, because for each change KOReader still has to calculate the whole book.</b>
+    <div class="info"><span class="label_blue">INFO</span> This is only possible if your EPUB is composed of multiple fragments. EPUB files are basically .zip archives that contain .html files. Some books can be a single .html file while others may be composed of multiple .html files like each chapter of the book is a separate .html file. <b>If your book is only a single .html file, partial rendering can not work, because for each change KOReader still has to calculate the whole book.</b>
     </div>
     
     <p>Also rotating your screen orientation is now much faster thanks to this feature. This feature is <b>ENABLED</b> by default. If necessary, it can be disabled per book (with a tap), or globally (with a long-tap) on:</p>
@@ -989,8 +985,7 @@
         <img loading="lazy" class="img_inline" src="pictures/partial_rendering_3.svg" style="width:50px;"> Full rendering is done, but <b>not yet applied</b> because KOReader is waiting for you to be <b>idle</b> to reload the rest of the book (idle=not interacting with the device). You can still turn pages, jump links, change settings.
         </li>
         <li>
-        <img loading="lazy" class="img_inline" src="pictures/partial_rendering_4.svg" style="width:50px;">You've been idle for a while so KOReader is now reloading the whole document.
-        At this step KOReader is <b>blocked</b> to prevent interaction.
+        <img loading="lazy" class="img_inline" src="pictures/partial_rendering_4.svg" style="width:50px;">You've been idle for a while so KOReader is now reloading the whole document. At this step KOReader is <b>blocked</b> to prevent interaction.
         </li>
         </ol>
     </div>
@@ -1001,21 +996,21 @@
 
     <div class="L2-Sub-heading" id="bottomexplained">Bottom Menu Items Explained</div>
 
-    <div class=tip><span class="label_green">TIP</span> You can see an explanation of these items when you long tap on their names in the bottom menu.
+    <div class="tip"><span class="label_green">TIP</span> You can see an explanation of these items when you long tap on their names in the bottom menu.
     </div>
 
     <img loading="lazy" src="pictures/bottom_menu_3.png" style="width:500px;">
 
     <div class="standard-text">
-    <span class=ui>VIEW MODE:</span> If you change to <span class=ui>CONTINUOUS</span> mode you can scroll the document like a web page. This mode is more suitable for non e-ink screen types (LCD, OLED). In continuous mode <b>you lose TOP and BOTTOM MARGINS</b> so text may be cut on first and last line of screen. To solve this problem you can enable <span class=ui>PAGE OVERLAP</span>:
+    <span class="ui">VIEW MODE:</span> If you change to <span class="ui">CONTINUOUS</span> mode you can scroll the document like a web page. This mode is more suitable for non e-ink screen types (LCD, OLED). In continuous mode <b>you lose TOP and BOTTOM MARGINS</b> so text may be cut on first and last line of screen. To solve this problem you can enable <span class="ui">PAGE OVERLAP</span>:
     </div>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Page Overlap</div>
     
     <div class="standard-text">
-    <span class=ui>RENDER MODE:</span> This option determines how your document is rendered by KOReader. Default is <span class=ui>WEB</span> and generally you don’t need to change this setting. When a book (or saved web page) is very complicated (specified widths or margins, negative margins, floats etc.) and layout looks bad or overflow the screen, you can try other rendering modes.
+    <span class="ui">RENDER MODE:</span> This option determines how your document is rendered by KOReader. Default is <span class="ui">WEB</span> and generally you don’t need to change this setting. When a book (or saved web page) is very complicated (specified widths or margins, negative margins, floats etc.) and layout looks bad or overflow the screen, you can try other rendering modes.
     
-    <p><span class=ui>ZOOM (dpi):</span> This setting can be thought of as a <b>general zoom factor</b> for the document (except font size). At 96 dpi (which is the default setting), images in the document are rendered at their original dimensions. Basically you will use this setting if you want to <b>make images bigger without making the text bigger</b>.</p>
+    <p><span class="ui">ZOOM (dpi):</span> This setting can be thought of as a <b>general zoom factor</b> for the document (except font size). At 96 dpi (which is the default setting), images in the document are rendered at their original dimensions. Basically you will use this setting if you want to <b>make images bigger without making the text bigger</b>.</p>
     </div>
     
     <hr>
@@ -1023,10 +1018,10 @@
     <img loading="lazy" src="pictures/bottom_menu_4.png" style="width:500px;">
 
     <div class="standard-text">
-    <span class=ui>WORD SPACING and WORD EXPANSION:</span> These two settings are related and they determine how your text will look when it is justified. When you justify text, space is added between words so that both edges of each line are aligned with both margins. Since word counts of lines are not equal all the time, in justified alignment, text has to be compressed or expanded to fill the line.
-    <p><span class=ui>WORD SPACING:</span> How much the <b>SPACE</b> characters in a line of text can be compressed to fit more words. This setting doesn’t affect words, it only changes the space between them.</p>
+    <span class="ui">WORD SPACING and WORD EXPANSION:</span> These two settings are related and they determine how your text will look when it is justified. When you justify text, space is added between words so that both edges of each line are aligned with both margins. Since word counts of lines are not equal all the time, in justified alignment, text has to be compressed or expanded to fill the line.
+    <p><span class="ui">WORD SPACING:</span> How much the <b>SPACE</b> characters in a line of text can be compressed to fit more words. This setting doesn’t affect words, it only changes the space between them.</p>
     <p>
-    <span class=ui>WORD EXPANSION:</span> If you have too much white space in a line, how much of that can be distributed into the words by expanding them. This setting affects the appearance of words. If you don’t want your words to expand, set this to <span class=ui>NONE</span>.</p>
+    <span class="ui">WORD EXPANSION:</span> If you have too much white space in a line, how much of that can be distributed into the words by expanding them. This setting affects the appearance of words. If you don’t want your words to expand, set this to <span class="ui">NONE</span>.</p>
     
     <p>You can experiment with different settings until the text looks pleasing to you, then set them as defaults via their respective dialogs.</p>
     </div>
@@ -1036,20 +1031,16 @@
     <img loading="lazy" src="pictures/bottom_menu_5.png" style="width:500px;">
 
     <div class="standard-text">
-    <span class=ui>CONTRAST</span> and <span class=ui>FONT WEIGHT</span> are two options that you can use to make your text bolder (or lighter). You can achieve the same appearance with either of these options but they use different methods to achieve it. Of course you can use them both at the same time.
-
-
-
-    The differences between them can be summarized as:
+    <span class="ui">CONTRAST</span> and <span class="ui">FONT WEIGHT</span> are two options that you can use to make your text bolder (or lighter). You can achieve the same appearance with either of these options but they use different methods to achieve it. Of course you can use them both at the same time. The differences between them can be summarized as:
     <div class="double-container">
         <div>
-            <span class=ui>CONTRAST</span>
+            <span class="ui">CONTRAST</span>
             <p><b>+</b> Doesn’t change font width, book length stays the same</p>
             <p><b>+</b> Doesn’t need to re-render document, faster</p>
             <p><b>-</b> Might look bad on LCD or low DPI screens</p>
         </div>
         <div>
-            <span class=ui>FONT WEIGHT</span>
+            <span class="ui">FONT WEIGHT</span>
             <p><b>+</b> Will use proper weighted fonts if you have them installed</p>
             <p><b>+</b> Looks better on LCD or low DPI screens</p>
             <p><b>-</b> Has to re-render fonts, slower</p>
@@ -1057,9 +1048,9 @@
     </div>
 
 
-    <p><span class=ui>FONT HINTING</span> adjusts your text for maximum readability according to your screen’s pixel grid. <span class=ui>NATIVE</span> uses font’s internal hinting instructions, <span class=ui>AUTO</span> uses FreeType’s hinting algorithm. <span class=ui>AUTO</span> is a safer choice because font files that you installed may have problematic hinting instructions. Also <span class=ui>AUTO</span> handles <b>CJK</b> text better. You can try different settings to see which one looks better on your device.</p>
+    <p><span class="ui">FONT HINTING</span> adjusts your text for maximum readability according to your screen’s pixel grid. <span class="ui">NATIVE</span> uses font’s internal hinting instructions, <span class="ui">AUTO</span> uses FreeType’s hinting algorithm. <span class="ui">AUTO</span> is a safer choice because font files that you installed may have problematic hinting instructions. Also <span class="ui">AUTO</span> handles <b>CJK</b> text better. You can try different settings to see which one looks better on your device.</p>
     
-    <p><span class=ui>FONT KERNING</span> adjusts the spacing between letters to achieve a visually pleasing result. Default is <span class=ui>BEST</span>, which might be <b>slower</b> when opening files (depending on your device) but <b>has better support for ligatures</b> (see picture below for an example), joined <b>Arabic</b> glyphs and some other scripts. If your device is slow, you can try <span class=ui>GOOD</span> which is faster and may still look correct with western latin-script text.</p>
+    <p><span class="ui">FONT KERNING</span> adjusts the spacing between letters to achieve a visually pleasing result. Default is <span class="ui">BEST</span>, which might be <b>slower</b> when opening files (depending on your device) but <b>has better support for ligatures</b> (see picture below for an example), joined <b>Arabic</b> glyphs and some other scripts. If your device is slow, you can try <span class="ui">GOOD</span> which is faster and may still look correct with western latin-script text.</p>
     </div>
     
     <img loading="lazy" src="pictures/kerning_ligatures.png" style="width:300px;">
@@ -1069,31 +1060,30 @@
     <img loading="lazy" src="pictures/bottom_menu_6.png" style="width:500px;">
 
     <div class="standard-text">
-    <span class=ui>ALT STATUS BAR</span> enables an alternative status bar which is available only in reflowable documents (EPUB, HTML, DOCX, RTF, TXT…). After enabling it here, you can configure <span class=ui>ALT STATUS BAR</span> via:
+    <span class="ui">ALT STATUS BAR</span> enables an alternative status bar which is available only in reflowable documents (EPUB, HTML, DOCX, RTF, TXT…). After enabling it here, you can configure <span class="ui">ALT STATUS BAR</span> via:
     </div>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Status Bar → Alt status bar</div>
     
     <div class="standard-text">
-    <span class=ui>EMBEDDED STYLE</span> and <span class=ui>EMBEDDED FONTS</span> determine if publisher’s styles and fonts embedded in the document will be used (or ignored) to render the document. These are general on/off switches. You can achieve more fine tuned tweaks for your document via:
+    <span class="ui">EMBEDDED STYLE</span> and <span class="ui">EMBEDDED FONTS</span> determine if publisher’s styles and fonts embedded in the document will be used (or ignored) to render the document. These are general on/off switches. You can achieve more fine tuned tweaks for your document via:
     </div>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Style Tweaks</div>
 
     <div class="standard-text">
-    <span class=ui>IMAGE SCALING</span> determines how images in your document are rendered. <span class=ui>BEST</span> looks more pleasing but it is slower.
+    <span class="ui">IMAGE SCALING</span> determines how images in your document are rendered. <span class="ui">BEST</span> looks more pleasing but it is slower.
     </div>
 
 
 
     <div class="L3-Smaller-heading">Saving your text appearance settings for later use</div>
     <div class="standard-text">
-    This powerful feature allows you to save all the <span class=ui>BOTTOM MENU</span> settings + font type as a <b>profile</b>. This means you can have different group of settings for different conditions or book types which you can apply at once instead of changing the settings manually every time.
-    For example you can create a:
+    This powerful feature allows you to save all the <span class="ui">BOTTOM MENU</span> settings + font type as a <b>profile</b>. This means you can have different group of settings for different conditions or book types which you can apply at once instead of changing the settings manually every time. For example you can create a:
     <ul>
-        <li><b>Double column</b> profile with <span class=ui>two columns</span> of small sized text, <span class=ui>landscape orientation</span> and minimum <span class=ui>margins</span></li>
-        <li><b>Night reading</b> profile with <span class=ui>bigger sans serif font</span> and higher <span class=ui>contrast</span> for more visible text under low light</li>
-        <li><b>Disabled styles</b> profile with <span class=ui>embedded style</span> and <span class=ui>embedded fonts</span> disabled for badly structured books</li>
+        <li><b>Double column</b> profile with <span class="ui">two columns</span> of small sized text, <span class="ui">landscape orientation</span> and minimum <span class="ui">margins</span></li>
+        <li><b>Night reading</b> profile with <span class="ui">bigger sans serif font</span> and higher <span class="ui">contrast</span> for more visible text under low light</li>
+        <li><b>Disabled styles</b> profile with <span class="ui">embedded style</span> and <span class="ui">embedded fonts</span> disabled for badly structured books</li>
     </ul>
     After adjusting your settings to your liking, you can create a profile from them via:
     </div>
@@ -1103,9 +1093,9 @@
     <div class="standard-text">
     After creating a profile with your settings, you have many options for applying it to another book:
         <ul>
-        <li>You can apply the profile from the <span class=ui>Profiles menu</span></li>
+        <li>You can apply the profile from the <span class="ui">Profiles menu</span></li>
         <li>You can assign a gesture to it</li>
-        <li>You can show it in your <span class=ui>Quick Menu</span></li>
+        <li>You can show it in your <span class="ui">Quick Menu</span></li>
         </ul>
 
     <p>Please see the <a href="#gestures">GESTURES, QUICK MENU AND PROFILES</a> chapter for more information.</p>
@@ -1127,7 +1117,7 @@
     </ul>
 
 
-    <div class=info><span class="label_blue">INFO</span> *Font selection and style tweaks are available only on reflowable documents (EPUB, HTML, DOCX, RTF, TXT…). Fixed-layout documents like PDF/DJVU are not supported.
+    <div class="info"><span class="label_blue">INFO</span> *Font selection and style tweaks are available only on reflowable documents (EPUB, HTML, DOCX, RTF, TXT…). Fixed-layout documents like PDF/DJVU are not supported.
     </div>
 
     <p>You can also change other formatting options from the <span class="ui">BOTTOM MENU</span> to fine tune the appearance of your text.</p>
@@ -1145,7 +1135,7 @@
 
     <div class="L3-Smaller-heading">How can I configure the status bar ?</div>
     <div class="standard-text">
-    You can configure bottom status bar from this menu. Feel free to explore the <span class=ui>SETTINGS</span> sub-menu to customize your status bar as you like.
+    You can configure bottom status bar from this menu. Feel free to explore the <span class="ui">SETTINGS</span> sub-menu to customize your status bar as you like.
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Status Bar</div>
 
@@ -1162,14 +1152,14 @@
     <div class="menu-breadcrumbs">Gesture selection menu → Reader → Toggle status bar</div>
 
 
-    <p>There is also an <span class=ui>ALT STATUS BAR</span> which is available in reflowable documents (epub, html, docx, rtf, txt…). If you prefer to use this, you can enable via:</p>
+    <p>There is also an <span class="ui">ALT STATUS BAR</span> which is available in reflowable documents (epub, html, docx, rtf, txt…). If you prefer to use this, you can enable via:</p>
  
     <div class="menu-breadcrumbs">⇓ BOTTOM MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Alt Status Bar</div>
 
     <br>
 
     <p><b>Using "Custom Text" item for status bar alignment</b></p>
-    <p>There is a special status bar item named <span class=ui>Custom text</span>. This item can show your chosen text in the status bar. You can use this feature to create a separator between the status bar items.</p>
+    <p>There is a special status bar item named <span class="ui">Custom text</span>. This item can show your chosen text in the status bar. You can use this feature to create a separator between the status bar items.</p>
     <ul>
         <li>First enable this option with a short press on it from this menu
 
@@ -1196,8 +1186,7 @@
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Screen → Screensaver → Settings</div>
 
     <p>
-        Please refer to this forum post for advanced information about screensaver images:
-        <a href="https://www.mobileread.com/forums/showpost.php?p=3728291&postcount=17">https://www.mobileread.com/forums/showpost.php?p=3728291&postcount=17</a>
+        Please refer to this forum post for advanced information about screensaver images: <a href="https://www.mobileread.com/forums/showpost.php?p=3728291&postcount=17">https://www.mobileread.com/forums/showpost.php?p=3728291&postcount;=17</a>
     </p>
     </div>
 
@@ -1212,7 +1201,7 @@
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Device → Keyboard → Keyboard settings</div></li>
     <li>You can select more than one layout:
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Device → Keyboard → Keyboard layout</div></li>
-    <li>You can change between your selected layouts by tapping the  <img loading="lazy" class="img_inline" src="pictures/keyboard_world.png" style="width:26px;">  icon on the keyboard</li>
+    <li>You can change between your selected layouts by tapping the <img loading="lazy" class="img_inline" src="pictures/keyboard_world.png" style="width:26px;"> icon on the keyboard</li>
 </ul>
     </div>
 
@@ -1250,20 +1239,20 @@
     <div class="L2-Sub-heading" id="autowarmth">Auto Warmth And Night Mode</div>
 
     <div class="standard-text">
-    This plugin allows you to adjust frontlight warmth in devices with <b>natural (yellow/orange) light</b> and set <span class=ui>Night Mode</span> (inverted screen colors – <b>white text on black background</b>) automatically according to a schedule. It can control them both or you can choose <span class=ui>only warmth control</span> or <span class=ui>only Night Mode control</span> mode, so you can adjust the other one manually.
+    This plugin allows you to adjust frontlight warmth in devices with <b>natural (yellow/orange) light</b> and set <span class="ui">Night Mode</span> (inverted screen colors – <b>white text on black background</b>) automatically according to a schedule. It can control them both or you can choose <span class="ui">only warmth control</span> or <span class="ui">only Night Mode control</span> mode, so you can adjust the other one manually.
     <p>This plugin comes enabled as default. If it is not in the menu, you can enable it via:</p>
     
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → More tools → Auto Warmth and Night Mode</div>
 
-    <div class=info><span class="label_blue">INFO</span> If you have a PocketBook device and frontlight or warmth slider is not working in KOReader, please be sure that in the PocketBook reader (which comes with your device) <b>SmartLight-Auto</b> option is set to <b>Disabled</b>.
+    <div class="info"><span class="label_blue">INFO</span> If you have a PocketBook device and frontlight or warmth slider is not working in KOReader, please be sure that in the PocketBook reader (which comes with your device) <b>SmartLight-Auto</b> option is set to <b>Disabled</b>.
     </div>
 
 
     <p>You can adjust the warmth of your screen frontlight automatically in two different ways:</p>
 
-    <p><span class=ui>FIXED SCHEDULE:</span> In this mode your frontlight warmth changes according to the daily schedule you entered. This mode is <b>STATIC</b>, it doesn’t account for daylight length. The schedule stays the same all around the year.</p>
+    <p><span class="ui">FIXED SCHEDULE:</span> In this mode your frontlight warmth changes according to the daily schedule you entered. This mode is <b>STATIC</b>, it doesn’t account for daylight length. The schedule stays the same all around the year.</p>
 
-    <p><span class=ui>SUN’S POSITION:</span> This option calculates Sun’s position in your location according to <b>COORDINATES</b> and <b>ALTITUDE</b> information you entered. Frontlight warmth is adjusted gradually according to this calculated Sun position data. This mode is <b>DYNAMIC</b>. As the length of daylight changes around the year, plugin adjusts the schedule accordingly.</p>
+    <p><span class="ui">SUN’S POSITION:</span> This option calculates Sun’s position in your location according to <b>COORDINATES</b> and <b>ALTITUDE</b> information you entered. Frontlight warmth is adjusted gradually according to this calculated Sun position data. This mode is <b>DYNAMIC</b>. As the length of daylight changes around the year, plugin adjusts the schedule accordingly.</p>
 
     <p>First have a look at this image to familiarize yourself with the terms used in the plugin:</p>
     </div>
@@ -1275,8 +1264,8 @@
     <div class="standard-text">
 <ol>
     <li>Go to the plugin menu: <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Screen → Auto Warmth and Night Mode</div></li>
-    <li>Tap Activate menu item and then <span class=ui>ACCORDING TO THE FIXED SCHEDULE</span></li>
-    <li>Go back to previous menu and tap <span class=ui>FIXED SCHEDULE SETTINGS</span> menu item</li>
+    <li>Tap Activate menu item and then <span class="ui">ACCORDING TO THE FIXED SCHEDULE</span></li>
+    <li>Go back to previous menu and tap <span class="ui">FIXED SCHEDULE SETTINGS</span> menu item</li>
     <li>Set your warmth transition schedule by setting times for various items here. Refer to the image above for an explanation of items.</li>
 </ol>
     </div>
@@ -1288,13 +1277,13 @@
         <ol>
             <li>Go to the plugin menu:
                 <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Screen → Auto Warmth and Night Mode</div></li>
-            <li>Tap <span class=ui>ACTIVATE</span> menu item and then <span class=ui>ACCORDING TO THE SUN’S POSITION</span></li>
-            <li>Go back to previous menu and tap <span class=ui>LOCATION SETTINGS</span> menu item. Set your <b>coordinates</b> (necessary) and <b>altitude</b> (optional) correctly and give a <b>name</b> to your location.</li>
-            <li>Go back to previous menu and tap <span class=ui>WARMTH AND NIGHT MODE SETTINGS</span> menu item</li>
+            <li>Tap <span class="ui">ACTIVATE</span> menu item and then <span class="ui">ACCORDING TO THE SUN’S POSITION</span></li>
+            <li>Go back to previous menu and tap <span class="ui">LOCATION SETTINGS</span> menu item. Set your <b>coordinates</b> (necessary) and <b>altitude</b> (optional) correctly and give a <b>name</b> to your location.</li>
+            <li>Go back to previous menu and tap <span class="ui">WARMTH AND NIGHT MODE SETTINGS</span> menu item</li>
             <li>Set your warmth transition schedule by setting times for various items here. Refer to the image above for an explanation of items.</li>
         </ol>
  
-    <p>You can see your current schedule via <span class=ui>CURRENTLY ACTIVE PARAMETERS</span> menu option.</p>
+    <p>You can see your current schedule via <span class="ui">CURRENTLY ACTIVE PARAMETERS</span> menu option.</p>
     <img loading="lazy" src="pictures/auto_warmth_menu.png" style="width:400px;">
         
     </div>
@@ -1302,8 +1291,8 @@
     <div class="L3-Smaller-heading">Night Mode</div>
 
     <div class="standard-text">
-    While setting the warm light percentages for different intervals, you can also set that interval to <span class=ui>Night Mode</span>, which inverts the screen colors when that interval starts. If your minimum frontlight is still too bright or if you prefer a dark page background, you can activate this feature. To enable this, in the dialog below, tap the <span class=ui>Night mode</span> checkbox and tap <span class=ui>Set</span>.
-    <p>When you do this, a <b>moon icon</b> will appear in the menu next to this interval. To disable night mode, just disable the <span class=ui>Night mode</span> checkbox in that interval.</p>
+    While setting the warm light percentages for different intervals, you can also set that interval to <span class="ui">Night Mode</span>, which inverts the screen colors when that interval starts. If your minimum frontlight is still too bright or if you prefer a dark page background, you can activate this feature. To enable this, in the dialog below, tap the <span class="ui">Night mode</span> checkbox and tap <span class="ui">Set</span>.
+    <p>When you do this, a <b>moon icon</b> will appear in the menu next to this interval. To disable night mode, just disable the <span class="ui">Night mode</span> checkbox in that interval.</p>
     </div>
 
     <img loading="lazy" src="pictures/night_mode_checkbox.png" style="width:300px;">
@@ -1311,7 +1300,7 @@
     <div class="L3-Smaller-heading">Frontlight auto on/off</div>
 
     <div class="standard-text">
-    This feature turns your frontlight on at sunset and turns it off at sunrise according to your <span class=ui>Currently active parameters</span> in this plugin. You can override this change by manually turning your frontlight on/off. On the next sunrise/sunset, <span class=ui>AutoWarmth</span> will toggle it again if it is necessary. You can activate it by selecting <span class=ui>Frontlight off during the day</span> menu item in this plugin.
+    This feature turns your frontlight on at sunset and turns it off at sunrise according to your <span class="ui">Currently active parameters</span> in this plugin. You can override this change by manually turning your frontlight on/off. On the next sunrise/sunset, <span class="ui">AutoWarmth</span> will toggle it again if it is necessary. You can activate it by selecting <span class="ui">Frontlight off during the day</span> menu item in this plugin.
     </div>
 
     <div class="L3-Smaller-heading">Faster warmth change tip</div>
@@ -1333,7 +1322,7 @@
 
     <div class="L3-Smaller-heading">How can I add my own fonts ?</div>
     <div class="standard-text">
-    KOReader supports fonts in most widely used TrueType (.ttf) and OpenType formats (.otf). Font files with these extensions can be directly copied to <span class=ui>/koreader/fonts/</span> folder on your device. Check the wiki for more info:
+    KOReader supports fonts in most widely used TrueType (.ttf) and OpenType formats (.otf). Font files with these extensions can be directly copied to <span class="ui">/koreader/fonts/</span> folder on your device. Check the wiki for more info:
     <p><a href="https://github.com/koreader/koreader/wiki/Fonts">https://github.com/koreader/koreader/wiki/Fonts</a></p>
     
     <p>When starting up, KOReader compiles the available fonts from the <b>font metadata/info</b> and classifies them according to family and weights. This means you can add different weights and variants of a font and KOReader will try to use the most suitable one. Since it takes font family information from metadata, font names are not important when copying to your device. Installed fonts will be available after restarting KOReader.</p>
@@ -1366,11 +1355,10 @@
     <div class="L3-Smaller-heading">Monospace font scale</div>
     <div class="standard-text">
     <p>
-        If your book includes parts with <b>Monospace</b> fonts (like in programming books), Monospace font might look disproportional even if they are technically at the same size. This is caused by differing font metrics.
-        If you want to fix this difference, KOReader has an option that allows you to adjust the relative Monospace font size.
+        If your book includes parts with <b>Monospace</b> fonts (like in programming books), Monospace font might look disproportional even if they are technically at the same size. This is caused by differing font metrics. If you want to fix this difference, KOReader has an option that allows you to adjust the relative Monospace font size.
     </p>
 
-    <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Font → Font settings →  Monospace fonts scaling</div>
+    <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Font → Font settings → Monospace fonts scaling</div>
 
     <p>Here you can increase or decrease the size of your Monospace font by adjusting its scaling as a percentage of the default size.</p>
     </div>
@@ -1381,7 +1369,7 @@
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Font → Font-family fonts</div>
 
-    <p>To change a family font for the current book just tap on the desired font name. If you want to set this for all your books, long-tap to set it as a <span class=ui>Default (★)</span>. If a book abuses this font family feature to the point where your default font is hardly used, you can disable that family font for this book by unchecking the association.</p>
+    <p>To change a family font for the current book just tap on the desired font name. If you want to set this for all your books, long-tap to set it as a <span class="ui">Default (★)</span>. If a book abuses this font family feature to the point where your default font is hardly used, you can disable that family font for this book by unchecking the association.</p>
     </div>
     
     <img loading="lazy" src="pictures/font_family.png" style="width:600px;">
@@ -1389,7 +1377,7 @@
 
     <div class="L3-Smaller-heading">Changing font quickly</div>
     <div class="standard-text">
-    If you are switching between fonts frequently (i.e. <b>monospace</b> for programming books and <b>serif</b> for novels) there is a workaround which makes this easier than going into the menu each time. You can create profiles for your fonts and all font related settings like <span class=ui>line spacing, contrast, bold</span> etc. and add these profiles to a <span class=ui>Quick Menu</span>. So with a single gesture you can open your font selection menu and change the font like shown in the image below:
+    If you are switching between fonts frequently (i.e. <b>monospace</b> for programming books and <b>serif</b> for novels) there is a workaround which makes this easier than going into the menu each time. You can create profiles for your fonts and all font related settings like <span class="ui">line spacing, contrast, bold</span> etc. and add these profiles to a <span class="ui">Quick Menu</span>. So with a single gesture you can open your font selection menu and change the font like shown in the image below:
 
     <img loading="lazy" src="pictures/quickmenu_font_selection.png" style="width:350px;">
 
@@ -1403,11 +1391,11 @@
 
     <div class="standard-text">
     There are many different ways of moving through your document in KOReader.
-    <p>You can use the <span class=ui>SKIM WIDGET, BOOK MAP or PAGE BROWSER</span> features.</p>
+    <p>You can use the <span class="ui">SKIM WIDGET, BOOK MAP or PAGE BROWSER</span> features.</p>
     
     <div class="L2-Sub-heading" id="skimwidget">Skim Widget</div>
 
-    <p>You can also open this widget with a long-tap on the <span class=ui>Status Bar</span> in addition to:</p>
+    <p>You can also open this widget with a long-tap on the <span class="ui">Status Bar</span> in addition to:</p>
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Skim document</div>
     
     <img loading="lazy" src="pictures/skim_widget.png" style="width:650px;">
@@ -1417,7 +1405,7 @@
     <div class="L3-Smaller-heading">Chapter Marks</div>
     
     <div class="standard-text">
-    KOReader can show chapter boundaries from your documents on the <span class=ui>SKIM WIDGET</span> and <span class=ui>PROGRESS BAR</span>.
+    KOReader can show chapter boundaries from your documents on the <span class="ui">SKIM WIDGET</span> and <span class="ui">PROGRESS BAR</span>.
 
     <p><img loading="lazy" src="pictures/skim_widget_chapter_marks.png" style="width:400px;"></p>
 
@@ -1429,12 +1417,12 @@
 
     <p>You can also use this reduced ToC for:</p>
     <ul>
-        <li>chapter titles (if it is shown on <span class=ui>Status Bar</span>)</li>
+        <li>chapter titles (if it is shown on <span class="ui">Status Bar</span>)</li>
         <li>chapter navigation</li>
         <li>reading time left estimates</li>
     </ul>
     <p>These options are in the same menu.</p>
-    <p>If your document doesn’t have a Table of Contents, you can enable <span class=ui>ALTERNATIVE TABLE OF CONTENTS</span>. When this setting is enabled, KOReader will build a ToC from document headings (if available) or from individual HTML files in the EPUB. Long press on this menu item for extra info:
+    <p>If your document doesn’t have a Table of Contents, you can enable <span class="ui">ALTERNATIVE TABLE OF CONTENTS</span>. When this setting is enabled, KOReader will build a ToC from document headings (if available) or from individual HTML files in the EPUB. Long press on this menu item for extra info:
     </p>
     
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Settings → Alternative table of contents</div>
@@ -1449,9 +1437,9 @@
     Book map is a powerful and unique feature of KOReader which can be very useful for getting an overview of a book. For example if you are reading a book non-linearly by skipping some parts to read them later, it would be hard to track your progress. Book Map can show you which parts of the book you have already read, at a glance.
     <p>Additionally you can:</p>
     <ul>
-        <li>See how much time you have spent on each page (if <span class=ui>Reading Statistics</span> plugin is enabled)</li>
+        <li>See how much time you have spent on each page (if <span class="ui">Reading Statistics</span> plugin is enabled)</li>
         <li>Check which pages have bookmark, highlights and notes</li>
-        <li>Navigate directly to any part of the book like the <span class=ui>SKIM WIDGET</span></li>
+        <li>Navigate directly to any part of the book like the <span class="ui">SKIM WIDGET</span></li>
     </ul>
 
     You can access Book Map via menu and you can also assign a gesture for quicker access:
@@ -1463,16 +1451,16 @@
 
     <div class="L3-Smaller-heading">User Interface And Controls</div>
     <div class="standard-text">
-    When you open the <span class=ui>Book Map</span> first time while reading a book, it will be in <span class=ui>Grid View</span> mode, fitting all chapters on a single screen to give the best initial overview of the book’s content. To get a detailed information about usage, tap the info icon at the upper left corner. You can close the Book Map by tapping <span class=ui>X</span> on the upper right corner or with any multiswipe gesture (<b>UP-DOWN, LEFT-RIGHT</b> etc.).
+    When you open the <span class="ui">Book Map</span> first time while reading a book, it will be in <span class="ui">Grid View</span> mode, fitting all chapters on a single screen to give the best initial overview of the book’s content. To get a detailed information about usage, tap the info icon at the upper left corner. You can close the Book Map by tapping <span class="ui">X</span> on the upper right corner or with any multiswipe gesture (<b>UP-DOWN, LEFT-RIGHT</b> etc.).
     
     <img loading="lazy" src="pictures/bookmap.png" style="width:800px;">
     
-    <p>You can customize <span class=ui>Book Map</span> by changing these options:</p>
-    <p>- First try swiping <span class=ui>LEFT</span> and <span class=ui>RIGHT</span> along the bottom edge of the screen to change width of columns indicating pages and observe how it changes the scale of map</p>
+    <p>You can customize <span class="ui">Book Map</span> by changing these options:</p>
+    <p>- First try swiping <span class="ui">LEFT</span> and <span class="ui">RIGHT</span> along the bottom edge of the screen to change width of columns indicating pages and observe how it changes the scale of map</p>
     
-    <p>- Then try swiping <span class=ui>UP</span> and <span class=ui>DOWN</span> along the left edge of the screen to change chapter title depth and switch to the <span class=ui>Flat View</span>. See examples below.</p>
+    <p>- Then try swiping <span class="ui">UP</span> and <span class="ui">DOWN</span> along the left edge of the screen to change chapter title depth and switch to the <span class="ui">Flat View</span>. See examples below.</p>
 
-    <p>In addition to default <span class=ui>Grid View</span> above, here you can see the <span class=ui>Flat View</span> on the left and Grid View without chapter titles on the right. Note the changing left vertical scrollbar between views. If you want to switch back to the default view, you can long-press the info icon at the upper left corner.</p>
+    <p>In addition to default <span class="ui">Grid View</span> above, here you can see the <span class="ui">Flat View</span> on the left and Grid View without chapter titles on the right. Note the changing left vertical scrollbar between views. If you want to switch back to the default view, you can long-press the info icon at the upper left corner.</p>
 
     <div class="double-container">
         <div><img loading="lazy" src="pictures/bookmap_flat.png" style="width:400px;"></div>
@@ -1490,24 +1478,24 @@
     <div class="standard-text">
     When you tap the menu icon on the <b>Book map</b> screen you are presented with the menu above. Menu options are explained below:
     <ul>
-        <li><span class=ui>About book map:</span> Short explanation of Book map usage and icon descriptions.</li>
-        <li><span class=ui>Available gestures:</span> Gestures you can use to change the settings of Book map instead of using this menu.</li>
-        <li><span class=ui>Page browser on tap:</span> If this is checked, when you tap on a page in Book map, <span class=ui>Page browser</span> opens. This shows you an overview of the area you selected. If you disable this option, a tap in Book map directly takes you to that page. But remember, depending on factors like your screen size, touch screen sensitivity, tap accuracy etc. you might end up in adjacent pages.</li>
-        <li><span class=ui>Switch current/initial views:</span> If you customized your Book map view, tapping this switches between the <b>default view</b> and your <b>customized view</b>.</li>
-        <li><span class=ui>Switch grid/flat views:</span> Switch between separate chapters or continuous chapters views.</li>
-        <li><span class=ui>Chapter levels:</span> Change the depth of chapter/sub chapter levels.</li>
-        <li><span class=ui>Page slot width:</span> Make each page slot wider or narrower.</li>
-        <li><span class=ui>10-page markers:</span> As you increase this value, first it will add markers to every <b>10<sup>th</sup> page</b>, then it will make them bigger and eventually it will add markers to every <b>5<sup>th</sup> page</b>.</li>
+        <li><span class="ui">About book map:</span> Short explanation of Book map usage and icon descriptions.</li>
+        <li><span class="ui">Available gestures:</span> Gestures you can use to change the settings of Book map instead of using this menu.</li>
+        <li><span class="ui">Page browser on tap:</span> If this is checked, when you tap on a page in Book map, <span class="ui">Page browser</span> opens. This shows you an overview of the area you selected. If you disable this option, a tap in Book map directly takes you to that page. But remember, depending on factors like your screen size, touch screen sensitivity, tap accuracy etc. you might end up in adjacent pages.</li>
+        <li><span class="ui">Switch current/initial views:</span> If you customized your Book map view, tapping this switches between the <b>default view</b> and your <b>customized view</b>.</li>
+        <li><span class="ui">Switch grid/flat views:</span> Switch between separate chapters or continuous chapters views.</li>
+        <li><span class="ui">Chapter levels:</span> Change the depth of chapter/sub chapter levels.</li>
+        <li><span class="ui">Page slot width:</span> Make each page slot wider or narrower.</li>
+        <li><span class="ui">10-page markers:</span> As you increase this value, first it will add markers to every <b>10<sup>th</sup> page</b>, then it will make them bigger and eventually it will add markers to every <b>5<sup>th</sup> page</b>.</li>
     </ul>
     </div>
     
     <div class="L2-Sub-heading" id="pagebrowser">Page Browser</div>
     <div class="standard-text">
-    Page Browser can be used to navigate between pages like in a photo album by showing thumbnails of the pages as a grid. You can open <span class=ui>Page Browser</span> by tapping on the <span class=ui>Book Map</span> or from the menu. You can also assign a gesture for quick access.
+    Page Browser can be used to navigate between pages like in a photo album by showing thumbnails of the pages as a grid. You can open <span class="ui">Page Browser</span> by tapping on the <span class="ui">Book Map</span> or from the menu. You can also assign a gesture for quick access.
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Page browser</div>
 
-    <p>You can change the number of pages shown by swiping along the <span class=ui>TOP</span> and <span class=ui>LEFT</span> sides of screen. Icons on the bottom are the same as <span class=ui>Book Map</span>. Actually the bottom part is a linear version of the <span class=ui>Book Map</span>.</p>
+    <p>You can change the number of pages shown by swiping along the <span class="ui">TOP</span> and <span class="ui">LEFT</span> sides of screen. Icons on the bottom are the same as <span class="ui">Book Map</span>. Actually the bottom part is a linear version of the <span class="ui">Book Map</span>.</p>
 
     <img loading="lazy" src="pictures/page_browser.png" style="width:650px;">
 
@@ -1516,7 +1504,7 @@
     <div class="L3-Smaller-heading">Alternative theme for Book map and Page Browser</div>
     
     <div class="standard-text">
-    Book map and page browser has an <b>Alternative theme</b> with a different shading scheme which you can activate from their hamburger menus. This theme uses alternating colors for the chapter headings so chapter boundaries is more visible in the <span class=ui>Book map</span> and <span class=ui>Page browser</span>. But the usage of gray color in this theme requires flashing to black so it might be distracting for some users. You can try both and use the one you like.
+    Book map and page browser has an <b>Alternative theme</b> with a different shading scheme which you can activate from their hamburger menus. This theme uses alternating colors for the chapter headings so chapter boundaries is more visible in the <span class="ui">Book map</span> and <span class="ui">Page browser</span>. But the usage of gray color in this theme requires flashing to black so it might be distracting for some users. You can try both and use the one you like.
     </div>
 
     <div class="L2-Sub-heading" id="toctools">Table of Contents Tools</div>
@@ -1529,20 +1517,20 @@
     
     <p> KOReader has some features that you can use when reading books with a problematic table of contents section.</p>
     
-    <p>Note that <span class=ui>Alternative table of contents</span> is not available on <b>fixed layout documents</b> like PDF, DJVU etc. because it requires HTML tags to create a ToC. <span class=ui>Custom table of contents</span> and <span class=ui>Custom hidden flows</span> features are available on all file types.</p>
+    <p>Note that <span class="ui">Alternative table of contents</span> is not available on <b>fixed layout documents</b> like PDF, DJVU etc. because it requires HTML tags to create a ToC. <span class="ui">Custom table of contents</span> and <span class="ui">Custom hidden flows</span> features are available on all file types.</p>
 
     </div>
 
     <div class="L3-Smaller-heading">Automatically creating a table of contents: ALTERNATIVE TABLE OF CONTENTS</div>
 
     <div class="standard-text">
-    First feature is the <span class=ui>Alternative table of contents</span> which you can find in:
+    First feature is the <span class="ui">Alternative table of contents</span> which you can find in:
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Settings → Alternative table of contents</div>
 
-    <div class=info><span class="label_blue">INFO</span> An EPUB document is basically a ZIP file containing one or more HTML files. Your book might be one big HTML file for the whole book or it might contain separate chapters as individual HTML files (which is a better structure).</div>
+    <div class="info"><span class="label_blue">INFO</span> An EPUB document is basically a ZIP file containing one or more HTML files. Your book might be one big HTML file for the whole book or it might contain separate chapters as individual HTML files (which is a better structure).</div>
         
-    <p><span class=ui>Alternative table of contents</span> tries to create a ToC from the headings in your book (<b>H1</b> to <b>H6</b> tags in the HTML files in your EPUB). If your book doesn’t contain any headings, it will try to build a ToC from the document fragments (individual HTML files in your EPUB book) which will point to the beginning of each file.</p>
+    <p><span class="ui">Alternative table of contents</span> tries to create a ToC from the headings in your book (<b>H1</b> to <b>H6</b> tags in the HTML files in your EPUB). If your book doesn’t contain any headings, it will try to build a ToC from the document fragments (individual HTML files in your EPUB book) which will point to the beginning of each file.</p>
     
     <p>You can choose which heading levels to include (or ignore) in your ToC from this menu:</p>
 
@@ -1562,18 +1550,18 @@
     <p>Once you enable this feature, new menu items will be added to the user interface which allows you to select your chapters. You can add a chapter to your ToC from two places:</p>
 
     <ol>
-        <li><b>From a highlight:</b> While reading a book, select a text like you are highlighting it or long press on a word. In the popup menu you will see the <span class=ui>Start TOC chapter</span> item. When you press on it, you will see a dialog asking you to enter your chapter title. The text you selected will be already entered in the dialog. Edit your title if necessary and press create.</li>
+        <li><b>From a highlight:</b> While reading a book, select a text like you are highlighting it or long press on a word. In the popup menu you will see the <span class="ui">Start TOC chapter</span> item. When you press on it, you will see a dialog asking you to enter your chapter title. The text you selected will be already entered in the dialog. Edit your title if necessary and press create.</li>
         <li><b>From the Page browser:</b> Open the Page browser via</li>
     </ol>
 
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Page browser</div>
     
-    <p>Long press on the page thumbnail that you want to be the beginning of your chapter and select <span class=ui>Start TOC chapter</span> item from the popup menu. You will see a dialog asking you to enter your chapter title.</p>
+    <p>Long press on the page thumbnail that you want to be the beginning of your chapter and select <span class="ui">Start TOC chapter</span> item from the popup menu. You will see a dialog asking you to enter your chapter title.</p>
     
     <p>When you are done creating your ToC and don’t want to see these extra buttons, you can disable them by unchecking:</p>
 
-    <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> →  Settings → Custom layout features → Edit mode</div>
+    <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Settings → Custom layout features → Edit mode</div>
     
     <p>Creating this ToC will not alter your original ToC which comes with your book. You can clear your <b>Custom table of contents</b> from this same menu (in case you want to create a new one). And you can disable this feature completely in the same way you enabled it, if you want to return to the original ToC. Note that if you disable this feature after creating a custom ToC to return to the original one, your custom ToC will not be deleted. You can still switch between the original and your custom ToC.</p>
     
@@ -1584,7 +1572,7 @@
     <div class="L3-Smaller-heading">Excluding sections of your book: CUSTOM HIDDEN FLOWS</div>
 
     <div class="standard-text">
-    Some books or documents might contain long footnotes or bibliography sections. Like a scientific book which is 250 pages long but last 50 pages are Appendices, Index and References. Normally these pages are included in the progress bar and reading time calculations since they are part of the book. But generally these sections exist as a reference and they are not read completely so you might want to exclude them to make your remaining page count and time estimates more accurate. Or maybe you have an anthology book which contain some stories you have already read. <span class=ui>Custom hidden flows</span> feature of KOReader allows you to exclude these kind of parts of your book.
+    Some books or documents might contain long footnotes or bibliography sections. Like a scientific book which is 250 pages long but last 50 pages are Appendices, Index and References. Normally these pages are included in the progress bar and reading time calculations since they are part of the book. But generally these sections exist as a reference and they are not read completely so you might want to exclude them to make your remaining page count and time estimates more accurate. Or maybe you have an anthology book which contain some stories you have already read. <span class="ui">Custom hidden flows</span> feature of KOReader allows you to exclude these kind of parts of your book.
     <p>Have a look at the image for an overview of the process. Steps will be explained after the image:</p>
 
     <img loading="lazy" src="pictures/custom_hidden_flow_howto.png" style="width:850px; box-shadow: none;">
@@ -1593,15 +1581,15 @@
     <p><b>How to exclude a section by creating a hidden flow</b></p>
     <ol>
         <li>Go to the first page of the section you want to exclude</li>
-        <li>Open the <span class=ui>Page browser</span> via:
+        <li>Open the <span class="ui">Page browser</span> via:
 
             <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Page browser</div>
         </li>
-        <li>Long press on the page thumbnail that you want to be the beginning of your excluded section and select <span class=ui>Start hidden flow here</span> item from the popup menu.</li>
+        <li>Long press on the page thumbnail that you want to be the beginning of your excluded section and select <span class="ui">Start hidden flow here</span> item from the popup menu.</li>
         <li>You will see that the pages starting from your selection now have a gray hatched background.</li>
-        <li>Now go to the last page of your excluded section. You can navigate there from the <span class=ui>Page browser</span> or using other ways like <span class=ui>Book map, Skim widget</span> etc.</li>
-        <li>Once you are at the last page of your excluded section, open the <span class=ui>Page browser</span> again (if you are not already in it).</li>
-        <li>Find the last page of your hidden section and long press on the <b>next page</b>. Choose <span class=ui>Restart regular flow here</span> from the popup menu. You will see that the background of the remaining pages will return to normal color, indicating the end of hidden flow and the beginning of regular flow.</li>
+        <li>Now go to the last page of your excluded section. You can navigate there from the <span class="ui">Page browser</span> or using other ways like <span class="ui">Book map, Skim widget</span> etc.</li>
+        <li>Once you are at the last page of your excluded section, open the <span class="ui">Page browser</span> again (if you are not already in it).</li>
+        <li>Find the last page of your hidden section and long press on the <b>next page</b>. Choose <span class="ui">Restart regular flow here</span> from the popup menu. You will see that the background of the remaining pages will return to normal color, indicating the end of hidden flow and the beginning of regular flow.</li>
     </ol>
 <br>
     <p><b>Working with the hidden sections</b></p>
@@ -1609,19 +1597,19 @@
     <ul>
         <li>These hidden flow sections will be skipped when turning pages. For example assume that you created a hidden flow for <b>Chapter 10</b>. Now you are on the last page of <b>Chapter 9</b>. When you turn the page, you will see <b>Chapter 11</b>.</li>
         <li>Page numbering will continue as if these hidden flow sections <b>do not exist</b>.</li>
-        <li>These hidden sections will not be shown in your <span class=ui>Progress bar</span> (but read the explanation below) and will not be considered in <b>time to read</b> calculations. But they will still be visible in the <span class=ui>Skim widget</span>.</li>
-        <li>Following direct links to the pages included in these hidden flow sections will still work. Also you can still reach these sections from the <span class=ui>Table of contents, Book map, Page browser, Skim widget</span>.</li>
+        <li>These hidden sections will not be shown in your <span class="ui">Progress bar</span> (but read the explanation below) and will not be considered in <b>time to read</b> calculations. But they will still be visible in the <span class="ui">Skim widget</span>.</li>
+        <li>Following direct links to the pages included in these hidden flow sections will still work. Also you can still reach these sections from the <span class="ui">Table of contents, Book map, Page browser, Skim widget</span>.</li>
     </ul>
     
-    <p>As we said above, your hidden flows will be excluded from your <span class=ui>Progress bar</span>. But if you jump to one of your hidden sections using any of the methods mentioned above, your Progress bar temporarily becomes this hidden section’s progress bar. You can imagine this as the progress bar is zooming into that hidden flow section. If you exit out of this hidden section by turning the page at the end of it, or using other navigation tools, your Progress bar will go back to showing the whole book again (with your custom hidden flows again not visible).</p>
+    <p>As we said above, your hidden flows will be excluded from your <span class="ui">Progress bar</span>. But if you jump to one of your hidden sections using any of the methods mentioned above, your Progress bar temporarily becomes this hidden section’s progress bar. You can imagine this as the progress bar is zooming into that hidden flow section. If you exit out of this hidden section by turning the page at the end of it, or using other navigation tools, your Progress bar will go back to showing the whole book again (with your custom hidden flows again not visible).</p>
     
 <br>
     <p><b>Removing and cleaning up hidden sections</b></p>
-    <p>You can remove individual hidden flow sections from the <span class=ui>Page browser</span> in the same way you created them. You can also clear all of them at once with the menu item:</p>
+    <p>You can remove individual hidden flow sections from the <span class="ui">Page browser</span> in the same way you created them. You can also clear all of them at once with the menu item:</p>
         
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Settings → Custom layout features → Clear all marked pages</div>
 
-    <p>As you work on creating hidden flows by tagging pages as <span class=ui>Start hidden flow</span> or <span class=ui>Restart regular flow</span>, some of the previously made ones may stop having an effect. For example in the case that you make <span class=ui>Start hidden flow</span> a few pages before an existing <span class=ui>Start hidden flow</span>, that existing one is no longer involved. This overlapping or obsolete tags are remembered for practical purposes. Again in the previous example, if you end that second hidden flow before the existing-but-no-longer-involved Start hidden flow, this deactive one will be involved again. You can clear all these inactive markers if they interfere with your custom flows, or once you finish making your hidden flows and happy with the results:</p>
+    <p>As you work on creating hidden flows by tagging pages as <span class="ui">Start hidden flow</span> or <span class="ui">Restart regular flow</span>, some of the previously made ones may stop having an effect. For example in the case that you make <span class="ui">Start hidden flow</span> a few pages before an existing <span class="ui">Start hidden flow</span>, that existing one is no longer involved. This overlapping or obsolete tags are remembered for practical purposes. Again in the previous example, if you end that second hidden flow before the existing-but-no-longer-involved Start hidden flow, this deactive one will be involved again. You can clear all these inactive markers if they interfere with your custom flows, or once you finish making your hidden flows and happy with the results:</p>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_bookmark.svg" style="width:26px;"> → Settings → Custom layout features → Clear inactive marked pages</div>
 
@@ -1643,7 +1631,7 @@
     
     <p><b>Bookmarks:</b> You can add (and remove) a bookmark by pressing the upper right corner. This is the equivalent of folding the corner of a page on a real book and shows a similar icon when you enable it.</p>
 
-    <p><b>Highlights:</b> You can highlight text in 4 different styles. In the image below, you can see a normal paragraph followed by different styles of highlights. <span class=ui>Lighten</span> (with gray background), <span class=ui>Underline, Strikeout</span> and <span class=ui>Invert</span>.</p>
+    <p><b>Highlights:</b> You can highlight text in 4 different styles. In the image below, you can see a normal paragraph followed by different styles of highlights. <span class="ui">Lighten</span> (with gray background), <span class="ui">Underline, Strikeout</span> and <span class="ui">Invert</span>.</p>
 
 
     <img loading="lazy" src="pictures/highlight_styles.png" style="width:600px;">
@@ -1652,11 +1640,11 @@
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Highlight style</div>
 
-    <p><b>Notes:</b> You can also add notes to your highlights. Just tap on a highlight and choose <span class=ui>Add note</span> from the popup menu. You can also choose a <span class=ui>Note marker</span> that shows which highlights contain a note. There are three styles: <span class=ui>Underline, Side line</span> and <span class=ui>Side mark</span> (which is the pencil icon shown on the right side of the picture below):</p>
+    <p><b>Notes:</b> You can also add notes to your highlights. Just tap on a highlight and choose <span class="ui">Add note</span> from the popup menu. You can also choose a <span class="ui">Note marker</span> that shows which highlights contain a note. There are three styles: <span class="ui">Underline, Side line</span> and <span class="ui">Side mark</span> (which is the pencil icon shown on the right side of the picture below):</p>
 
     <img loading="lazy" src="pictures/note_marker.png" style="width:600px;">
 
-    To enable this feature and choose a <span class=ui>Note marker</span> style, go to:
+    To enable this feature and choose a <span class="ui">Note marker</span> style, go to:
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Highlight style → Note marker</div>
 
@@ -1666,8 +1654,8 @@
 
     <div class="standard-text">
     KOReader has two highlighting modes for different use cases:
-    <p><span class=ui>Normal mode</span> is similar to selecting a text with your finger on a phone/tablet and more suitable if your highlights are shorter than one page.</p>
-    <p><span class=ui>Select and highlight mode</span> is more suitable for highlighting longer passages which cross page boundaries. It might also work better if you have touch screen sensitivity problems or motor control issues with your hands. Because in this highlight mode you don’t need to drag your finger along the screen.</p>
+    <p><span class="ui">Normal mode</span> is similar to selecting a text with your finger on a phone/tablet and more suitable if your highlights are shorter than one page.</p>
+    <p><span class="ui">Select and highlight mode</span> is more suitable for highlighting longer passages which cross page boundaries. It might also work better if you have touch screen sensitivity problems or motor control issues with your hands. Because in this highlight mode you don’t need to drag your finger along the screen.</p>
     </div>
 
     <div class="L3-Smaller-heading">Normal mode</div>
@@ -1688,7 +1676,7 @@
     <div class="L3-Smaller-heading">Select and highlight mode</div>
 
     <div class="standard-text">
-    <div class=info><span class="label_blue">INFO</span>  If you have dictionary lookup enabled when long pressing a word, you have to drag your finger to initiate this mode.
+    <div class="info"><span class="label_blue">INFO</span> If you have dictionary lookup enabled when long pressing a word, you have to drag your finger to initiate this mode.
     </div>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and gestures → Long-press on text → Dictionary on single word selection</div>
@@ -1697,26 +1685,26 @@
 
     <ol>
     <li>Long-press (or drag if dictionary lookup is enabled as described above) on the starting word, popup menu will show up.</li>
-    <li>Tap on <span class=ui>Select</span>, now you are in highlighting mode. When you are in this mode, you will see an indicator at the upper left corner of the screen (which you can tap on it to get more information). You can cancel highlighting by tapping on the beginning of highlight again. You can turn pages with taps/swipes and freely navigate the document (TOC, skim etc) in this mode.</li>
+    <li>Tap on <span class="ui">Select</span>, now you are in highlighting mode. When you are in this mode, you will see an indicator at the upper left corner of the screen (which you can tap on it to get more information). You can cancel highlighting by tapping on the beginning of highlight again. You can turn pages with taps/swipes and freely navigate the document (TOC, skim etc) in this mode.</li>
     <li>Long-press (or drag if dictionary lookup is enabled as described above) on the ending word for your highlight, menu will show up again.</li>
-    <li>Tap <span class=ui>Highlight</span> this time to finish highlighting the passage.</li>
+    <li>Tap <span class="ui">Highlight</span> this time to finish highlighting the passage.</li>
     </ol>
 
     <p>This dialog normally opens at the center of the screen. If you want this dialog to open closer to your highlight location, you can change the center option here to gesture position (located on the second page of this menu):</p>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;">→ Taps and Gestures → Long-press on text → Highlight dialog position</div>
 
-    <div class=tip><span class="label_green">TIP</span> There is a <b>faster</b> method for this mode if you don’t need <b>long-press menu items</b> shown above. You can disable the popup menu completely so when you long-press on a word you will immediately enter the <span class=ui>Select and highlight</span> mode. This method is much faster and you can highlight any length of text with just two taps. To use this method enable this option:
+    <div class="tip"><span class="label_green">TIP</span> There is a <b>faster</b> method for this mode if you don’t need <b>long-press menu items</b> shown above. You can disable the popup menu completely so when you long-press on a word you will immediately enter the <span class="ui">Select and highlight</span> mode. This method is much faster and you can highlight any length of text with just two taps. To use this method enable this option:
     </div>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and gestures → Long-press on text → Select and highlight</div>
 
-    <div class=tip><span class="label_green">TIP</span> KOReader can highlight a passage in different styles. If you use <span class=ui>Lighten</span> option, text background will be gray. Due to e-ink limitations, screens can’t change from white to gray directly, so highlighted part first has to turn black and then gray. If you want to avoid this flashing, you can choose <span class=ui>Inverted</span> as your highlight style. In this mode text background will be black so it can be set without flashing. You can adjust these highlighting options via:
+    <div class="tip"><span class="label_green">TIP</span> KOReader can highlight a passage in different styles. If you use <span class="ui">Lighten</span> option, text background will be gray. Due to e-ink limitations, screens can’t change from white to gray directly, so highlighted part first has to turn black and then gray. If you want to avoid this flashing, you can choose <span class="ui">Inverted</span> as your highlight style. In this mode text background will be black so it can be set without flashing. You can adjust these highlighting options via:
     </div>
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Highlight style</div>
 
-    <div class=tip><span class="label_green">TIP</span> You can add multiple highlights and notes to the same section of text. If they are overlapping, when you tap on a highlight you will be presented with a menu to choose which highlight you want to edit.
+    <div class="tip"><span class="label_green">TIP</span> You can add multiple highlights and notes to the same section of text. If they are overlapping, when you tap on a highlight you will be presented with a menu to choose which highlight you want to edit.
     </div>
     </div>
   
@@ -1725,23 +1713,23 @@
     <div class="standard-text">
     When you are highlighting, KOReader tries to include the related punctuation marks around your selection. For example if you highlight from the first word to the last word of a sentence, KOReader will automatically include the punctuation marks at the both ends of the sentence to your highlight.
     
-    <p>But if you start highlighting from the middle of a sentence, period at the end <b>will not be included</b> because KOReader assumes that you want to make a partial highlight. So if you want the punctuation marks to be added to your highlight, be sure that you select the <b>whole sentence</b>. Also you can add these marks later by long pressing the <span class=ui>Highlight edit</span> buttons.</p>
+    <p>But if you start highlighting from the middle of a sentence, period at the end <b>will not be included</b> because KOReader assumes that you want to make a partial highlight. So if you want the punctuation marks to be added to your highlight, be sure that you select the <b>whole sentence</b>. Also you can add these marks later by long pressing the <span class="ui">Highlight edit</span> buttons.</p>
     </div>
 
     <div class="L3-Smaller-heading">Editing a highlight</div>
 
     <div class="standard-text">
-    <p>When you tap on an already highlighted text <b>(without a note)</b>, you will see this popup menu. <span class=ui>Delete</span> and <span class=ui>Add note</span> items are clear. Bottom row menu items are used to extend or shrink the highlight.</p>
+    <p>When you tap on an already highlighted text <b>(without a note)</b>, you will see this popup menu. <span class="ui">Delete</span> and <span class="ui">Add note</span> items are clear. Bottom row menu items are used to extend or shrink the highlight.</p>
 
     <img loading="lazy" src="pictures/highlight_edit.png" style="width:500px;">
 
-    <div class=info><span class="label_blue">INFO</span> This adjustment works only on reflowable documents like EPUBs. If you want to extend or shrink a highlight on PDFs, you have to delete it and highlight again due to the limitations of the PDF format.</div>
+    <div class="info"><span class="label_blue">INFO</span> This adjustment works only on reflowable documents like EPUBs. If you want to extend or shrink a highlight on PDFs, you have to delete it and highlight again due to the limitations of the PDF format.</div>
 
-    <p>When you tap on an already highlighted text <b>with a note added</b>, you will see this popup menu. Tap on <span class=ui>Edit highlight</span> to open the menu above where you can edit both the highlight and the contained note:</p>
+    <p>When you tap on an already highlighted text <b>with a note added</b>, you will see this popup menu. Tap on <span class="ui">Edit highlight</span> to open the menu above where you can edit both the highlight and the contained note:</p>
 
     <img loading="lazy" src="pictures/note_edit.png" style="width:300px;">
 
-    <p>On your <span class=ui>Bookmarks</span> page you can filter the view to see only one type of bookmark by pressing the menu icon ( <img class="img_inline" src="pictures/top_hamburger.svg" style="width:26px;"> ) You can also filter by highlight style:</p>
+    <p>On your <span class="ui">Bookmarks</span> page you can filter the view to see only one type of bookmark by pressing the menu icon ( <img class="img_inline" src="pictures/top_hamburger.svg" style="width:26px;"> ) You can also filter by highlight style:</p>
 
     <img loading="lazy" src="pictures/bookmark_filter.png" style="width:800px;">
 
@@ -1752,11 +1740,11 @@
     <div class="L2-Sub-heading" id="exportinghighlights">Exporting your highlights</div>
 
     <div class="standard-text">
-    After finishing a book, you can move it to a specific folder for archiving or processing purposes. Enable <span class=ui>Move to archive</span> plugin and set your target directory in the plugin’s settings (<span class=ui>Set archive folder</span>). After this, you can move a book to your archive folder using:
+    After finishing a book, you can move it to a specific folder for archiving or processing purposes. Enable <span class="ui">Move to archive</span> plugin and set your target directory in the plugin’s settings (<span class="ui">Set archive folder</span>). After this, you can move a book to your archive folder using:
     <ul>
-        <li><span class=ui>Move to archive</span> plugin menu</li>
+        <li><span class="ui">Move to archive</span> plugin menu</li>
         <li>With a gesture or</li>
-        <li>With a <span class=ui>Quick Menu</span> entry</li>
+        <li>With a <span class="ui">Quick Menu</span> entry</li>
     </ul>
     KOReader provides different ways of exporting your highlights and notes from your reader device:
     </div>
@@ -1766,7 +1754,7 @@
     <div class="standard-text">
     This versatile plugin can export your highlights to <b>local files</b> or <b>online services</b>.
 
-    <p><span class=ui>Local export:</span> You can export your highlights to your device in these file formats:</p>
+    <p><span class="ui">Local export:</span> You can export your highlights to your device in these file formats:</p>
     <ul>
         <li>Text (.txt)</li>
         <li>HTML (.html)</li>
@@ -1783,16 +1771,16 @@
 
     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → Export Highlights → Choose export folder</div>
     
-    <p><span class=ui>Online services:</span> You can also export to these services over the network:</p>
+    <p><span class="ui">Online services:</span> You can also export to these services over the network:</p>
     <ul>
-        <li><span class=external>Joplin</span> (a note taking application) - <a href="https://joplinapp.org/">https://joplinapp.org/</a></li>
-        <li><span class=external>Readwise</span> (an online bookmarks/highlights application) - <a href="https://readwise.io/">https://readwise.io/</a> </li>
-        <li><span class=external>Memos</span> (a self-hosted open source memo hub) - <a href="https://github.com/usememos/memos">https://github.com/usememos/memos</a></li>
+        <li><span class="external">Joplin</span> (a note taking application) - <a href="https://joplinapp.org/">https://joplinapp.org/</a></li>
+        <li><span class="external">Readwise</span> (an online bookmarks/highlights application) - <a href="https://readwise.io/">https://readwise.io/</a> </li>
+        <li><span class="external">Memos</span> (a self-hosted open source memo hub) - <a href="https://github.com/usememos/memos">https://github.com/usememos/memos</a></li>
         <li>
-            <span class=external>Flomo</span> (an online note taking service) - <a href="https://flomoapp.com">https://flomoapp.com</a>
+            <span class="external">Flomo</span> (an online note taking service) - <a href="https://flomoapp.com">https://flomoapp.com</a>
         </li>
         <li>
-            <span class=external>XMNote</span> (an Android bookmark organizer in Chinese language) - <a href="https://www.xmnote.com/">https://www.xmnote.com/</a>
+            <span class="external">XMNote</span> (an Android bookmark organizer in Chinese language) - <a href="https://www.xmnote.com/">https://www.xmnote.com/</a>
         </li>
 
 
@@ -1804,11 +1792,11 @@
 <br>
 
     <p>After selecting your formats, you can export the notes for the <b>current book</b> or <b>all the books in your library</b> from the same plugin menu.</p>
-    <p>If you want to export only some of the books in your library, you can do this from the <span class=ui>File Browser</span>:</p>
+    <p>If you want to export only some of the books in your library, you can do this from the <span class="ui">File Browser</span>:</p>
     <ol>
-        <li>Select multiple books in the <span class=ui>File Browser</span></li>
+        <li>Select multiple books in the <span class="ui">File Browser</span></li>
         <li>Tap on the menu button (shown as a check mark) at the top right corner</li>
-        <li>Select <span class=ui>Export highlights</span> from the menu shown</li>
+        <li>Select <span class="ui">Export highlights</span> from the menu shown</li>
     </ol>
 
     </div>
@@ -1816,46 +1804,46 @@
     <div class="L3-Smaller-heading">2. Using KoHighlights</div>
 
     <div class="standard-text">
-        <span class=external>KoHighlights</span> is an external program that you can install on your computer. It can access your book notes and highlights when you plug your reader to your computer. Check the project page for download and instructions:
+        <span class="external">KoHighlights</span> is an external program that you can install on your computer. It can access your book notes and highlights when you plug your reader to your computer. Check the project page for download and instructions:
         <p><a href="https://github.com/noembryo/KoHighlights">https://github.com/noembryo/KoHighlights</a></p>
     </div>
 
     <div class="L3-Smaller-heading">3. Using Calibre</div>
 
     <div class="standard-text">
-        <span class=external>Calibre</span> is an external program that you can install on your computer. You can import highlights into your <span class=external>Calibre</span> database with its <span class=external>KOReader Sync</span> plugin. You can install the mentioned plugin within the <span class=external>Calibre</span> application. Check the project page for download and instructions:
+        <span class="external">Calibre</span> is an external program that you can install on your computer. You can import highlights into your <span class="external">Calibre</span> database with its <span class="external">KOReader Sync</span> plugin. You can install the mentioned plugin within the <span class="external">Calibre</span> application. Check the project page for download and instructions:
         <p><a href="https://calibre-ebook.com/">https://calibre-ebook.com/</a></p>
     
-        <div class=info><span class="label_blue">INFO</span>  When you open a document in KOReader, it creates a directory alongside the document with same name as the document. This directory contains a .LUA file which includes all the highlights, notes and user options (formatting properties etc.) related to that document. You can manually backup/restore these directories.
+        <div class="info"><span class="label_blue">INFO</span> When you open a document in KOReader, it creates a directory alongside the document with same name as the document. This directory contains a .LUA file which includes all the highlights, notes and user options (formatting properties etc.) related to that document. You can manually backup/restore these directories.
         </div>
     </div>
 
 
 <!-- ANCHOR READING PDFS -->
 
-    <div class="L1-Chapter-heading"  id="pdfs">READING PDFS</div>
+    <div class="L1-Chapter-heading" id="pdfs">READING PDFS</div>
 
     <div class="L2-Sub-heading" id="readingpdfs">Reading large PDFs on a small screen</div>
     <div class="standard-text">
     KOReader provides you many ways to read a PDF/DJVU document which is optimized for bigger (generally it is A4 or Letter) page sizes on your smaller screen device:
     
-    <div class="L3-Smaller-heading">1. You can enable <span class=ui>REFLOW</span></div>
+    <div class="L3-Smaller-heading">1. You can enable <span class="ui">REFLOW</span></div>
 
-    <div class="menu-breadcrumbs">⇓ BOTTOM MENU →  <img class="img_inline" src="pictures/bottom_font.svg" style="width:26px;"> → Reflow</div>
+    <div class="menu-breadcrumbs">⇓ BOTTOM MENU → <img class="img_inline" src="pictures/bottom_font.svg" style="width:26px;"> → Reflow</div>
    
     <p>Reflow tries to extract the text portion from your document (if it is available) and format it as a single column. Results are generally satisfactory. You can also set this as <b>DEFAULT</b> by tapping and holding on it.</p>
   
     
-    <div class="L3-Smaller-heading">2. You can enable <span class=ui>ZOOM TO CONTENT</span></div>
+    <div class="L3-Smaller-heading">2. You can enable <span class="ui">ZOOM TO CONTENT</span></div>
 
     <div class="menu-breadcrumbs">⇓ BOTTOM MENU → <img loading="lazy" class="img_inline" src="pictures/bottom_fit.svg" style="width:26px;"> → <img loading="lazy" class="img_inline" src="pictures/bottom_fit_content.svg" style="width:26px;"></div>
         
     <img loading="lazy" src="pictures/bottom_pdf_3.png" style="width:600px;">
 
  
-    <p>With this option KOReader tries to crop margins from your document so text may look bigger on your screen. You can set <span class=ui>FIT</span> to <span class=ui>WIDTH</span> in the same menu which will try to fit only page width instead of whole page, so your text will look bigger.</p>
+    <p>With this option KOReader tries to crop margins from your document so text may look bigger on your screen. You can set <span class="ui">FIT</span> to <span class="ui">WIDTH</span> in the same menu which will try to fit only page width instead of whole page, so your text will look bigger.</p>
 
-    <div class="L3-Smaller-heading">3. You can try to use your device in <span class=ui>LANDSCAPE</span> orientation</div>
+    <div class="L3-Smaller-heading">3. You can try to use your device in <span class="ui">LANDSCAPE</span> orientation</div>
  
     <p>This will make your screen wider so your document may look big enough to read comfortably.</p>
 
@@ -1865,7 +1853,7 @@
     <div class="L3-Smaller-heading">4. You can see your document at full size and scroll the screen to read different parts</div>
     
 
-    <p>This is especially helpful with comic books. First enable <span class=ui>COLUMN MODE</span> from this menu item:</p>
+    <p>This is especially helpful with comic books. First enable <span class="ui">COLUMN MODE</span> from this menu item:</p>
 
     <div class="menu-breadcrumbs">⇓ BOTTOM MENU → <img loading="lazy" class="img_inline" src="pictures/bottom_fit.svg" style="width:26px;"> → <img class="img_inline" src="pictures/bottom_fit_column.svg" style="width:26px;"></div>
 
@@ -1885,7 +1873,7 @@
     <img loading="lazy" src="pictures/flow_pattern_LDL.svg" style="width:50px;"></li>
     </ul>
 
-    <p>In this mode you can also adjust <span class=ui>Horizontal/Vertical Overlap</span> and <span class=ui>Number of Columns</span> from the same menu to fit the text on your screen better. Feel free to experiment with these settings.</p>
+    <p>In this mode you can also adjust <span class="ui">Horizontal/Vertical Overlap</span> and <span class="ui">Number of Columns</span> from the same menu to fit the text on your screen better. Feel free to experiment with these settings.</p>
     </div>
 
 
@@ -1894,38 +1882,37 @@
     <img loading="lazy" src="pictures/bottom_pdf_6.png" style="width:400px;">
 
     <div class="standard-text">
-    <p><span class=ui>CONTRAST</span> This setting adjusts black levels in your document. Be aware that same contrast value applies to both text and images in your document. If you set it very high, your images may become too dark to be readable.</p>
-    <p><span class=ui>DEWATERMARK</span> Removes watermarks from the rendered document. It can also be used to remove gray backgrounds. This feature can convert a grayscale or color document to black & white to produce more contrast for easier reading.</p>
-    <p><span class=ui>RENDER QUALITY</span> <b>(REFLOW  MODE)</b> Sets the quality of text and image extraction processing and output. <span class=ui>HIGH</span> is more pleasing but it can be much slower (several seconds for page turn) than <span class=ui>DEFAULT</span> depending on your document. If your PDF/DJVU files are slow, this is the first setting you should check.</p>
+    <p><span class="ui">CONTRAST</span> This setting adjusts black levels in your document. Be aware that same contrast value applies to both text and images in your document. If you set it very high, your images may become too dark to be readable.</p>
+    <p><span class="ui">DEWATERMARK</span> Removes watermarks from the rendered document. It can also be used to remove gray backgrounds. This feature can convert a grayscale or color document to black & white to produce more contrast for easier reading.</p>
+    <p><span class="ui">RENDER QUALITY</span> <b>(REFLOW MODE)</b> Sets the quality of text and image extraction processing and output. <span class="ui">HIGH</span> is more pleasing but it can be much slower (several seconds for page turn) than <span class="ui">DEFAULT</span> depending on your document. If your PDF/DJVU files are slow, this is the first setting you should check.</p>
         
     <hr>
         
     <img loading="lazy" src="pictures/bottom_pdf_7.png" style="width:400px;">
     
-    <p><span class=ui>DOCUMENT LANGUAGE</span> Sets the language to be used by the OCR engine.</p>
-    <p><span class=ui>FORCED OCR</span> Force the use of OCR even if the document has a text layer</p>
-    <p><span class=ui>WRITING DIRECTION</span> <b>(REFLOW  MODE)</b> Text direction of original document. Set to RTL for languages like Arabic and Hebrew.</p>
-    <p><span class=ui>DOCUMENT COLUMNS</span> <b>(REFLOW  MODE)</b> Number of text columns in the original document.</p>
+    <p><span class="ui">DOCUMENT LANGUAGE</span> Sets the language to be used by the OCR engine.</p>
+    <p><span class="ui">FORCED OCR</span> Force the use of OCR even if the document has a text layer</p>
+    <p><span class="ui">WRITING DIRECTION</span> <b>(REFLOW MODE)</b> Text direction of original document. Set to RTL for languages like Arabic and Hebrew.</p>
+    <p><span class="ui">DOCUMENT COLUMNS</span> <b>(REFLOW MODE)</b> Number of text columns in the original document.</p>
         
     <hr>
 
     <img loading="lazy" src="pictures/bottom_pdf_2.png" style="width:400px;">
 
-    <p><span class=ui>AUTO STRAIGHTEN</span> feature can straighten the pages of a problematic document, for example pages of a PDF which are scanned with an angle. It is available in <b>PDF, DJVU, CBZ/CBT</b> documents and <b>image</b> files. To enable, choose the maximum tilt angle which KOReader will try to correct. If it doesn’t correct you might have to choose a bigger angle. Note that this feature <b>might slow down your reader</b> depending on several factors.</p>
+    <p><span class="ui">AUTO STRAIGHTEN</span> feature can straighten the pages of a problematic document, for example pages of a PDF which are scanned with an angle. It is available in <b>PDF, DJVU, CBZ/CBT</b> documents and <b>image</b> files. To enable, choose the maximum tilt angle which KOReader will try to correct. If it doesn’t correct you might have to choose a bigger angle. Note that this feature <b>might slow down your reader</b> depending on several factors.</p>
     </div>
     
     <div class="L2-Sub-heading" id="ocr">OCR (Optical Character Recognition)</div>
     <div class="standard-text">
-    <b>OCR (Optical Character Recognition)</b> is the process of extracting text from images into machine readable format. In KOReader context, it is generally used for extracting text from scanned book pages in PDF files. KOReader relies on <span class=external>Tesseract Open Source OCR Engine</span> for this task (<a href="https://github.com/tesseract-ocr/tessdoc">https://github.com/tesseract-ocr/tessdoc</a>).
+    <b>OCR (Optical Character Recognition)</b> is the process of extracting text from images into machine readable format. In KOReader context, it is generally used for extracting text from scanned book pages in PDF files. KOReader relies on <span class="external">Tesseract Open Source OCR Engine</span> for this task (<a href="https://github.com/tesseract-ocr/tessdoc">https://github.com/tesseract-ocr/tessdoc</a>).
     
     <p>In order to use this feature you need to:</p>
     <ol>
-        <li>Install <span class=external>Tesseract</span> language data to your KOReader</li>
-        <li>Add newly installed languages to koreader/defaults.lua configuration file
-    (necessary only if your language is other than English or Chinese)</li>
+        <li>Install <span class="external">Tesseract</span> language data to your KOReader</li>
+        <li>Add newly installed languages to koreader/defaults.lua configuration file (necessary only if your language is other than English or Chinese)</li>
     </ol>
     
-    <div class=info><span class="label_blue">INFO</span> Buttons on OCR menu <b>will not function</b> until you install the necessary Tesseract files. Details of this process can be read in the related wiki page: <a href="https://github.com/koreader/koreader/wiki/Dictionary-support#dictionary-lookups-in-scanned-pages">https://github.com/koreader/koreader/wiki/Dictionary-support#dictionary-lookups-in-scanned-pages</a>
+    <div class="info"><span class="label_blue">INFO</span> Buttons on OCR menu <b>will not function</b> until you install the necessary Tesseract files. Details of this process can be read in the related wiki page: <a href="https://github.com/koreader/koreader/wiki/Dictionary-support#dictionary-lookups-in-scanned-pages">https://github.com/koreader/koreader/wiki/Dictionary-support#dictionary-lookups-in-scanned-pages</a>
     </div>
     </div>
 
@@ -1939,7 +1926,7 @@
     
     <img loading="lazy" src="pictures/panel_zoom.png" style="width:600px;">
     
-    <p>If you want to use this feature with other file types like EPUB, FB2, HTML or image files, you should open the file with a different engine: In the <span class=ui>File Browser</span> long-tap on the file name, tap <span class=ui>Open with…</span> and select <span class=ui>MuPDF</span>.</p>
+    <p>If you want to use this feature with other file types like EPUB, FB2, HTML or image files, you should open the file with a different engine: In the <span class="ui">File Browser</span> long-tap on the file name, tap <span class="ui">Open with…</span> and select <span class="ui">MuPDF</span>.</p>
     </div>
 
 
@@ -1953,7 +1940,7 @@
 <div class="standard-text">
 KOReader supports <b>PDF, EPUB, DJVU, MOBI, CBZ, CBT, DOCX, RTF, HTML, TXT, XPS, FB2, PDB, CHM and ZIP</b> files.
 
-<p>KOReader can reflow PDF documents (this option can be found in the bottom menu while reading a fixed-layout document like PDF) to make them suitable for the small screens of e-readers. But for best results, you may want to convert your documents into more flexible EPUB format. You can use <span class=external>Calibre</span> (<a href="https://calibre-ebook.com/">https://calibre-ebook.com/</a>) for all kinds of conversion between formats.</p>
+<p>KOReader can reflow PDF documents (this option can be found in the bottom menu while reading a fixed-layout document like PDF) to make them suitable for the small screens of e-readers. But for best results, you may want to convert your documents into more flexible EPUB format. You can use <span class="external">Calibre</span> (<a href="https://calibre-ebook.com/">https://calibre-ebook.com/</a>) for all kinds of conversion between formats.</p>
 
 <p>There are many ways to transfer your documents to your device. Note that you may need to restart KOReader to index the transferred documents (or refresh directory if you have Pocketbook/Android).</p>
 
@@ -1962,15 +1949,15 @@
 
 <ol>
     <li><b>USB mass storage mode within KOReader:</b> This mode is available for KOBO and some CERVANTES devices.</li>
-    <li><b>Cloud storage (<span class=external>Dropbox</span>/FTP/Webdav):</b> To use this function you have to add accounts for a cloud storage server via  menu shown below. Process is explained via <span class=ui>INFO</span> buttons while adding accounts:
+    <li><b>Cloud storage (<span class="external">Dropbox</span>/FTP/Webdav):</b> To use this function you have to add accounts for a cloud storage server via menu shown below. Process is explained via <span class="ui">INFO</span> buttons while adding accounts:
 
     <div class="menu-breadcrumbs">⇑ TOP MENU (in File Browser) → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → Cloud storage</div>
     </li>
 
-    <li><b>SSH/SFTP access:</b> KOReader can act like an <b>SSH server</b>, which you can access from a computer to transfer files (available on Kobo, Kindle, Cervantes). You can use an SFTP application (like <span class=external>Filezilla</span>) or access via your file manager if your operating system supports. Check wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/SSH">https://github.com/koreader/koreader/wiki/SSH</a></li>
-    <li><b>Calibre transfer:</b> With the <span class=external>Calibre plugin</span> you can send documents from your Calibre Library directly to your KOReader devices via a wifi connection. Check wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/Calibre-wireless-connection">https://github.com/koreader/koreader/wiki/Calibre-wireless-connection</a></li>
+    <li><b>SSH/SFTP access:</b> KOReader can act like an <b>SSH server</b>, which you can access from a computer to transfer files (available on Kobo, Kindle, Cervantes). You can use an SFTP application (like <span class="external">Filezilla</span>) or access via your file manager if your operating system supports. Check wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/SSH">https://github.com/koreader/koreader/wiki/SSH</a></li>
+    <li><b>Calibre transfer:</b> With the <span class="external">Calibre plugin</span> you can send documents from your Calibre Library directly to your KOReader devices via a wifi connection. Check wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/Calibre-wireless-connection">https://github.com/koreader/koreader/wiki/Calibre-wireless-connection</a></li>
     <li><b>News downloader:</b> With this plugin you can download <b>RSS and Atom</b> news entries as HTML files. Check wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/News-downloader">https://github.com/koreader/koreader/wiki/News-downloader</a></li>
-    <li><b>Wallabag:</b> With this plugin you can retrieve articles from <span class=external>Wallabag</span>, a server based read-it-later service like Pocket. Check wiki page for more info: <a href="https://github.com/koreader/koreader/wiki/Wallabag">https://github.com/koreader/koreader/wiki/Wallabag</a></li>
+    <li><b>Wallabag:</b> With this plugin you can retrieve articles from <span class="external">Wallabag</span>, a server based read-it-later service like Pocket. Check wiki page for more info: <a href="https://github.com/koreader/koreader/wiki/Wallabag">https://github.com/koreader/koreader/wiki/Wallabag</a></li>
 </ol>
 </div>
 
@@ -1978,17 +1965,17 @@
 <div class="standard-text">
 Some books don’t come with proper book covers. Or they may have their cover on the second page so it doesn’t show up properly. Or maybe the cover is not suitable for e-ink (too light or dark). Or you prefer to set some image from the book as cover.
 
-<p>In situations like this you can quickly take a screenshot and set it as the current book’s cover. Screenshot gesture is a <b>long diagonal swipe</b> by default. Also <b>touching opposing diagonal corners</b> will take a screenshot. You can use this second shortcut when viewing an image. After taking your screenshot you can select <span class=ui>Set as book cover</span> from the dialog.</p>
+<p>In situations like this you can quickly take a screenshot and set it as the current book’s cover. Screenshot gesture is a <b>long diagonal swipe</b> by default. Also <b>touching opposing diagonal corners</b> will take a screenshot. You can use this second shortcut when viewing an image. After taking your screenshot you can select <span class="ui">Set as book cover</span> from the dialog.</p>
 
 <p>You can remove this custom book cover here:</p>
 
 <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_hamburger.svg" style="width:26px;"> → Book information</div>
 
-<p>On the book information page, long-press on the <span class=ui>Cover image</span> item and then select <span class=ui>Reset custom</span>.</p>
+<p>On the book information page, long-press on the <span class="ui">Cover image</span> item and then select <span class="ui">Reset custom</span>.</p>
 
-<p>You can also reset the book cover with the <span class=ui>Reset</span> dialog, which you can access by long-pressing the filename in the <span class=ui>File Browser</span>.</p>
+<p>You can also reset the book cover with the <span class="ui">Reset</span> dialog, which you can access by long-pressing the filename in the <span class="ui">File Browser</span>.</p>
 
-<div class=warning>
+<div class="warning">
 <span class="label_red">WARNING</span> Be very careful when using this <b>Reset</b> dialog and be sure that only <b>Custom cover image</b> item is checked otherwise you can reset everything related to your book accidentally.
 </div>
 
@@ -1997,15 +1984,15 @@
 <div class="L2-Sub-heading" id="optimizing">Optimizing EPUB/PDF documents for your mobile reader device</div>
 
 <div class="standard-text">
-Most widely used applications for converting or optimizing your document for your mobile reading device are <span class=external>Calibre</span> (<b>EPUB, Kindle</b> focused) and <span class=external>K2pdfopt</span> (<b>PDF</b> focused).
+Most widely used applications for converting or optimizing your document for your mobile reading device are <span class="external">Calibre</span> (<b>EPUB, Kindle</b> focused) and <span class="external">K2pdfopt</span> (<b>PDF</b> focused).
 
-<p><span class=external>Calibre</span> can convert your documents between many formats. It also has a built-in editor that allows you to edit e-books (and fix problems) in the most popular e-book formats, EPUB and Kindle. <a href="https://calibre-ebook.com/">https://calibre-ebook.com/</a></p>
+<p><span class="external">Calibre</span> can convert your documents between many formats. It also has a built-in editor that allows you to edit e-books (and fix problems) in the most popular e-book formats, EPUB and Kindle. <a href="https://calibre-ebook.com/">https://calibre-ebook.com/</a></p>
 
-<p><span class=external>K2pdfopt</span> optimizes PDF/DJVU files for mobile e-readers and smartphones. It works well on multi-column PDF/DJVU files and can re-flow text even on scanned PDF files. It can also be used as a general PDF copying/cropping/re-sizing/OCR-ing manipulation tool. <a href="https://www.willus.com/k2pdfopt/">https://www.willus.com/k2pdfopt/</a></p>
+<p><span class="external">K2pdfopt</span> optimizes PDF/DJVU files for mobile e-readers and smartphones. It works well on multi-column PDF/DJVU files and can re-flow text even on scanned PDF files. It can also be used as a general PDF copying/cropping/re-sizing/OCR-ing manipulation tool. <a href="https://www.willus.com/k2pdfopt/">https://www.willus.com/k2pdfopt/</a></p>
 
-<p><span class=external>OCRmyPDF</span> is a command line application which can add an OCR text layer to scanned PDF files (containing only images without text), allowing them to be searched or copy-pasted. It can especially be useful for reading old scanned books. It can also optimize the images for a smaller file size. <a href="https://github.com/ocrmypdf/OCRmyPDF">https://github.com/ocrmypdf/OCRmyPDF</a></p>
+<p><span class="external">OCRmyPDF</span> is a command line application which can add an OCR text layer to scanned PDF files (containing only images without text), allowing them to be searched or copy-pasted. It can especially be useful for reading old scanned books. It can also optimize the images for a smaller file size. <a href="https://github.com/ocrmypdf/OCRmyPDF">https://github.com/ocrmypdf/OCRmyPDF</a></p>
 
-<p><span class=external>SingleFile</span> is a browser extension for <b>Mozilla Firefox, Google Chrome</b> and <b>Microsoft Edge</b>. This extension allows saving a web page as a single .html file with all resources (images, stylesheets, scripts) embedded. <a href="https://github.com/gildas-lormeau/SingleFile#install">https://github.com/gildas-lormeau/SingleFile#install</a></p>
+<p><span class="external">SingleFile</span> is a browser extension for <b>Mozilla Firefox, Google Chrome</b> and <b>Microsoft Edge</b>. This extension allows saving a web page as a single .html file with all resources (images, stylesheets, scripts) embedded. <a href="https://github.com/gildas-lormeau/SingleFile#install">https://github.com/gildas-lormeau/SingleFile#install</a></p>
 </div>
 
 <div class="L2-Sub-heading" id="zipfiles">ZIP file support</div>
@@ -2013,7 +2000,7 @@
 <div class="standard-text">
 KOReader can read files stored/compressed in <b>ZIP</b> files. A ZIP file can contain many types of documents like html, txt or images. KOReader can open your ZIP file properly if you give it a hint for the type of file in the ZIP archive. If you give your file only a <b>.zip</b> extension, KOReader will assume that this archive contains images and try to open it like a <b>CBZ</b> file.
 
-<p><span class=ui>DEFAULT CASE:</span>	yourfilename<b>.zip</b> - Assumed to be a zip file of images (and opened by <span class=ui>MuPDF engine</span>)</p>
+<p><span class="ui">DEFAULT CASE:</span> yourfilename<b>.zip</b> - Assumed to be a zip file of images (and opened by <span class="ui">MuPDF engine</span>)</p>
 
 <p>If your zip file contains one of these types (instead of just images), please name it accordingly:</p>
 
@@ -2026,7 +2013,7 @@
     <li><b>Plain text</b> - yourfilename.<b>txt.zip</b></li>
 </ul>
 
-<p>If the documents are not named like this, the wrong reader/format engine is likely to be used and you will see the <span class=ui>No reader engine for this file or invalid file</span> message. You can rename this file as explained above or long-press the filename and then choose <span class=ui>Open with...</span> to select the correct engine.</p>
+<p>If the documents are not named like this, the wrong reader/format engine is likely to be used and you will see the <span class="ui">No reader engine for this file or invalid file</span> message. You can rename this file as explained above or long-press the filename and then choose <span class="ui">Open with...</span> to select the correct engine.</p>
 </div>
 
 
@@ -2036,21 +2023,21 @@
 If you like reading manga books on your e-ink device there are some tips that can make your experience better. Preparing your own manga files is the best solution if you're not satisfied with how comics look on your device.
 
 <div class="L3-Smaller-heading">File type</div>
-<p>File types like MOBI and EPUB are not suitable for handling primarily image content (e.g., manga/comics).  <b>MOBI</b> support in KOReader is minimal to nonexistent, and <b>EPUB’s</b> text rendering priorities can cause problems when showing full-page images. For further technical details:</p>
+<p>File types like MOBI and EPUB are not suitable for handling primarily image content (e.g., manga/comics). <b>MOBI</b> support in KOReader is minimal to nonexistent, and <b>EPUB’s</b> text rendering priorities can cause problems when showing full-page images. For further technical details:</p>
 
 <p><a href="https://github.com/koreader/koreader/issues/9163#issuecomment-1146637205">https://github.com/koreader/koreader/issues/9163#issuecomment-1146637205</a>).
 </p>
 
-<p>Your best option is building a <b>CBZ</b> file which works better in KOReader.  A file with <b>.cbz</b> extension is a zip file (with no compression) that is a collection of images. It saves multiple images, commonly <b>.png</b> or <b>.jpeg</b> files, organized into pages of the comic. KOReader can also open <b>CBT</b> files, which are similar to <b>CBZ</b> files but use <b>TAR</b> archive format.</p>
+<p>Your best option is building a <b>CBZ</b> file which works better in KOReader. A file with <b>.cbz</b> extension is a zip file (with no compression) that is a collection of images. It saves multiple images, commonly <b>.png</b> or <b>.jpeg</b> files, organized into pages of the comic. KOReader can also open <b>CBT</b> files, which are similar to <b>CBZ</b> files but use <b>TAR</b> archive format.</p>
 
-<p>Easiest way to convert a manga to <b>CBZ</b> is to get the manga as images from various websites, then convert them using <span class=external>Kindle Comic Converter</span> (<a href="https://github.com/ciromattia/kcc">https://github.com/ciromattia/kcc</a>). There are some useful settings like <b>auto-rotating two-page splits to landscape and applying dithering</b> so that eink-rendered gradients are smoothly dithered without jagged layers.</p>
+<p>Easiest way to convert a manga to <b>CBZ</b> is to get the manga as images from various websites, then convert them using <span class="external">Kindle Comic Converter</span> (<a href="https://github.com/ciromattia/kcc">https://github.com/ciromattia/kcc</a>). There are some useful settings like <b>auto-rotating two-page splits to landscape and applying dithering</b> so that eink-rendered gradients are smoothly dithered without jagged layers.</p>
 
 <div class="L3-Smaller-heading">Resolution</div>
 <p>The best results can be achieved by resizing your images to exactly your e-reader screen size. A screen-specific <b>CBZ</b> which targets the exact screen size of the device, prevents rescaling during reading. KOReader downscales your images to your screen size while reading but this is not recommended because KOReader adds a dithering pass before scaling and this causes loss of quality.</p>
 
-<p>But if you want to use your hand made <b>CBZ</b> on more than one device or you want to preserve high resolution for future proofing, your best option might be to make the <b>CBZ</b> for your highest resolution device. Or pick an arbitrary "high" resolution,  possibly one that matches the source. <b>300 PPI</b> or better (up to <b>450</b> or even <b>600</b>), unless the source is lower of course. If we assume a screen size of <b>8", 1500×2000</b> is a good target resolution. For bigger images, you should try it on your device and see whether it can deal with it. Especially old Kindles with low memory can struggle with sizes like <b>3000×4000</b> for example. If you're automating the process, it might be worth considering creating both a lower and higher quality version (e.g., at <b>200/400</b> or <b>300/600</b> DPI).</p>
+<p>But if you want to use your hand made <b>CBZ</b> on more than one device or you want to preserve high resolution for future proofing, your best option might be to make the <b>CBZ</b> for your highest resolution device. Or pick an arbitrary "high" resolution, possibly one that matches the source. <b>300 PPI</b> or better (up to <b>450</b> or even <b>600</b>), unless the source is lower of course. If we assume a screen size of <b>8", 1500×2000</b> is a good target resolution. For bigger images, you should try it on your device and see whether it can deal with it. Especially old Kindles with low memory can struggle with sizes like <b>3000×4000</b> for example. If you're automating the process, it might be worth considering creating both a lower and higher quality version (e.g., at <b>200/400</b> or <b>300/600</b> DPI).</p>
 
-<div class=info><span class="label_blue">INFO</span> KOReader doesn't parse <b>spine page-progression-direction="rtl"</b> attribute of the books. So it doesn’t change page turning direction even though the file was created with right-to-left reading. Users can switch this via:
+<div class="info"><span class="label_blue">INFO</span> KOReader doesn't parse <b>spine page-progression-direction="rtl"</b> attribute of the books. So it doesn’t change page turning direction even though the file was created with right-to-left reading. Users can switch this via:
 </div>
 
 <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and gestures → Page turns → Invert page turn tap and swipes / buttons</div>
@@ -2062,13 +2049,13 @@
 <div class="standard-text">
 The following is an example procedure to process one manga file:
 <ul>
-    <li>Download <span class=external>Kindle Comic Converter (KCC)</span> from <a href="https://github.com/ciromattia/kcc">https://github.com/ciromattia/kcc</a></li>
-    <li>Download your manga from the source of your choosing (i.e. <span class=external>HakuNeko</span>)</li>
+    <li>Download <span class="external">Kindle Comic Converter (KCC)</span> from <a href="https://github.com/ciromattia/kcc">https://github.com/ciromattia/kcc</a></li>
+    <li>Download your manga from the source of your choosing (i.e. <span class="external">HakuNeko</span>)</li>
     <li>Unpack the manga file. Now you should have a directory that contains only images (or subdirectories with images, no archives)</li>
-    <li>Process this directory with <span class=external>KCC</span>. Each directory will produce a single <b>CBZ</b> file, so if you want to make several volumes at once, select multiple directories at once</li>
+    <li>Process this directory with <span class="external">KCC</span>. Each directory will produce a single <b>CBZ</b> file, so if you want to make several volumes at once, select multiple directories at once</li>
 </ul>
 
-<p>Some useful settings of <span class=external>KCC</span>:</p>
+<p>Some useful settings of <span class="external">KCC</span>:</p>
 <p><b>Spread splitter:</b> This feature detects double pages and allows you to rotate or cut them in two.</p>
 <p><b>Upscaling:</b> Enlarge images that is smaller than your target resolution.</p>
 </div>
@@ -2080,20 +2067,19 @@
 </div>
 
 
-<div class="L3-Smaller-heading">Extra step for smooth gradients <span class=warning><span class="label_red">!!! ADVANCED</span></span></div>
+<div class="L3-Smaller-heading">Extra step for smooth gradients <span class="warning"><span class="label_red">!!! ADVANCED</span></span></div>
 
 <div class="standard-text">
-After using <span class=external>KCC</span> to create a <b>CBZ</b> file, you can apply additional <b>dithering</b> to the images. This way, eink-rendered gradients will be smoothly dithered without jagged layers. This step will produce fine-tuned manga volumes which look better in KOReader.
+After using <span class="external">KCC</span> to create a <b>CBZ</b> file, you can apply additional <b>dithering</b> to the images. This way, eink-rendered gradients will be smoothly dithered without jagged layers. This step will produce fine-tuned manga volumes which look better in KOReader.
 
-<p>You can use <span class=external>ImageMagick</span> to process your images. <span class=external>ImageMagick</span>, is a powerful open-source software suite for displaying, creating, converting, modifying, and editing raster images. You can download <span class=external>ImageMagick</span> and use it from the command line to process many images at once.</p>
+<p>You can use <span class="external">ImageMagick</span> to process your images. <span class="external">ImageMagick</span>, is a powerful open-source software suite for displaying, creating, converting, modifying, and editing raster images. You can download <span class="external">ImageMagick</span> and use it from the command line to process many images at once.</p>
 
 <ol>
-    <li>Unpack the prepared <b>CBZ</b> file that you created with <span class=external>KCC</span>,</li>
-    <li>Download the following file (<b>dither_pack.zip</b>) which contains two <b>batch files (.BAT)</b> and a <b>GIF</b> color template:
-        <a href="https://disk.yandex.com/d/glEebjmPYYp7og">https://disk.yandex.com/d/glEebjmPYYp7og</a></li>
+    <li>Unpack the prepared <b>CBZ</b> file that you created with <span class="external">KCC</span>,</li>
+    <li>Download the following file (<b>dither_pack.zip</b>) which contains two <b>batch files (.BAT)</b> and a <b>GIF</b> color template: <a href="https://disk.yandex.com/d/glEebjmPYYp7og">https://disk.yandex.com/d/glEebjmPYYp7og</a></li>
     <li>Extract these three files next to your images that will be processed</li>
     <li>Edit the <b>_magick_manga_ditherN_resize.bat</b> and change the resolution to your device resolution (in both places in the <b>BAT</b> file).
-    <p class=warning><span class="label_red">WARNING</span> Next step will replace all the images in the directory with the processed ones. So make sure that you have a copy of them in some other directory if you want to keep the originals.</p>
+    <p class="warning"><span class="label_red">WARNING</span> Next step will replace all the images in the directory with the processed ones. So make sure that you have a copy of them in some other directory if you want to keep the originals.</p>
     </li>
     <li>Run <b>_magick_manga_ditherN_resize.bat</b> to resize and dither the images.</li>
     <li>Assuming you have <b>7-Zip</b> installed, run <b>_batch_archive.bat</b> to pack all the processed images into a <b>CBZ</b> archive.</li>
@@ -2101,17 +2087,10 @@
 
 </div>
 
-<div class="L3-Smaller-heading">Reversing the page turn direction for authentic Japanese manga <span class=warning><span class="label_red">!!! ADVANCED</span></span></div>
+<div class="L3-Smaller-heading">Reversing the page turn direction for authentic Japanese manga <span class="warning"><span class="label_red">!!! ADVANCED</span></span></div>
 
 <div class="standard-text">
-You can make KOReader turn pages from <b>Left to Right</b>, so that swipes and tap zones are swapped. To enable this, add the following lines to this file →  <span class=ui>/koreader/settings/directory_defaults.lua</span>
-<br><br>
-<span class=ui>
-    ["/storage/emulated/0/Books/manga"] = {<br>
-    ["inverse_reading_order"] = true,<br>
-    ["kopt_zoom_direction"] = 0,<br>
-    },
-</span>
+You can make KOReader turn pages from <b>Left to Right</b>, so that swipes and tap zones are swapped. To enable this, add the following lines to this file → <span class="ui">/koreader/settings/directory_defaults.lua</span> <br><br> <span class="ui"> ["/storage/emulated/0/Books/manga"] = {<br> ["inverse_reading_order"] = true,<br> ["kopt_zoom_direction"] = 0,<br> }, </span>
 
 <p>where <b>/storage/emulated/0/Books/manga</b> is the absolute path to the directory containing your mangas. After this change, when you open a file from the mentioned directory, your swipes and tap zones will be swapped.</p>
 </div>
@@ -2119,18 +2098,18 @@
 
 <div class="L3-Smaller-heading">Tip when reading serialized books like manga</div>
 <div class="standard-text">
-When you reach the last page of a book, KOReader shows you a dialog. In this dialog there is an <span class=ui>Open next file</span> action which will open the next file in the same directory as the current book. So you can put your series in separate directories and read them one after another without going back to the <span class=ui>File Browser</span>.
+When you reach the last page of a book, KOReader shows you a dialog. In this dialog there is an <span class="ui">Open next file</span> action which will open the next file in the same directory as the current book. So you can put your series in separate directories and read them one after another without going back to the <span class="ui">File Browser</span>.
 
 <img loading="lazy" src="pictures/open_next_file.png" style="width:450px;">
 
-<p> When opening this next file, KOReader skips the files that you have marked as <b>finished</b>. This feature is useful for example when you have a folder of manga files and you have already read some of them. You can mark a file as finished from the end of book dialog shown above. Also you can mark it from the <span class=ui>File Browser</span> by long-pressing on the file. After copying them to your device, you can: </p>
+<p> When opening this next file, KOReader skips the files that you have marked as <b>finished</b>. This feature is useful for example when you have a folder of manga files and you have already read some of them. You can mark a file as finished from the end of book dialog shown above. Also you can mark it from the <span class="ui">File Browser</span> by long-pressing on the file. After copying them to your device, you can: </p>
 
 <ul>
-<li>Open the <span class=ui>File Browser</span> in KOReader</li>
-<li>Long press on the ones you already finished and tap <span class=ui>Mark as finished</span></li>
+<li>Open the <span class="ui">File Browser</span> in KOReader</li>
+<li>Long press on the ones you already finished and tap <span class="ui">Mark as finished</span></li>
 </ul>
 
-<p>Now you can read all the files by just tapping <span class=ui>Open next file</span> at the end of the book. KOReader will skip the ones you have already read.</p>
+<p>Now you can read all the files by just tapping <span class="ui">Open next file</span> at the end of the book. KOReader will skip the ones you have already read.</p>
 
 </div>
 
@@ -2138,12 +2117,12 @@
 
 <!-- ANCHOR GESTURES AND KEYBOARD SHORTCUTS -->
 
-    <div class="L1-Chapter-heading"  id="gestures">GESTURES AND KEYBOARD SHORTCUTS</div>
+    <div class="L1-Chapter-heading" id="gestures">GESTURES AND KEYBOARD SHORTCUTS</div>
 
     <div class="standard-text">
     There are many types of gestures you can use to control KOReader. Some gestures have limitations regarding where on the screen they can be used and which directions are supported. These limitations are indicated below.
 
-    <div class=info><span class="label_blue">INFO</span> Some devices support only single touch. So multi-finger gestures <b>are not available</b> on them.</div>
+    <div class="info"><span class="label_blue">INFO</span> Some devices support only single touch. So multi-finger gestures <b>are not available</b> on them.</div>
 
     </div>
 
@@ -2152,7 +2131,7 @@
 
         <div class="standard-text">
         <img loading="lazy" src="pictures/gesture_tap.png" style="width:100px;">
-        <p class=ui>TAP / DOUBLE TAP</p>
+        <p class="ui">TAP / DOUBLE TAP</p>
         <p>Single or double tap with <b>ONE</b> finger</p>
         <p><b>WORKS:</b> Anywhere on the screen</p>
         </div>
@@ -2161,7 +2140,7 @@
         
         <div class="standard-text">
         <img loading="lazy" src="pictures/gesture_tapandhold.png" style="width:100px;">
-        <p class=ui>TAP AND HOLD</p>
+        <p class="ui">TAP AND HOLD</p>
         <p>Single tap and hold with <b>ONE</b> finger</p>
         <p><b>WORKS:</b> Only on four corners</p>
         </div>
@@ -2170,7 +2149,7 @@
 
         <div class="standard-text">
         <img loading="lazy" src="pictures/gesture_twofingertap.png" style="width:100px;">
-        <p class=ui>TWO FINGER TAP</p>
+        <p class="ui">TWO FINGER TAP</p>
         <p>Single tap with <b>TWO</b> fingers at the same time</p>
         <p><b>WORKS:</b> Only on four corners</p>
         </div>
@@ -2179,10 +2158,10 @@
 
         <div class="standard-text">
         <img loading="lazy" src="pictures/gesture_pinch.png" style="width:100px;">
-        <p class=ui>SPREAD AND PINCH</p>
+        <p class="ui">SPREAD AND PINCH</p>
         <p>Same gesture as zooming in and out on a mobile phone, tablet etc.</p>
         <p><b>WORKS:</b> Anywhere on the screen</p>
-        <div class=info><span class="label_blue">INFO</span> This gesture may work less reliably depending on your device. If that’s the case please choose another gesture type.</div>
+        <div class="info"><span class="label_blue">INFO</span> This gesture may work less reliably depending on your device. If that’s the case please choose another gesture type.</div>
         </div>
         
     </div>
@@ -2190,16 +2169,16 @@
     
         <div class="standard-text">
         <img loading="lazy" src="pictures/gesture_swipe.png" style="width:100px;">
-        <p class=ui>ONE FINGER SWIPE</p>
+        <p class="ui">ONE FINGER SWIPE</p>
         <p>Swiping motion with <b>ONE</b> finger</p>
-        <p><b>WORKS:</b> Screen edges (HORIZONTAL and VERTICAL)  Anywhere except edges (DIAGONAL) </p>
+        <p><b>WORKS:</b> Screen edges (HORIZONTAL and VERTICAL) Anywhere except edges (DIAGONAL) </p>
         </div>
 
     <hr>
 
         <div class="standard-text">
         <img loading="lazy" src="pictures/gesture_twofingerswipe.png" style="width:100px;">
-        <p class=ui>TWO FINGER SWIPE</p>
+        <p class="ui">TWO FINGER SWIPE</p>
         <p>Swiping motion with <b>TWO</b> fingers at the same time</p>
         <p><b>WORKS:</b> Anywhere on the screen</p>
         </div>
@@ -2208,9 +2187,8 @@
 
         <div class="standard-text">
         <img loading="lazy" src="pictures/gesture_multiswipe.png" style="width:100px;">
-        <p class=ui>MULTISWIPE</p>
-        <p>More than one swipe done after each other without lifting your finger.
-        For example like drawing the letter <b>U</b> (DOWN-RIGHT-UP)</p>
+        <p class="ui">MULTISWIPE</p>
+        <p>More than one swipe done after each other without lifting your finger. For example like drawing the letter <b>U</b> (DOWN-RIGHT-UP)</p>
         <p><b>WORKS:</b> Anywhere on the screen</p>
 
         <hr>
@@ -2290,7 +2268,7 @@
 
     <div class="L2-Sub-heading" id="gesturecategories">Gesture Categories</div>
     <div class="standard-text">
-        This is a list of every action that you can assign to a gesture using the <span class=ui>Gesture Manager</span> menu. You can use the search function of your browser (generally <b>Ctrl+F</b>) to search for an action here. These actions can also be used in your own <span class=ui>Quick Menu</span>. Please check the relevant section in the guide for more info.
+        This is a list of every action that you can assign to a gesture using the <span class="ui">Gesture Manager</span> menu. You can use the search function of your browser (generally <b>Ctrl+F</b>) to search for an action here. These actions can also be used in your own <span class="ui">Quick Menu</span>. Please check the relevant section in the guide for more info.
     </div>
 
     <div class="double-container">
@@ -2653,9 +2631,9 @@
 
     <div class="L2-Sub-heading" id="quickmenu">Quick Menu</div>
     <div class="standard-text">
-        <span class=ui>Quick Menu</span> is a recent feature of KOReader which allows you to have a quickly accessible personalized menu. You can assign this menu to a gesture and access it with a single swipe. You can see an example menu on the right. You can even have a menu longer than your screen, it is scrollable.
+        <span class="ui">Quick Menu</span> is a recent feature of KOReader which allows you to have a quickly accessible personalized menu. You can assign this menu to a gesture and access it with a single swipe. You can see an example menu on the right. You can even have a menu longer than your screen, it is scrollable.
 
-        <p>Basically, any action you can assign a gesture can be added to the <span class=ui>Quick Menu</span>. Its advantages are:</p>
+        <p>Basically, any action you can assign a gesture can be added to the <span class="ui">Quick Menu</span>. Its advantages are:</p>
 
         <ol>
             <li>You don’t need to memorize lots of gestures for every action.</li>
@@ -2668,19 +2646,19 @@
         <img loading="lazy" src="pictures/quickmenu_example.png" style="width:500px;">
 
         
-        <p>There are two methods for creating a <span class=ui>Quick Menu</span>. <b>Easy</b> and <b>Advanced</b>. If you need only one menu, <b>Easy method</b> should be enough for you. If you want show different menus with different gestures you need to use <b>Advanced method</b>.  Another advantage of <b>Advanced method</b> is that, if you want to use another gesture for your menu you can easily move it to another gesture. If you want to use another gesture while using the <b>Easy method</b>, you have to re-create your menu under the new gesture.</p>
+        <p>There are two methods for creating a <span class="ui">Quick Menu</span>. <b>Easy</b> and <b>Advanced</b>. If you need only one menu, <b>Easy method</b> should be enough for you. If you want show different menus with different gestures you need to use <b>Advanced method</b>. Another advantage of <b>Advanced method</b> is that, if you want to use another gesture for your menu you can easily move it to another gesture. If you want to use another gesture while using the <b>Easy method</b>, you have to re-create your menu under the new gesture.</p>
     </div>
 
 
         <div class="L3-Smaller-heading">Easy method</div>
         <div class="standard-text">
             <ol>
-                <li>Go to <span class=ui>Gesture Manager</span> menu via:
+                <li>Go to <span class="ui">Gesture Manager</span> menu via:
                     <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and Gestures → Gesture Manager</div></li>
                 <li>Decide a gesture for opening your menu and tap on it.</li>
                 <li>Choose the actions you want to see in your menu from the gesture configuration menu. You can select many actions at once of course.</li>
-                <li>After selecting all your actions, you will tell KOReader to treat this gesture as a menu. You achieve this by enabling <span class=ui>Show as Quick Menu</span> item on the second page as you can see <b>in the picture below</b>.</li>
-                <li>You can sort your menu items with the <span class=ui>Sort</span> option just below it.</li>
+                <li>After selecting all your actions, you will tell KOReader to treat this gesture as a menu. You achieve this by enabling <span class="ui">Show as Quick Menu</span> item on the second page as you can see <b>in the picture below</b>.</li>
+                <li>You can sort your menu items with the <span class="ui">Sort</span> option just below it.</li>
             </ol>
         <p>Now you can launch your menu with the gesture you selected. If you want to change the menu items, you can open the gesture page and add/remove items.</p>
         </div>
@@ -2690,22 +2668,22 @@
         <div class="L3-Smaller-heading">Advanced method</div>
         <div class="standard-text">
 
-            <div class=info><span class="label_blue">INFO</span> As we said above, if you are not planning to add more than one <span class=ui>Quick Menu</span> you don’t need this section.
+            <div class="info"><span class="label_blue">INFO</span> As we said above, if you are not planning to add more than one <span class="ui">Quick Menu</span> you don’t need this section.
             </div>
 
-        <p><span class=ui>Quick Menu</span> is actually a <span class=ui>Profile</span> which appears on your screen as a menu. So first you have to learn about <span class=ui>Profiles</span>. If you already know how to use <span class=ui>Profiles</span>, you can continue reading, otherwise jump to the <span class=ui>Profiles</span> heading (next section), create a <span class=ui>Profile</span> with some items and come back here.</p>
+        <p><span class="ui">Quick Menu</span> is actually a <span class="ui">Profile</span> which appears on your screen as a menu. So first you have to learn about <span class="ui">Profiles</span>. If you already know how to use <span class="ui">Profiles</span>, you can continue reading, otherwise jump to the <span class="ui">Profiles</span> heading (next section), create a <span class="ui">Profile</span> with some items and come back here.</p>
         
-        <p>We assume that you already created a <span class=ui>Profile</span> as instructed in the previous paragraph. Now we will turn our <span class=ui>Profile</span> into a <span class=ui>Quick Menu</span>.</p>
+        <p>We assume that you already created a <span class="ui">Profile</span> as instructed in the previous paragraph. Now we will turn our <span class="ui">Profile</span> into a <span class="ui">Quick Menu</span>.</p>
 
-        <p>1. Go to your newly created <span class=ui>Profile</span> and enable <span class=ui>Show in action list</span> (shown in the image below). This will make your <span class=ui>Profile</span> visible in the <span class=ui>Gesture Manager</span>. Also enable <span class=ui>Show as Quick Menu</span> (also in the image below) so your profile will be shown as a menu instead of being silently executed.</p>
+        <p>1. Go to your newly created <span class="ui">Profile</span> and enable <span class="ui">Show in action list</span> (shown in the image below). This will make your <span class="ui">Profile</span> visible in the <span class="ui">Gesture Manager</span>. Also enable <span class="ui">Show as Quick Menu</span> (also in the image below) so your profile will be shown as a menu instead of being silently executed.</p>
         
         <img loading="lazy" src="pictures/quickmenu_advanced.png" style="width:800px;">
 
-        <p>2. Now we need a way to access our menu. Go to the <span class=ui>Gesture Manager</span> and choose a gesture from the list to assign to our menu. Let’s say we want to tap the corner of the screen to show menu. Now tap on <span class=ui>Tap corner</span> then choose <span class=ui>Bottom left</span>. Now tap on <span class=ui>General</span> and go to the second page. You will find your profile as <span class=ui>Profile x</span> where x is the name you gave to this <span class=ui>Profile</span>. Tap on its checkbox to assign your profile to this gesture.</p>
+        <p>2. Now we need a way to access our menu. Go to the <span class="ui">Gesture Manager</span> and choose a gesture from the list to assign to our menu. Let’s say we want to tap the corner of the screen to show menu. Now tap on <span class="ui">Tap corner</span> then choose <span class="ui">Bottom left</span>. Now tap on <span class="ui">General</span> and go to the second page. You will find your profile as <span class="ui">Profile x</span> where x is the name you gave to this <span class="ui">Profile</span>. Tap on its checkbox to assign your profile to this gesture.</p>
 
-        <p>After all the steps, now you should see your menu when you tap on the bottom left corner. You can edit your menu by going to its <span class=ui>Profile</span> page where you can add or remove items. Also there is a <span class=ui>Sort</span> item there so you can change the order of your menu items.</p>
+        <p>After all the steps, now you should see your menu when you tap on the bottom left corner. You can edit your menu by going to its <span class="ui">Profile</span> page where you can add or remove items. Also there is a <span class="ui">Sort</span> item there so you can change the order of your menu items.</p>
 
-        <p> As we said, a <span class=ui>Quick Menu</span> is actually a <span class=ui>Profile</span>. Which means you can have more than one menu. You can create another <span class=ui>Profile</span> and follow the same steps to create another menu if you want.</p>
+        <p> As we said, a <span class="ui">Quick Menu</span> is actually a <span class="ui">Profile</span>. Which means you can have more than one menu. You can create another <span class="ui">Profile</span> and follow the same steps to create another menu if you want.</p>
         </div>
 
         <div class="L2-Sub-heading" id="quickmenutips">Quick menu tips</div>
@@ -2741,7 +2719,7 @@
 
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;">→ Taps and Gestures → Gesture Manager → “Your Quick Menu gesture” → Anchor Quick Menu to gesture position</div>
 
-        <div class=info><span class="label_blue">INFO</span> This is available only in a Quick Menu which is created via Gesture Manager (Easy method above).
+        <div class="info"><span class="label_blue">INFO</span> This is available only in a Quick Menu which is created via Gesture Manager (Easy method above).
         </div>
 
         </div>
@@ -2759,12 +2737,12 @@
         
         <p>With the profiles plugin, you can do all these at once with a single action.</p>
         
-        <div class=info><span class="label_blue">INFO</span> When you activate another profile, changes made in the first profile <b>will not be reversed</b>. For example, you activate a profile which sets your font size from <b>20</b> to <b>24</b>. Then you activate another profile that adjusts your <b>frontlight</b>. Your font size <b>stays at 24</b> after activating the second profile. Because profiles in KOReader doesn’t have an exit or reverse action.
+        <div class="info"><span class="label_blue">INFO</span> When you activate another profile, changes made in the first profile <b>will not be reversed</b>. For example, you activate a profile which sets your font size from <b>20</b> to <b>24</b>. Then you activate another profile that adjusts your <b>frontlight</b>. Your font size <b>stays at 24</b> after activating the second profile. Because profiles in KOReader doesn’t have an exit or reverse action.
         </div>
 
-        <p>To create a profile first be sure that <span class=ui>Profiles</span> plugin is activated. If you don’t see it under:</p>
+        <p>To create a profile first be sure that <span class="ui">Profiles</span> plugin is activated. If you don’t see it under:</p>
         
-        <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> →  Profiles</div>
+        <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → Profiles</div>
         
         <p>then you have to turn it on from:</p>
         
@@ -2775,11 +2753,11 @@
         <div class="L3-Smaller-heading">Creating a profile</div>
 
         <div class="standard-text">
-        In <span class=ui>Profiles</span> menu tap <span class=ui>New</span> and give a descriptive name for your profile. Now you should see your new profile in the menu. Tap on it and you will see the screen on the left side. You can also <span class=ui>Delete, Rename</span> or <span class=ui>Duplicate</span> a profile from this menu.
+        In <span class="ui">Profiles</span> menu tap <span class="ui">New</span> and give a descriptive name for your profile. Now you should see your new profile in the menu. Tap on it and you will see the screen on the left side. You can also <span class="ui">Delete, Rename</span> or <span class="ui">Duplicate</span> a profile from this menu.
                 
         <img loading="lazy" src="pictures/profile_create.png" style="width:800px;">
 
-        <p>When you tap on <span class=ui>Edit actions</span> menu item you will see the menu on the right. This is the same menu as the gesture selection menu and there are actions in many categories. Which means you can perform any <span class=ui>Gesture</span> action using a <span class=ui>Profile</span>.</p>
+        <p>When you tap on <span class="ui">Edit actions</span> menu item you will see the menu on the right. This is the same menu as the gesture selection menu and there are actions in many categories. Which means you can perform any <span class="ui">Gesture</span> action using a <span class="ui">Profile</span>.</p>
 
         <p>You can now select several items from all these categories. The actions you selected here will be performed when you activate this profile.</p>
         </div>
@@ -2789,32 +2767,32 @@
         <div class="standard-text">
         There are many ways to activate a profile:
         <ol>
-            <li>You can activate a profile with a <b>long press</b> on its name from this same <span class=ui>Profiles</span> menu</li>
-            <li>You can activate a profile using a gesture. For this, you have to enable <span class=ui>Show in action list</span> from the profile’s menu. Now you can select it via:
+            <li>You can activate a profile with a <b>long press</b> on its name from this same <span class="ui">Profiles</span> menu</li>
+            <li>You can activate a profile using a gesture. For this, you have to enable <span class="ui">Show in action list</span> from the profile’s menu. Now you can select it via:
 
-            <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and gestures → Gesture manager → “ANY GESTURE” → General → Profile  “Your profile name”</div>
+            <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and gestures → Gesture manager → “ANY GESTURE” → General → Profile “Your profile name”</div>
             </li>
-            <li>You can also activate a profile automatically when KOReader starts if you enable <span class=ui>Autostart</span> in the Profile’s menu. Note that this is only possible when KOReader is starting with the <span class=ui>File browser</span> or <span class=ui>Last file</span>.</li>
+            <li>You can also activate a profile automatically when KOReader starts if you enable <span class="ui">Autostart</span> in the Profile’s menu. Note that this is only possible when KOReader is starting with the <span class="ui">File browser</span> or <span class="ui">Last file</span>.</li>
         </ol>
         </div>
         
-        <div class="L3-Smaller-heading">Technical details of Profiles and Quick Menu<span class=warning><span class="label_red">!!! ADVANCED</span></span></div>
+        <div class="L3-Smaller-heading">Technical details of Profiles and Quick Menu<span class="warning"><span class="label_red">!!! ADVANCED</span></span></div>
     
 
         <div class="standard-text">
         In KOReader we have <b>a set of actions/settings</b> and this set can be created in two ways:
         <ol>
-            <li>As a profile (which is explained as the <span class=ui>Advanced Method</span> and stored in <span class=ui>settings/profiles.lua</span>)</li>
-            <li>As a list of actions assigned to a gesture (which is explained as the <span class=ui>Easy Method</span> and stored in <span class=ui>settings/gestures.lua)</span></li>
+            <li>As a profile (which is explained as the <span class="ui">Advanced Method</span> and stored in <span class="ui">settings/profiles.lua</span>)</li>
+            <li>As a list of actions assigned to a gesture (which is explained as the <span class="ui">Easy Method</span> and stored in <span class="ui">settings/gestures.lua)</span></li>
         </ol>
     
         <p>This set can also be <b>executed</b> in two different ways:</p>
         <ol>
-            <li>Applying each action in the (sorted) order when triggered (as a <span class=ui>Profile</span>)</li>
-            <li>Showing it as a <span class=ui>Quick Menu</span></li>
+            <li>Applying each action in the (sorted) order when triggered (as a <span class="ui">Profile</span>)</li>
+            <li>Showing it as a <span class="ui">Quick Menu</span></li>
         </ol>
         
-        <p>Adding/removing actions of a set and enabling/sorting <span class=ui>Quick Menu</span> are done via the same <span class=ui>actions menu</span>. The only difference is that the actions menu in the Gesture manager has two more items (Pass through), that is why <span class=ui>Show as Quick Menu</span> and <span class=ui>Sort</span> items are on the second page.</p>
+        <p>Adding/removing actions of a set and enabling/sorting <span class="ui">Quick Menu</span> are done via the same <span class="ui">actions menu</span>. The only difference is that the actions menu in the Gesture manager has two more items (Pass through), that is why <span class="ui">Show as Quick Menu</span> and <span class="ui">Sort</span> items are on the second page.</p>
         </div>
 
 
@@ -2842,7 +2820,7 @@
 
         </div>
 
-        <div class="L3-Smaller-heading">Contrib <span class=warning><span class="label_red">!!! ADVANCED</span></span></div>
+        <div class="L3-Smaller-heading">Contrib <span class="warning"><span class="label_red">!!! ADVANCED</span></span></div>
         <div class="standard-text">
         This group contains non-official plugins which are not part of the core logic of KOReader.
         <ul>
@@ -2852,13 +2830,11 @@
         </ul>
     
         <p>
-            You can access them from this page:
-            <a href="https://github.com/koreader/contrib">https://github.com/koreader/contrib</a>
-            They can be installed by downloading the plugin’s directory from the page above and copying it under <span class=ui>koreader/plugins</span> folder on your device. But still check the plugin’s page for other possible instructions.
+            You can access them from this page: <a href="https://github.com/koreader/contrib">https://github.com/koreader/contrib</a> They can be installed by downloading the plugin’s directory from the page above and copying it under <span class="ui">koreader/plugins</span> folder on your device. But still check the plugin’s page for other possible instructions.
         </p>
         </div>
         
-        <div class="L3-Smaller-heading">External <span class=warning><span class="label_red">!!! ADVANCED</span></span></div>
+        <div class="L3-Smaller-heading">External <span class="warning"><span class="label_red">!!! ADVANCED</span></span></div>
         <div class="standard-text">
         These are plugins that are developed independently from the KOReader team.
         <ul>
@@ -2869,62 +2845,62 @@
                 
         <p>Some notable examples of these external plugins:</p>
         <ul>
-            <li><span class=external>AskGPT:</span> You can ask questions to <span class=external>ChatGPT</span> about parts of your book. You can also use this plugin to simplify, explain, discuss or translate text to other languages. <a href="https://github.com/drewbaumann/AskGPT">https://github.com/drewbaumann/AskGPT</a></li>
-            <li><span class=external>Anki plugin for KOReader:</span> KOReader plugin enabling <span class=external>Anki</span> (an open-source flashcard software) card generations for words looked up in the internal dictionary. <a href="https://github.com/Ajatt-Tools/anki.koplugin">https://github.com/Ajatt-Tools/anki.koplugin</a></li>
-            <li><span class=external>Zotero for KOReader:</span> This addon allows you to browse your <span class=external>Zotero</span> (an open-source reference management software) collections from KOReader. <a href="https://github.com/stelzch/zotero.koplugin">https://github.com/stelzch/zotero.koplugin</a></li>
+            <li><span class="external">AskGPT:</span> You can ask questions to <span class="external">ChatGPT</span> about parts of your book. You can also use this plugin to simplify, explain, discuss or translate text to other languages. <a href="https://github.com/drewbaumann/AskGPT">https://github.com/drewbaumann/AskGPT</a></li>
+            <li><span class="external">Anki plugin for KOReader:</span> KOReader plugin enabling <span class="external">Anki</span> (an open-source flashcard software) card generations for words looked up in the internal dictionary. <a href="https://github.com/Ajatt-Tools/anki.koplugin">https://github.com/Ajatt-Tools/anki.koplugin</a></li>
+            <li><span class="external">Zotero for KOReader:</span> This addon allows you to browse your <span class="external">Zotero</span> (an open-source reference management software) collections from KOReader. <a href="https://github.com/stelzch/zotero.koplugin">https://github.com/stelzch/zotero.koplugin</a></li>
         </ul>
     
-        <p>Also you can click this link to open a search page on <span class=external>Github</span> to discover more KOReader plugin projects: <a href="https://github.com/search?q=koplugin&type=repositories">https://github.com/search?q=koplugin&type=repositories</a></p>
+        <p>Also you can click this link to open a search page on <span class="external">Github</span> to discover more KOReader plugin projects: <a href="https://github.com/search?q=koplugin&type=repositories">https://github.com/search?q=koplugin&type;=repositories</a></p>
 
         </div>
 
         <div class="L2-Sub-heading" id="pluginslist">List of internal plugins</div>
         <div class="standard-text">
-        <p>	<b>	Auto frontlight	</b>	 - 	Automatically toggles the frontlight according to ambient light level (Only available on Kindle Voyage and Oasis)	</p>
-        <p>	<b>	Auto warmth and night mode	</b>	 - 	Allows you to adjust frontlight warmth in devices with natural (yellow/orange) light and set Night Mode automatically according to a schedule	</p>
-        <p>	<b>	Auto power save	</b>	 - 	Puts the device into standby, suspend or power off after specified periods of inactivity	</p>
-        <p>	<b>	Autosuspend	</b>	 - 	Suspend device after chosen period of inactivity (available on all e-ink devices except android os)	</p>
-        <p>	<b>	Autoturn	</b>	 - 	Automatically turns the page after a set period of time	</p>
-        <p>	<b>	Background runner	</b>	 - 	Service to other plugins: Allows tasks to run regularly in the background.	</p>
-        <p>	<b>	Battery statistics	</b>	 - 	Collects and displays battery usage statistics of your device	</p>
-        <p>	<b>	Book shortcuts	</b>	 - 	Allows adding a book shortcut to a gesture	</p>
-        <p>	<b>	Calibre	</b>	 - 	You can send documents from your Calibre Library directly to your KOReader devices via WiFi connection.  Check the wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/Calibre-wireless-connection">https://github.com/koreader/koreader/wiki/Calibre-wireless-connection</a> 	</p>
-        <p>	<b>	Cover browser	</b>	 - 	Allows cover display modes for file browser and history	</p>
-        <p>	<b>	Cover image	</b>	 - 	Saves the cover image of the current book as a file (available on Android/PocketBook/reMarkable devices)	</p>
-        <p>	<b>	Export highlights	</b>	 - 	Export highlights and notes to local files or to Joplin (a note taking application)	</p>
-        <p>	<b>	Flashcard trainer	</b>	 - 	Show flashcards using spaced repetition (SM2) of highlight from your library	</p>
-        <p>	<b>	Gestures	</b>	 - 	Provide gesture support for KOReader	</p>
-        <p>	<b>	Japanese support	</b>	 - 	Japanese language support for KOReader that extends built-in dictionary and selection system	</p>
-        <p>	<b>	Keep alive	</b>	 - 	Keeps the device awake to prevent automatic WiFi disconnects	</p>
-        <p>	<b>	Move to archive	</b>	 - 	Moves current document to archive folder	</p>
-        <p>	<b>	News Downloader	</b>	 - 	Retrieves RSS and Atom news entries and saves them as HTML files. Check the wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/News-downloader">https://github.com/koreader/koreader/wiki/News-downloader</a>	</p>
-        <p>	<b>	OPDS	</b>	 - 	Allows you to download books from online catalogs	</p>
-        <p>	<b>	Perception expander	</b>	 - 	Allows using peripheral vision to read more quickly. Check this YouTube video to see how it works: <a href="https://youtu.be/jeOHqI9SqOI?t=137">How to Triple Your Reading Speed in 20 Minutes (Tim Ferriss)</a>	</p>
-        <p>	<b>	Profiles	</b>	 - 	Allows combining multiple settings to make switchable profiles	</p>
-        <p>	<b>	Progress sync	</b>	 - 	Synchronize your reading progress across different KOReader devices.  Check the wiki for how-to:  <a href="https://github.com/koreader/koreader/wiki/Progress-sync">https://github.com/koreader/koreader/wiki/Progress-sync</a>	</p>
-        <p>	<b>	QR from clipboard	</b>	 - 	Generates a QR code from clipboard content	</p>
-        <p>	<b>	Read timer	</b>	 - 	A countdown timer to display a message after a user defined time	</p>
-        <p>	<b>	Reading statistics	</b>	 - 	Calculates reading sessions statistics and reading speed for use in chapter/book remaining time estimations	</p>
-        <p>	<b>	SSH	</b>	 - 	Allows access to your device over SSH protocol. You can access via FTP applications or even your file manager if it supports. Check the wiki page for how-to:  <a href="https://github.com/koreader/koreader/wiki/SSH">https://github.com/koreader/koreader/wiki/SSH</a>	</p>
-        <p>	<b>	System statistics	</b>	 - 	You can see your CPU/RAM/BATTERY info via this plugin under:</p>
+        <p>	<b> Auto frontlight </b> - Automatically toggles the frontlight according to ambient light level (Only available on Kindle Voyage and Oasis)	</p>
+        <p>	<b> Auto warmth and night mode </b> - Allows you to adjust frontlight warmth in devices with natural (yellow/orange) light and set Night Mode automatically according to a schedule	</p>
+        <p>	<b> Auto power save </b> - Puts the device into standby, suspend or power off after specified periods of inactivity	</p>
+        <p>	<b> Autosuspend </b> - Suspend device after chosen period of inactivity (available on all e-ink devices except android os)	</p>
+        <p>	<b> Autoturn </b> - Automatically turns the page after a set period of time	</p>
+        <p>	<b> Background runner </b> - Service to other plugins: Allows tasks to run regularly in the background.	</p>
+        <p>	<b> Battery statistics </b> - Collects and displays battery usage statistics of your device	</p>
+        <p>	<b> Book shortcuts </b> - Allows adding a book shortcut to a gesture	</p>
+        <p>	<b> Calibre </b> - You can send documents from your Calibre Library directly to your KOReader devices via WiFi connection. Check the wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/Calibre-wireless-connection">https://github.com/koreader/koreader/wiki/Calibre-wireless-connection</a> 	</p>
+        <p>	<b> Cover browser </b> - Allows cover display modes for file browser and history	</p>
+        <p>	<b> Cover image </b> - Saves the cover image of the current book as a file (available on Android/PocketBook/reMarkable devices)	</p>
+        <p>	<b> Export highlights </b> - Export highlights and notes to local files or to Joplin (a note taking application)	</p>
+        <p>	<b> Flashcard trainer </b> - Show flashcards using spaced repetition (SM2) of highlight from your library	</p>
+        <p>	<b> Gestures </b> - Provide gesture support for KOReader	</p>
+        <p>	<b> Japanese support </b> - Japanese language support for KOReader that extends built-in dictionary and selection system	</p>
+        <p>	<b> Keep alive </b> - Keeps the device awake to prevent automatic WiFi disconnects	</p>
+        <p>	<b> Move to archive </b> - Moves current document to archive folder	</p>
+        <p>	<b> News Downloader </b> - Retrieves RSS and Atom news entries and saves them as HTML files. Check the wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/News-downloader">https://github.com/koreader/koreader/wiki/News-downloader</a>	</p>
+        <p>	<b> OPDS </b> - Allows you to download books from online catalogs	</p>
+        <p>	<b> Perception expander </b> - Allows using peripheral vision to read more quickly. Check this YouTube video to see how it works: <a href="https://youtu.be/jeOHqI9SqOI?t=137">How to Triple Your Reading Speed in 20 Minutes (Tim Ferriss)</a>	</p>
+        <p>	<b> Profiles </b> - Allows combining multiple settings to make switchable profiles	</p>
+        <p>	<b> Progress sync </b> - Synchronize your reading progress across different KOReader devices. Check the wiki for how-to: <a href="https://github.com/koreader/koreader/wiki/Progress-sync">https://github.com/koreader/koreader/wiki/Progress-sync</a>	</p>
+        <p>	<b> QR from clipboard </b> - Generates a QR code from clipboard content	</p>
+        <p>	<b> Read timer </b> - A countdown timer to display a message after a user defined time	</p>
+        <p>	<b> Reading statistics </b> - Calculates reading sessions statistics and reading speed for use in chapter/book remaining time estimations	</p>
+        <p>	<b> SSH </b> - Allows access to your device over SSH protocol. You can access via FTP applications or even your file manager if it supports. Check the wiki page for how-to: <a href="https://github.com/koreader/koreader/wiki/SSH">https://github.com/koreader/koreader/wiki/SSH</a>	</p>
+        <p>	<b> System statistics </b> - You can see your CPU/RAM/BATTERY info via this plugin under:</p>
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_hamburger.svg" style="width:26px;"> → Help → System statistics</div>
-        <p>	<b>	Terminal emulator	</b>	 - 	Starts a shell (command prompt) on your device that can run full terminal apps	</p>
-        <p>	<b>	Text editor	</b>	 - 	A basic text editor to create and edit plain text files	</p>
-        <p>	<b>	Time sync	</b>	 - 	Synchronizes the device time with NTP servers	</p>
-        <p>	<b>	Tweak document settings	</b>	 - 	Allows tweaking settings of a document before it is loaded based on external factors	</p>
-        <p>	<b>	Wallabag	</b>	 - 	Downloads the latest articles from a Wallabag server as individual EPUB files.  Check the wiki page for more info: <a href="https://github.com/koreader/koreader/wiki/Wallabag">https://github.com/koreader/koreader/wiki/Wallabag</a>	</p>
+        <p>	<b> Terminal emulator </b> - Starts a shell (command prompt) on your device that can run full terminal apps	</p>
+        <p>	<b> Text editor </b> - A basic text editor to create and edit plain text files	</p>
+        <p>	<b> Time sync </b> - Synchronizes the device time with NTP servers	</p>
+        <p>	<b> Tweak document settings </b> - Allows tweaking settings of a document before it is loaded based on external factors	</p>
+        <p>	<b> Wallabag </b> - Downloads the latest articles from a Wallabag server as individual EPUB files. Check the wiki page for more info: <a href="https://github.com/koreader/koreader/wiki/Wallabag">https://github.com/koreader/koreader/wiki/Wallabag</a>	</p>
         </div>
 
-        <div class="L2-Sub-heading" id="userpatches">User patches<span class=warning><span class="label_red">!!! ADVANCED</span></span></div>
+        <div class="L2-Sub-heading" id="userpatches">User patches<span class="warning"><span class="label_red">!!! ADVANCED</span></span></div>
 
         <div class="standard-text">
         User patches are small files written in <b>Lua</b> language. They can change the functionality of KOReader without modifying your installation permanently. They can be written by developers, other users or you can write one yourself (if you have the necessary extensive knowledge about the KOReader internals).
         
-        <p>You can find a current list of <span class=ui>User patches</span> in the related <b>GitHub</b> wiki page:</p>
+        <p>You can find a current list of <span class="ui">User patches</span> in the related <b>GitHub</b> wiki page:</p>
         
         <p><a href="https://github.com/koreader/koreader/wiki/User-patches">https://github.com/koreader/koreader/wiki/User-patches</a></p>
         
-        <p>and in the <b>issues</b> list under the <span class=ui>User patch available</span> tag:</p>
+        <p>and in the <b>issues</b> list under the <span class="ui">User patch available</span> tag:</p>
         
         <p><a href="https://github.com/koreader/koreader/issues?q=+label%3A%22User+patch+available%22">https://github.com/koreader/koreader/issues?q=+label%3A%22User+patch+available%22</a></p>
         
@@ -2932,25 +2908,25 @@
         <div class="L3-Smaller-heading">Basic usage – Adding an already written patch to your KOReader:</div>
         
         <ol>
-            <li>Create a directory named <span class=ui>patches</span> under <span class=ui>koreader directory</span> on your device (On Android this folder is located on the SD-card)</li>
-            <li>Download and put the patch file with <b>.lua</b> extension in this <span class=ui>patches</span> directory</li>
+            <li>Create a directory named <span class="ui">patches</span> under <span class="ui">koreader directory</span> on your device (On Android this folder is located on the SD-card)</li>
+            <li>Download and put the patch file with <b>.lua</b> extension in this <span class="ui">patches</span> directory</li>
             <li>Restart KOReader</li>
         </ol>
 
         
         <div class="L3-Smaller-heading">Patch manager</div>
 
-        <p>When you create a patches directory as instructed, a new plugin named <span class=ui>Patch Management</span> becomes available in the plugins menu after restarting KOReader. With this plugin you can see the list and status of your user patches and enable/disable them. You can tap <span class=ui>About patch manager</span> menu item to see more info.</p>
+        <p>When you create a patches directory as instructed, a new plugin named <span class="ui">Patch Management</span> becomes available in the plugins menu after restarting KOReader. With this plugin you can see the list and status of your user patches and enable/disable them. You can tap <span class="ui">About patch manager</span> menu item to see more info.</p>
         
         <div class="L3-Smaller-heading">Naming the patch</div>
 
-        <p>Execution order of a patch is determined by the first digit of the number in the patch name. For example: <span class=ui>2-TOC-title-patch.lua</span> If there are several patches starting with the same digit, the execution order is the natural order <b>(1&lt;10&lt;11&lt;12&lt;13&lt;…&lt;109&lt;…&lt;10010)</b>. If you are just downloading an already made patch you don’t need to change the file name.</p>
+        <p>Execution order of a patch is determined by the first digit of the number in the patch name. For example: <span class="ui">2-TOC-title-patch.lua</span> If there are several patches starting with the same digit, the execution order is the natural order <b>(1&lt;10&lt;11&lt;12&lt;13&lt;…&lt;109&lt;…&lt;10010)</b>. If you are just downloading an already made patch you don’t need to change the file name.</p>
         <p> Names starting with:</p>
         
         <ul>
             <li><b>0</b> - Executed very early and only once after an update</li>
             <li><b>1</b> - Excuted very early on every start of KOReader (but after 0 if applicable)</li>
-            <li><b>2</b> - Executed after <span class=ui>UIManager</span> is ready on every start of KOReader</li>
+            <li><b>2</b> - Executed after <span class="ui">UIManager</span> is ready on every start of KOReader</li>
             <li><b>3-7</b> - Reserved</li>
             <li><b>8</b> - Executed before exit and before settings get saved</li>
             <li><b>9</b> - Executed right before exit</li>
@@ -2996,14 +2972,14 @@
         </div>
 
         <div class="L3-Smaller-heading">Switching between documents quickly</div>
-        <p>If you need to switch between two documents (when comparing them for example), there is a quicker way than going through the <span class=ui>File Browser</span>. KOReader can open the last document with a gesture (<b>←→← multiswipe</b>). If you define a gesture’s action as <span class=ui>Open previous document</span>, you can switch between two documents quickly similar to <b>Alt+Tab</b> feature on the desktop computers. You can find this feature under:</p>
+        <p>If you need to switch between two documents (when comparing them for example), there is a quicker way than going through the <span class="ui">File Browser</span>. KOReader can open the last document with a gesture (<b>←→← multiswipe</b>). If you define a gesture’s action as <span class="ui">Open previous document</span>, you can switch between two documents quickly similar to <b>Alt+Tab</b> feature on the desktop computers. You can find this feature under:</p>
 
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and gestures → Gesture manager → “ANY GESTURE” → General → Open Previous Document</div>
 
-        <p>Also you can use the <span class=ui>History</span> dialog to switch between documents quickly. The history screen can be opened with the <b>→↑</b> multiswipe gesture. You can also define any other gesture for this of course.</p>
+        <p>Also you can use the <span class="ui">History</span> dialog to switch between documents quickly. The history screen can be opened with the <b>→↑</b> multiswipe gesture. You can also define any other gesture for this of course.</p>
         
         <div class="L3-Smaller-heading">Applying current defaults to an already opened book</div>
-        <p>When you adjust your document defaults like <span class=ui>default line spacing</span> or <span class=ui>default contrast</span>, this new value will only be used for the new documents you open after the change. Your already opened books will look the same. For example, if you change your default <span class=ui>FONT</span>, you will probably adjust <span class=ui>FONT WEIGHT</span> and <span class=ui>LINE SPACING</span> to more suitable values for this new font. Then probably you will want to apply these changes to all your opened books. With this feature you don’t need to change these values manually in all your opened books.</p>
+        <p>When you adjust your document defaults like <span class="ui">default line spacing</span> or <span class="ui">default contrast</span>, this new value will only be used for the new documents you open after the change. Your already opened books will look the same. For example, if you change your default <span class="ui">FONT</span>, you will probably adjust <span class="ui">FONT WEIGHT</span> and <span class="ui">LINE SPACING</span> to more suitable values for this new font. Then probably you will want to apply these changes to all your opened books. With this feature you don’t need to change these values manually in all your opened books.</p>
         <p>You can easily apply these changes to your already opened books by choosing:</p>
         
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Reset document settings to default</div>
@@ -3011,17 +2987,17 @@
         <p>When you tap this option, your current book will reset to latest defaults you set. Don’t worry, this will only change the appearance of the book. Your reading position, highlights, notes and bookmarks will be preserved.</p>
         
         <div class="L3-Smaller-heading">Saving current book settings as defaults</div>
-        <p>When you adjust a book to your liking, for example by changing <span class=ui>line spacing</span>, <span class=ui>font contrast</span> etc. you can save all the changes at once as <span class=ui>defaults</span>. Then you can apply these settings to other books with the <span class=ui>Reset document settings to default</span> option as explained above.</p>
-        <p>You can save your changes as <span class=ui>defaults</span> by choosing:</p>
+        <p>When you adjust a book to your liking, for example by changing <span class="ui">line spacing</span>, <span class="ui">font contrast</span> etc. you can save all the changes at once as <span class="ui">defaults</span>. Then you can apply these settings to other books with the <span class="ui">Reset document settings to default</span> option as explained above.</p>
+        <p>You can save your changes as <span class="ui">defaults</span> by choosing:</p>
         
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Save document settings as default</div>
         
         <div class="L3-Smaller-heading">Avoiding opening links accidentally</div>
-        <p>If your document has links and you are accidentally tapping them while turning the page or using other gestures, you can turn off <span class=ui>Following links by tapping</span> via this menu item:</p>
+        <p>If your document has links and you are accidentally tapping them while turning the page or using other gestures, you can turn off <span class="ui">Following links by tapping</span> via this menu item:</p>
 
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and Gestures → Links → Tap to follow links</div>
 
-        <p>After disabling this setting, to follow a link you have to long-tap on it and select <span class=ui>Follow link</span> from the popup menu. If you have the opposite problem and you want to make tapping links easier, you can enable <span class=ui>Allow larger tap area around links</span> from the same menu.</p>
+        <p>After disabling this setting, to follow a link you have to long-tap on it and select <span class="ui">Follow link</span> from the popup menu. If you have the opposite problem and you want to make tapping links easier, you can enable <span class="ui">Allow larger tap area around links</span> from the same menu.</p>
         
 
         <div class="L3-Smaller-heading">Optimizing your battery life</div>
@@ -3034,7 +3010,7 @@
         
 
         <div class="L3-Smaller-heading">Keeping an eye on your memory usage</div>
-        <p>In older Kindle devices some of our users reported crashes due to limited memory. KOReader memory usage can go up if you open many files in one session. Especially PDF’s increase this amount. You can add a memory indicator to your <span class=ui>STATUS BAR</span> and restart KOReader if this value gets high, to avoid crashes or reboots.</p>
+        <p>In older Kindle devices some of our users reported crashes due to limited memory. KOReader memory usage can go up if you open many files in one session. Especially PDF’s increase this amount. You can add a memory indicator to your <span class="ui">STATUS BAR</span> and restart KOReader if this value gets high, to avoid crashes or reboots.</p>
 
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Status Bar → KOReader memory usage</div>
 
@@ -3045,12 +3021,12 @@
         <div class="L3-Smaller-heading">Checking your battery consumption details</div>
         <p>You can see your detailed battery usage statistics via this menu item:</p>
 
-        <div class="menu-breadcrumbs">⇑ TOP MENU →  <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → More Tools → Battery Statistics</div>
+        <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → More Tools → Battery Statistics</div>
         
         <div class="L3-Smaller-heading">Checking detailed device statistics</div>
         <p>You can see your system information like <b>CPU/DISK SPACE/RAM</b> usage via this menu item:</p>
         
-        <div class="menu-breadcrumbs">⇑ TOP MENU →  <img class="img_inline" src="pictures/top_hamburger.svg" style="width:26px;"> → Help → System statistics</div>
+        <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_hamburger.svg" style="width:26px;"> → Help → System statistics</div>
 
     
         <div class="L3-Smaller-heading">Changing your book cover</div>
@@ -3060,7 +3036,7 @@
         
         
         <div class="L3-Smaller-heading">Reading statistics after midnight</div>
-        <p>In reading statistics you can change the start of day used for calculations. This is useful if you are reading after midnight for example and want your reading session counted as today instead of the next day. This applies only to the <span class=ui>Day timeline view</span> and optionally to the <span class=ui>Calendar view</span>; it does not apply to any of the other statistics reports. You can set this time at:</p>
+        <p>In reading statistics you can change the start of day used for calculations. This is useful if you are reading after midnight for example and want your reading session counted as today instead of the next day. This applies only to the <span class="ui">Day timeline view</span> and optionally to the <span class="ui">Calendar view</span>; it does not apply to any of the other statistics reports. You can set this time at:</p>
 
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → Reading statistics → Settings → Daily timeline starts at...</div>
         
@@ -3082,8 +3058,8 @@
         <li>PDF file itself might be <b>too big for your device memory</b>.</li>
         <li>PDF file <b>might contain very large image files</b>. Even in documents with a normal text layer (which you can select and highlight) there might be another image layer embedded (generally a scan of the page). This slows down the opening and page turning because these large images has to be rescaled to fit on your screen and this process can be CPU intensive.</li>
         <li>PDF file might have <b>lots of individual elements</b> that needs precise positioning, like a magazine page with lots of images and text boxes. In this case KOReader has to calculate and draw all these elements which can take time.</li>
-        <li><span class=ui>Auto straighten</span> feature (which allows you to adjust the tilt of the page) might also slow down your reader.</li>
-        <li>If you set your <span class=ui>RENDER QUALITY</span> to <span class=ui>HIGH</span> while <span class=ui>REFLOW</span> is <b>ON</b>, text will be more pleasing but it can be much slower (up to several seconds per page turn) than <span class=ui>DEFAULT</span> depending on your document.
+        <li><span class="ui">Auto straighten</span> feature (which allows you to adjust the tilt of the page) might also slow down your reader.</li>
+        <li>If you set your <span class="ui">RENDER QUALITY</span> to <span class="ui">HIGH</span> while <span class="ui">REFLOW</span> is <b>ON</b>, text will be more pleasing but it can be much slower (up to several seconds per page turn) than <span class="ui">DEFAULT</span> depending on your document.
             <div class="menu-breadcrumbs">⇓ BOTTOM MENU → <img class="img_inline" src="pictures/bottom_contrast.svg" style="width:26px;"> → Render Quality</div>
         </li>
     </ul>
@@ -3094,7 +3070,7 @@
     <ul>
         <li>EPUB files are basically composed of text and images with some rules to determine how these items are formatted on the screen. In ideal conditions, this is a fairly simple process so EPUB files are generally fast in KOReader. <b>But some EPUB books add a great number of formatting rules that KOReader has to do many calculations just to show even a single sentence.</b> This will slow down opening the book, turning the pages and changing the appearance properties like font weight or line spacing.
 
-        <div class=info><span class="label_blue">INFO</span> KOReader doesn't support <b>fixed layout EPUBs</b>. They will open, but will render as reflowable EPUBs and probably won't look nice or readable.</div>
+        <div class="info"><span class="label_blue">INFO</span> KOReader doesn't support <b>fixed layout EPUBs</b>. They will open, but will render as reflowable EPUBs and probably won't look nice or readable.</div>
         </li>
 
         <li>EPUB files are ZIP archives that contain HTML files. Some books can be a single HTML file while others may be composed of multiple HTML files like each chapter of the book is a separate HTML file. <b>If your book is only a single HTML file, partial rendering can not work.</b> So appearance changes will be slower than the divided chapter books, because for each change, KOReader still has to calculate the whole book instead of only the current chapter.</li>
@@ -3122,21 +3098,21 @@
     <p>Following solutions are for EPUB files and they might require advanced knowledge:</p>
 
     <ul>
-        <li>You can set <span class=ui>Embedded Styles</span> to <b>OFF</b> in the bottom menu to see if ignoring all the document stylesheets makes it faster (of course, you'll probably lose any nice formatting, but you'll know what is the culprit).</li>
+        <li>You can set <span class="ui">Embedded Styles</span> to <b>OFF</b> in the bottom menu to see if ignoring all the document stylesheets makes it faster (of course, you'll probably lose any nice formatting, but you'll know what is the culprit).</li>
         
-        <li>If you have HTML and CSS knowledge, you can inspect the HTML and the CSS files directly from KOReader and judge their quality or unnecessary complexity by yourself. To do this, you can long-press on some text and choose <span class=ui>View HTML</span> in the popup menu.</li>
+        <li>If you have HTML and CSS knowledge, you can inspect the HTML and the CSS files directly from KOReader and judge their quality or unnecessary complexity by yourself. To do this, you can long-press on some text and choose <span class="ui">View HTML</span> in the popup menu.</li>
         
-        <li>If you have the <b>“content wrapped in a table”</b> problem as mentioned above in the problems section, you can add this <span class=ui>table, tr, td { display:block; }</span> book-specific style tweak to:
+        <li>If you have the <b>“content wrapped in a table”</b> problem as mentioned above in the problems section, you can add this <span class="ui">table, tr, td { display:block; }</span> book-specific style tweak to:
         
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:26px;"> → Style tweaks → Book-specific tweak</div>
         </li>
 
-        <li><span class=external>Calibre</span>’s e-book editor can check EPUB files for problems and has tools to fix some of the problems.
-        <p>You can download <span class=external>Calibre</span> from here: <a href="https://calibre-ebook.com/">https://calibre-ebook.com/</a></p>
+        <li><span class="external">Calibre</span>’s e-book editor can check EPUB files for problems and has tools to fix some of the problems.
+        <p>You can download <span class="external">Calibre</span> from here: <a href="https://calibre-ebook.com/">https://calibre-ebook.com/</a></p>
 
-        <p>You can see the instructions for the <b>Check book tool</b> of <span class=external>Calibre</span> here: <a href="https://manual.calibre-ebook.com/edit.html#checking-the-book">https://manual.calibre-ebook.com/edit.html#checking-the-book</a> </p></li>
+        <p>You can see the instructions for the <b>Check book tool</b> of <span class="external">Calibre</span> here: <a href="https://manual.calibre-ebook.com/edit.html#checking-the-book">https://manual.calibre-ebook.com/edit.html#checking-the-book</a> </p></li>
         
-        <li><span class=external>EPUBCheck</span> application can check the validity of the EPUB files and detect many types of errors. You can read an example issue, where the problem is detected with <span class=external>EPUBCheck</span> <a href="https://github.com/koreader/koreader/issues/11268">https://github.com/koreader/koreader/issues/11268</a>
+        <li><span class="external">EPUBCheck</span> application can check the validity of the EPUB files and detect many types of errors. You can read an example issue, where the problem is detected with <span class="external">EPUBCheck</span> <a href="https://github.com/koreader/koreader/issues/11268">https://github.com/koreader/koreader/issues/11268</a>
 
         <p>You can download the <b>command line version</b> from here: <a href="https://github.com/w3c/epubcheck">https://github.com/w3c/epubcheck</a></p>
 
@@ -3145,7 +3121,7 @@
 
 
     <p><b>Opening an issue:</b></p>
-    <p>If you are opening an issue about this problem, it is important for us to inspect the problematic file. You can share the file directly by dragging and dropping it on your GitHub message after compressing it as a ZIP file. If your book is an EPUB and you don’t want to share the file due to copyright or privacy issues, there is a plugin for <span class=external>Calibre</span> named <span class=external>ScrambleEbook</span> which you can access the download and instructions from this page:</p>
+    <p>If you are opening an issue about this problem, it is important for us to inspect the problematic file. You can share the file directly by dragging and dropping it on your GitHub message after compressing it as a ZIP file. If your book is an EPUB and you don’t want to share the file due to copyright or privacy issues, there is a plugin for <span class="external">Calibre</span> named <span class="external">ScrambleEbook</span> which you can access the download and instructions from this page:</p>
     <a href="https://www.mobileread.com/forums/showthread.php?t=267998">https://www.mobileread.com/forums/showthread.php?t=267998</a>
     
     <p>This plugin will read an un-DRM'd ebook file (EPUB/KEPUB/AZW3) and create a copy of the book with <b>its text replaced with random characters</b>. You can share this scrambled version with us in your issue thread. <b>Text of the book will not be readable and there won’t be any copyright violation</b> but we can still use this file for diagnostic purposes.</p>
@@ -3158,10 +3134,10 @@
 
     
     <div class="L3-Smaller-heading">My status bar disappeared</div>
-        <p>Probably you tapped on the <span class=ui>STATUS BAR</span> touch zone at the bottom of the screen. You can bring it back by tapping the same zone.</p>
+        <p>Probably you tapped on the <span class="ui">STATUS BAR</span> touch zone at the bottom of the screen. You can bring it back by tapping the same zone.</p>
         
     <div class="L3-Smaller-heading">Sometimes my taps are registered as a long tap or double taps</div>
-        <p>This can happen in cases like shaking hands or device touch screen problems. If you have this problem, you can try to increase the <span class=ui>Tap interval</span>. By increasing this interval, you tell KOReader to ignore quick taps at the same location.</p>
+        <p>This can happen in cases like shaking hands or device touch screen problems. If you have this problem, you can try to increase the <span class="ui">Tap interval</span>. By increasing this interval, you tell KOReader to ignore quick taps at the same location.</p>
 
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Taps and Gestures → Gesture intervals → Tap interval</div>
 
@@ -3171,7 +3147,7 @@
         <p>In Android devices KOReader can’t write to the external storage due to Android system restrictions. If you want to change your screenshot saving location, be careful to choose your device’s internal storage.</p>
         
     <div class="L3-Smaller-heading">Ghosting and residue when turning pages</div>
-        <p>Even if KOReader is set to <b>full refresh after every page</b>, you may still see some ghosting/residue after turning pages. This is a limitation of e-ink screen technology and can be observed on the latest generation devices, especially while reading mixed content (text+images) documents. As a workaround, you can refresh one more time manually after turning the page to get rid of these artifacts if they bother you (<span class=ui>short diagonal swipe</span> gesture by default).</p>
+        <p>Even if KOReader is set to <b>full refresh after every page</b>, you may still see some ghosting/residue after turning pages. This is a limitation of e-ink screen technology and can be observed on the latest generation devices, especially while reading mixed content (text+images) documents. As a workaround, you can refresh one more time manually after turning the page to get rid of these artifacts if they bother you (<span class="ui">short diagonal swipe</span> gesture by default).</p>
         
     <div class="L3-Smaller-heading">Sleep cover problems</div>
         <p>Sleep covers generally use a magnet embedded in the cover which enables wake up and sleep events via triggering a sensor in your device. In some cases like misaligned magnets, weak magnets etc. this triggering can be problematic. If you are having problems with waking up your device with your cover, you can disable this feature via this menu:</p>
@@ -3179,15 +3155,15 @@
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/gear.svg" style="width:26px;"> → Device → Ignore all sleep cover events</div>
         
     <div class="L3-Smaller-heading">Text indentation problems</div>
-        <p>If you get miscentered titles, headings or separators, or unexpected text indentation, try switching the style for your document. <span class=ui>epub.css</span> to <span class=ui>html5.css</span>. This kind of problems happen because some publishers assume their books will only be read on <b>web browser engine based</b> readers, so they don't bother "resetting" the styles.</p>
+        <p>If you get miscentered titles, headings or separators, or unexpected text indentation, try switching the style for your document. <span class="ui">epub.css</span> to <span class="ui">html5.css</span>. This kind of problems happen because some publishers assume their books will only be read on <b>web browser engine based</b> readers, so they don't bother "resetting" the styles.</p>
 
         <div class="menu-breadcrumbs">⇑ TOP MENU → <img class="img_inline" src="pictures/top_document.svg" style="width:24px;"> → Style</div>
 
 
         <ul>
-            <li>Default <span class=ui>HTML/EPUB (epub.css)</span> is our book-oriented stylesheet, with <b>text-align: justify, text-indent on P</b>.  It is better for unstyled books, and might make styled books more readable.</li>
+            <li>Default <span class="ui">HTML/EPUB (epub.css)</span> is our book-oriented stylesheet, with <b>text-align: justify, text-indent on P</b>. It is better for unstyled books, and might make styled books more readable.</li>
 
-            <li>You can try switching to <span class=ui>HTML5 (html5.css)</span> if your book has indentation problems as mentioned above. This style provides a base stylesheet like web browsers do when rendering: <b>text-align: left, no text-indent on P, spacing between P</b>. But it doesn’t look pretty when publishers hasn’t done any styling.</li>
+            <li>You can try switching to <span class="ui">HTML5 (html5.css)</span> if your book has indentation problems as mentioned above. This style provides a base stylesheet like web browsers do when rendering: <b>text-align: left, no text-indent on P, spacing between P</b>. But it doesn’t look pretty when publishers hasn’t done any styling.</li>
         </ul>
             
 
@@ -3200,9 +3176,9 @@
     <div class="L3-Smaller-heading">Clearing file cache</div>
         <p>When you are reading a <b>PDF/DJVU</b> document, KOReader keeps a cache of the last page you have read. So when you reopen the book, it will be faster. But this cache can grow big if you are using KOReader for a long time and reading many PDF/DJVU documents. These cache files are kept under your KOReader installation directory under the <b>cache folder</b>. To clear this cache and reclaim the space you can go to:</p>
 
-        <div class="menu-breadcrumbs">⇑ TOP MENU (in file browser)  → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → More tools → Developer options → Clear caches</div>
+        <div class="menu-breadcrumbs">⇑ TOP MENU (in file browser) → <img class="img_inline" src="pictures/top_tools.svg" style="width:26px;"> → More tools → Developer options → Clear caches</div>
         
-        <div class=warning><span class="label_red">WARNING</span> Clear this cache <b>only if you really need this space</b>. If you have enough space, clearing the cache will not provide any benefit. Instead, it will degrade the performance because your reader will have to render those pages again.</div>
+        <div class="warning"><span class="label_red">WARNING</span> Clear this cache <b>only if you really need this space</b>. If you have enough space, clearing the cache will not provide any benefit. Instead, it will degrade the performance because your reader will have to render those pages again.</div>
         
         
     <div class="L3-Smaller-heading">Backing up your KOReader settings</div>
@@ -3229,7 +3205,7 @@
             </div>
         </div>
         
-        <div class=info><span class="label_blue">INFO</span> Your individual book settings and highlights are kept in the same directory as your books in a folder with the <b>same name as your book</b>. You can backup these folders separately if you wish.</div>
+        <div class="info"><span class="label_blue">INFO</span> Your individual book settings and highlights are kept in the same directory as your books in a folder with the <b>same name as your book</b>. You can backup these folders separately if you wish.</div>
 
 
         </div>
@@ -3240,8 +3216,7 @@
     <div class="L1-Chapter-heading" id="reachus">HOW TO REACH US ABOUT PROBLEMS OR SUGGESTIONS</div>
 
         <div class="standard-text">
-        KOReader uses <span class=external>GitHub</span> as its project base. You can report problems or suggestions on our GitHub page. You just need a GitHub account which is free. Click this link to open our <b>Issues</b> page:
-        <a href="https://github.com/koreader/koreader/issues">https://github.com/koreader/koreader/issues</a>
+        KOReader uses <span class="external">GitHub</span> as its project base. You can report problems or suggestions on our GitHub page. You just need a GitHub account which is free. Click this link to open our <b>Issues</b> page: <a href="https://github.com/koreader/koreader/issues">https://github.com/koreader/koreader/issues</a>
         
         <img loading="lazy" src="pictures/github_main.jpg" style="width:850px;">
 
@@ -3266,16 +3241,16 @@
         <div class="standard-text" style="text-align: center;">
         
             <img loading="lazy" class="img_inline" src="pictures/logo_mobileread.png" style="width:140px;">
-            <p>Find other KOReader users on <span class=external>MobileRead forums:</span> <a href="https://www.mobileread.com/forums/forumdisplay.php?f=276">https://www.mobileread.com/forums/forumdisplay.php?f=276</a></p>
+            <p>Find other KOReader users on <span class="external">MobileRead forums:</span> <a href="https://www.mobileread.com/forums/forumdisplay.php?f=276">https://www.mobileread.com/forums/forumdisplay.php?f=276</a></p>
 
 <hr>
 
             <img loading="lazy" class="img_inline" src="pictures/logo_gitter.png" style="width:100px;">
-            <p>Reach us at <span class=external>Gitter</span> chat: <a href="https://gitter.im/koreader/koreader">https://gitter.im/koreader/koreader</a></p>
+            <p>Reach us at <span class="external">Gitter</span> chat: <a href="https://gitter.im/koreader/koreader">https://gitter.im/koreader/koreader</a></p>
 <hr>
 
             <img loading="lazy" class="img_inline" src="pictures/logo_liberapay.gif" style="width:80px;">
-            <p>Support the project via <span class=external>Liberapay:</span> <a href="https://liberapay.com/KOReader">https://liberapay.com/KOReader</a></p>
+            <p>Support the project via <span class="external">Liberapay:</span> <a href="https://liberapay.com/KOReader">https://liberapay.com/KOReader</a></p>
         
         </div>
 
