Add directionality support for RTL languages

RTL content (Arabic, Persian) is now displayed correctly
4training · Oct 24, 2023 · a6a302d · a6a302d
1 parent 5278f4b
commit a6a302d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/lib/data/globals.dart b/lib/data/globals.dart
@@ -56,6 +56,9 @@ class Globals {
     'de'
   ];
 
+  /// Which of these languages are right-to-left? (RTL)
+  static const rtlLanguages = ['ar', 'fa'];
+
   /// Which page is loaded after startup?
   static const String defaultPage = "God's_Story_(five_fingers)";
 

diff --git a/lib/routes/view_page.dart b/lib/routes/view_page.dart
@@ -1,3 +1,4 @@
+import 'package:app4training/data/globals.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html_table/flutter_html_table.dart';
@@ -28,7 +29,11 @@ class ViewPage extends ConsumerWidget {
         drawer: MainDrawer(langCode),
         body: pageContent.when(
             loading: () => loadingAnimation("Loading content..."),
-            data: (content) => MainHtmlView(content),
+            data: (content) => MainHtmlView(
+                content,
+                (Globals.rtlLanguages.contains(langCode))
+                    ? TextDirection.rtl
+                    : TextDirection.ltr),
             error: (e, st) => Text(
                 "Couldn't find the content you are looking for: ${e.toString()}\nLanguage: $langCode")));
   }
@@ -39,30 +44,35 @@ class ViewPage extends ConsumerWidget {
 class MainHtmlView extends StatelessWidget {
   /// HTML code to display
   final String content;
-  const MainHtmlView(this.content, {super.key});
+
+  /// left-to-right or right-to-left (LTR / RTL)?
+  final TextDirection direction;
+  const MainHtmlView(this.content, this.direction, {super.key});
 
   @override
   Widget build(BuildContext context) {
     return SingleChildScrollView(
         child: Column(
       children: [
         SelectionArea(
+            child: Directionality(
+                textDirection: direction,
 //            child: Html(
 //                data: content,
-            child: Html.fromDom(
-                document: sanitize(content),
-                extensions: const [TableHtmlExtension()],
-                style: {
-                  "table": Style(
-                      // set table width, otherwise they're broken
-                      width: Width(MediaQuery.of(context).size.width - 50))
-                },
-                onAnchorTap: (url, _, __) {
-                  debugPrint("Link tapped: $url");
-                  if (url != null) {
-                    Navigator.pushNamed(context, '/view$url');
-                  }
-                }))
+                child: Html.fromDom(
+                    document: sanitize(content),
+                    extensions: const [TableHtmlExtension()],
+                    style: {
+                      "table": Style(
+                          // set table width, otherwise they're broken
+                          width: Width(MediaQuery.of(context).size.width - 50))
+                    },
+                    onAnchorTap: (url, _, __) {
+                      debugPrint("Link tapped: $url");
+                      if (url != null) {
+                        Navigator.pushNamed(context, '/view$url');
+                      }
+                    })))
       ],
     ));
   }

diff --git a/lib/widgets/main_drawer.dart b/lib/widgets/main_drawer.dart
@@ -26,7 +26,12 @@ class MainDrawer extends ConsumerWidget {
                 Text("Content", style: Theme.of(context).textTheme.titleLarge)),
       ),
       // Menu with all the pages
-      Expanded(child: ListView(children: _buildPageList(context, ref))),
+      Expanded(
+          child: Directionality(
+              textDirection: Globals.rtlLanguages.contains(langCode)
+                  ? TextDirection.rtl
+                  : TextDirection.ltr,
+              child: ListView(children: _buildPageList(context, ref)))),
       const LanguageSelection()
     ]));
   }