add an experimental switch to disable font ligatures

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

_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)"
   }
 }

scss/_css_settings.scss

@@ -0,0 +1,5 @@
+body.disable_font_ligatures {
+  * {
+    font-variant-ligatures: none;
+  }
+}

scss/manifest.scss

@@ -75,3 +75,5 @@
 @import '_offline-toast';
 
 @import '_icons';
+
+@import 'css_settings';

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
       })
     }
   }

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'))}

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 {

src/shared/state.ts

@@ -20,6 +20,7 @@ export function getDefaultState(): AppState {
       zoomFactor: 1,
       activeTheme: 'system',
       minimizeToTray: false,
+      disableFontLigatures: false,
     },
     logins: [],
   }