self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 4 deletions
Show Stats 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('}');
js.push('true;'); 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 = html =
` `
<!DOCTYPE html> <!DOCTYPE html>
@ -146,6 +157,9 @@ export default function useSource(noteBody: string, noteMarkupLanguage: number,
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
${shim.mobilePlatform() === 'ios' ? iOSSpecificCss : ''}
</style>
${assetsToHeaders(result.pluginAssets, { asHtml: true })} ${assetsToHeaders(result.pluginAssets, { asHtml: true })}
</head> </head>
<body> <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> = { const baseGlobalStyle: Record<string, string> = {
color: theme.color, color: theme.color,
backgroundColor: theme.backgroundColor, 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 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 baseSelectionStyle: Record<string, string> = { };
const blurredSelectionStyle: 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 { :root {
background-color: ${theme.backgroundColor}; background-color: ${theme.backgroundColor};
} }
body {
font-size: 13pt;
}
`; `;
}, [themeId]); }, [themeId]);
} }
@ -88,7 +92,7 @@ function useHtml(css: string): string {
function editorTheme(themeId: number) { function editorTheme(themeId: number) {
return { return {
...themeStyle(themeId), ...themeStyle(themeId),
fontSize: 15, fontSize: 0.85, // em
fontFamily: fontFamilyFromSettings(), fontFamily: fontFamilyFromSettings(),
}; };
} }