From d2a6d248469737c7530272ccc6e015306d0d3c36 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Thu, 28 Jul 2022 09:02:46 -0700
Subject: [PATCH] iOS: Resolves #6685: Respect system accessibility font size
in rendered markdown (#6686)
---
.../components/NoteBodyViewer/hooks/useSource.ts | 14 ++++++++++++++
.../components/NoteEditor/CodeMirror/theme.ts | 15 ++++++++++++---
.../components/NoteEditor/NoteEditor.tsx | 6 +++++-
3 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts b/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
index 28811ea02..376ca712c 100644
--- a/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
+++ b/packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
@@ -139,6 +139,17 @@ export default function useSource(noteBody: string, noteMarkupLanguage: number,
js.push('}');
js.push('true;');
+ // iOS doesn't automatically adjust the WebView's font size to match users'
+ // accessibility settings. To do this, we need to tell it to match the system font.
+ // See https://github.com/ionic-team/capacitor/issues/2748#issuecomment-612923135
+ const iOSSpecificCss = `
+ @media screen {
+ :root body {
+ font: -apple-system-body;
+ }
+ }
+ `;
+
html =
`
@@ -146,6 +157,9 @@ export default function useSource(noteBody: string, noteMarkupLanguage: number,
+
${assetsToHeaders(result.pluginAssets, { asHtml: true })}
diff --git a/packages/app-mobile/components/NoteEditor/CodeMirror/theme.ts b/packages/app-mobile/components/NoteEditor/CodeMirror/theme.ts
index 7be933663..7678a1f55 100644
--- a/packages/app-mobile/components/NoteEditor/CodeMirror/theme.ts
+++ b/packages/app-mobile/components/NoteEditor/CodeMirror/theme.ts
@@ -30,11 +30,20 @@ const createTheme = (theme: any): Extension[] => {
const baseGlobalStyle: Record = {
color: theme.color,
backgroundColor: theme.backgroundColor,
- fontFamily: theme.fontFamily,
- fontSize: `${theme.fontSize}px`,
+
+ // On iOS, apply system font scaling (e.g. font scaling
+ // set in accessibility settings).
+ font: '-apple-system-body',
};
const baseCursorStyle: Record = { };
- const baseContentStyle: Record = { };
+ const baseContentStyle: Record = {
+ fontFamily: theme.fontFamily,
+
+ // To allow accessibility font scaling, we also need to set the
+ // fontSize to a value in `em`s (relative scaling relative to
+ // parent font size).
+ fontSize: `${theme.fontSize}em`,
+ };
const baseSelectionStyle: Record = { };
const blurredSelectionStyle: Record = { };
diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
index eece71198..316c3631d 100644
--- a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
+++ b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx
@@ -51,6 +51,10 @@ function useCss(themeId: number): string {
:root {
background-color: ${theme.backgroundColor};
}
+
+ body {
+ font-size: 13pt;
+ }
`;
}, [themeId]);
}
@@ -88,7 +92,7 @@ function useHtml(css: string): string {
function editorTheme(themeId: number) {
return {
...themeStyle(themeId),
- fontSize: 15,
+ fontSize: 0.85, // em
fontFamily: fontFamilyFromSettings(),
};
}