From 70a8cd5329a2ea699c90364b0ba97c99b1a8ddb4 Mon Sep 17 00:00:00 2001
From: Simon Laux <mobile.info@simonlaux.de>
Date: Sat, 6 Mar 2021 15:25:33 +0100
Subject: [PATCH] add an experimental switch to disable font ligatures
 https://support.delta.chat/t/disabling-font-ligatures/1490

---
 CHANGELOG.md                                 |  3 +++
 _locales/_untranslated_en.json               |  3 +++
 scss/_css_settings.scss                      |  5 +++++
 scss/manifest.scss                           |  2 ++
 src/renderer/App.tsx                         | 15 ++++++++++++++-
 src/renderer/components/dialogs/Settings.tsx |  4 ++++
 src/shared/shared-types.d.ts                 |  1 +
 src/shared/state.ts                          |  1 +
 8 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 scss/_css_settings.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7ee27a9dd..fec789e2f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## [Unreleased][unreleased]
 
+### Added
+- add experimental setting to disable font ligatures, see https://support.delta.chat/t/disabling-font-ligatures/1490
+
 ## [1.15.2] - 2021-03-03
 
 ### Fixed
diff --git a/_locales/_untranslated_en.json b/_locales/_untranslated_en.json
index 4ebfa48f23..17b5401d5a 100644
--- a/_locales/_untranslated_en.json
+++ b/_locales/_untranslated_en.json
@@ -64,5 +64,8 @@
   },
   "forwared_by": {
     "message": "Forwarded by %1$s"
+  },
+  "pref_disable_fontligatures": {
+    "message": "Disable Font Ligatures (visually connected letters)"
   }
 }
diff --git a/scss/_css_settings.scss b/scss/_css_settings.scss
new file mode 100644
index 0000000000..9a67e97a85
--- /dev/null
+++ b/scss/_css_settings.scss
@@ -0,0 +1,5 @@
+body.disable_font_ligatures {
+  * {
+    font-variant-ligatures: none;
+  }
+}
diff --git a/scss/manifest.scss b/scss/manifest.scss
index fbb276d3c9..4acb084142 100644
--- a/scss/manifest.scss
+++ b/scss/manifest.scss
@@ -75,3 +75,5 @@
 @import '_offline-toast';
 
 @import '_icons';
+
+@import 'css_settings';
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 00ce8402d8..2b81038778 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -129,12 +129,23 @@ function SettingsContextWrapper({
 }) {
   const [desktopSettings, _setDesktopSettings] = useState<DesktopSettings>(null)
 
+  const applyCssSettings = (desktopSettings: DesktopSettings) => {
+    // apply disable Font Ligatures
+    const body = document.querySelector('body')
+    if (desktopSettings['disableFontLigatures']) {
+      body.classList.add('disable_font_ligatures')
+    } else {
+      body.classList.remove('disable_font_ligatures')
+    }
+  }
+
   useEffect(() => {
     ;(async () => {
       const desktopSettings = await DeltaBackend.call(
         'settings.getDesktopSettings'
       )
       _setDesktopSettings(desktopSettings)
+      applyCssSettings(desktopSettings)
     })()
   }, [])
 
@@ -147,7 +158,9 @@ function SettingsContextWrapper({
       true
     ) {
       _setDesktopSettings((prevState: DesktopSettings) => {
-        return { ...prevState, [key]: value }
+        const newState = { ...prevState, [key]: value }
+        applyCssSettings(newState)
+        return newState
       })
     }
   }
diff --git a/src/renderer/components/dialogs/Settings.tsx b/src/renderer/components/dialogs/Settings.tsx
index b7c163dec2..7f5544fef4 100644
--- a/src/renderer/components/dialogs/Settings.tsx
+++ b/src/renderer/components/dialogs/Settings.tsx
@@ -303,6 +303,10 @@ export default function Settings(props: DialogProps) {
                 </>
               )}
               <br />
+              {renderDTSettingSwitch(
+                'disableFontLigatures',
+                tx('pref_disable_fontligatures')
+              )}
               <H5>{tx('pref_imap_folder_handling')}</H5>
               {renderDeltaSwitch('inbox_watch', tx('pref_watch_inbox_folder'))}
               {renderDeltaSwitch('sentbox_watch', tx('pref_watch_sent_folder'))}
diff --git a/src/shared/shared-types.d.ts b/src/shared/shared-types.d.ts
index 36fa55c6f8..0742ecc705 100644
--- a/src/shared/shared-types.d.ts
+++ b/src/shared/shared-types.d.ts
@@ -42,6 +42,7 @@ export interface DesktopSettings {
   /** adress to the active theme file scheme: "custom:name" or "dc:name" */
   activeTheme: string
   minimizeToTray: boolean
+  disableFontLigatures: boolean
 }
 
 export interface AppState {
diff --git a/src/shared/state.ts b/src/shared/state.ts
index 7487762e55..b9d109afc3 100644
--- a/src/shared/state.ts
+++ b/src/shared/state.ts
@@ -20,6 +20,7 @@ export function getDefaultState(): AppState {
       zoomFactor: 1,
       activeTheme: 'system',
       minimizeToTray: false,
+      disableFontLigatures: false,
     },
     logins: [],
   }