add support for rtl languages

lovasoa · lovasoa · commit e8d97f3220f4 · 2025-03-02T10:19:11.000+01:00
fixes #838
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,6 +15,7 @@
   - Allow data URLs in markdown images. This allows embedding base64 encoded images in any markdown field.
   - see [configuration.md](./configuration.md) for more details.
 - In the shell component, setting the `footer` parameter to the empty string (`''`) will now completely hide the footer, instead of showing the default one 
+- New configuration option: `rtl` to display the page in right-to-left mode. This can be used to display Arabic, Hebrew, Persian, etc.
 
 ## 0.33.1 (2025-02-25)
 
diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -1164,6 +1164,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('font', 'Specifies the font to be used for displaying text, which can be a valid font name from fonts.google.com or the path to a local WOFF2 font file starting with a slash (e.g., "/fonts/MyLocalFont.woff2").', 'TEXT', TRUE, TRUE),
     ('font_size', 'Font size on the page, in pixels. Set to 18 by default.', 'INTEGER', TRUE, TRUE),
     ('language', 'The language of the page. This can be used by search engines and screen readers to determine in which language the page is written.', 'TEXT', TRUE, TRUE),
+    ('rtl', 'Whether the page should be displayed in right-to-left mode. Used to display Arabic, Hebrew, Persian, etc.', 'BOOLEAN', TRUE, TRUE),
     ('refresh', 'Number of seconds after which the page should refresh. This can be useful to display dynamic content that updates automatically.', 'INTEGER', TRUE, TRUE),
     ('sidebar', 'Whether the menu defined by menu_item should be displayed on the left side of the page instead of the top. Introduced in v0.27.', 'BOOLEAN', TRUE, TRUE),
     ('sidebar_theme', 'Used with sidebar property, It can be set to "dark" to exclusively set the sidebar into dark theme.', 'BOOLEAN', TRUE, TRUE),
diff --git a/sqlpage/templates/shell.handlebars b/sqlpage/templates/shell.handlebars
@@ -1,5 +1,10 @@
 <!DOCTYPE html>
-<html lang="{{language}}" style="font-size: {{default font_size 18}}px" {{#if class}}class="{{class}}" {{/if}}>
+<html
+    lang="{{language}}"
+    style="font-size: {{default font_size 18}}px"
+    {{#if class}}class="{{class}}" {{/if}}
+    {{~#if rtl}}dir="rtl" {{/if~}}
+>
 <head>
     <meta charset="utf-8" />
     <title>{{default title "SQLPage"}}</title>
