self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-10-31 00:07:48 +02:00
Code Issues Releases Activity

iOS: Resolves #6685: Respect system accessibility font size in rendered markdown (#6686)

Browse Source
This commit is contained in:
Henry Heino
2022-07-28 09:02:46 -07:00
committed by GitHub
parent fb372723a4
commit d2a6d24846
3 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
View File

@@ -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 =
`
<!DOCTYPE html>
@@ -146,6 +157,9 @@ export default function useSource(noteBody: string, noteMarkupLanguage: number,
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
${shim.mobilePlatform() === 'ios' ? iOSSpecificCss : ''}
</style>
${assetsToHeaders(result.pluginAssets, { asHtml: true })}
</head>
<body>

15
packages/app-mobile/components/NoteEditor/CodeMirror/theme.ts vendored
View File

@@ -30,11 +30,20 @@ const createTheme = (theme: any): Extension[] => {
const baseGlobalStyle: Record<string, string> = {
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<string, string> = { };
const baseContentStyle: Record<string, string> = { };
const baseContentStyle: Record<string, string> = {
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<string, string> = { };
const blurredSelectionStyle: Record<string, string> = { };

6
packages/app-mobile/components/NoteEditor/NoteEditor.tsx
View File

@@ -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(),
};
}