diff --git a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx index 0cc3cad4fb..72c5b984a2 100644 --- a/packages/app-mobile/components/NoteEditor/NoteEditor.tsx +++ b/packages/app-mobile/components/NoteEditor/NoteEditor.tsx @@ -99,9 +99,16 @@ function useHtml(css: string): string { } function editorTheme(themeId: number) { + const fontSizeInPx = Setting.value('style.editor.fontSize'); + + // Convert from `px` to `em`. To support font size scaling based on + // system accessibility settings, we need to provide font sizes in `em`. + // 16px is about 1em with the default root font size. + const estimatedFontSizeInEm = fontSizeInPx / 16; + return { ...themeStyle(themeId), - fontSize: 0.85, // em + fontSize: estimatedFontSizeInEm, fontFamily: fontFamilyFromSettings(), }; } diff --git a/packages/app-mobile/components/screens/Note.tsx b/packages/app-mobile/components/screens/Note.tsx index ec93d6d220..2d9eb17179 100644 --- a/packages/app-mobile/components/screens/Note.tsx +++ b/packages/app-mobile/components/screens/Note.tsx @@ -331,7 +331,7 @@ class NoteScreenComponent extends BaseScreenComponent { textAlignVertical: 'top', color: theme.color, backgroundColor: theme.backgroundColor, - fontSize: theme.fontSize, + fontSize: this.props.editorFontSize, fontFamily: editorFont(this.props.editorFont), }, noteBodyViewer: { @@ -1237,6 +1237,7 @@ const NoteScreen = connect((state: any) => { searchQuery: state.searchQuery, themeId: state.settings.theme, editorFont: [state.settings['style.editor.fontFamily']], + editorFontSize: state.settings['style.editor.fontSize'], ftsEnabled: state.settings['db.ftsEnabled'], sharedData: state.sharedData, showSideMenu: state.showSideMenu, diff --git a/packages/lib/models/Setting.ts b/packages/lib/models/Setting.ts index 8131447472..64315b91fc 100644 --- a/packages/lib/models/Setting.ts +++ b/packages/lib/models/Setting.ts @@ -1194,7 +1194,19 @@ class Setting extends BaseModel { // Deprecated in favour of windowContentZoomFactor 'style.zoom': { value: 100, type: SettingItemType.Int, public: false, storage: SettingStorage.File, isGlobal: true, appTypes: [AppType.Desktop], section: 'appearance', label: () => '', minimum: 50, maximum: 500, step: 10 }, - 'style.editor.fontSize': { value: 15, type: SettingItemType.Int, public: true, storage: SettingStorage.File, isGlobal: true, appTypes: [AppType.Desktop], section: 'appearance', label: () => _('Editor font size'), minimum: 4, maximum: 50, step: 1 }, + 'style.editor.fontSize': { + value: 15, + type: SettingItemType.Int, + public: true, + storage: SettingStorage.File, + isGlobal: true, + appTypes: [AppType.Desktop, AppType.Mobile], + section: 'appearance', + label: () => _('Editor font size'), + minimum: 4, + maximum: 50, + step: 1, + }, 'style.editor.fontFamily': (mobilePlatform) ? ({