From 6e1caf1243caf4b0c798e00b9b38a3168f7a22cf Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 10 Oct 2023 15:48:00 +0800 Subject: [PATCH 1/4] create a single and multi fallback font family file --- src/styles/fontFamily/index.native.ts | 18 ++---------------- src/styles/fontFamily/index.ts | 20 ++------------------ src/styles/fontFamily/multiFontFamily.ts | 19 +++++++++++++++++++ src/styles/fontFamily/singleFontFamily.ts | 17 +++++++++++++++++ 4 files changed, 40 insertions(+), 34 deletions(-) create mode 100644 src/styles/fontFamily/multiFontFamily.ts create mode 100644 src/styles/fontFamily/singleFontFamily.ts diff --git a/src/styles/fontFamily/index.native.ts b/src/styles/fontFamily/index.native.ts index 0d6c253eb3a6..53f421a58535 100644 --- a/src/styles/fontFamily/index.native.ts +++ b/src/styles/fontFamily/index.native.ts @@ -1,17 +1,3 @@ -import bold from './bold'; -import FontFamilyStyles from './types'; +import singleFontFamily from './singleFontFamily'; -const fontFamily: FontFamilyStyles = { - EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic', - EXP_NEUE_BOLD: bold, - EXP_NEUE: 'ExpensifyNeue-Regular', - EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium', - EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic', - SYSTEM: 'System', - MONOSPACE: 'ExpensifyMono-Regular', - MONOSPACE_ITALIC: 'ExpensifyMono-Regular', - MONOSPACE_BOLD: 'ExpensifyMono-Bold', - MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold', -}; - -export default fontFamily; +export default singleFontFamily; diff --git a/src/styles/fontFamily/index.ts b/src/styles/fontFamily/index.ts index 57d08ce28771..7a8267eba1a5 100644 --- a/src/styles/fontFamily/index.ts +++ b/src/styles/fontFamily/index.ts @@ -1,19 +1,3 @@ -import bold from './bold'; -import FontFamilyStyles from './types'; +import multiFontFamily from './multiFontFamily'; -// In windows and ubuntu, we need some extra system fonts for emojis to work properly -// otherwise few of them will appear as black and white -const fontFamily: FontFamilyStyles = { - EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji', - EXP_NEUE_BOLD: bold, - EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji', - EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji', - EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji', - SYSTEM: 'System', - MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', - MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', - MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', - MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', -}; - -export default fontFamily; +export default multiFontFamily; diff --git a/src/styles/fontFamily/multiFontFamily.ts b/src/styles/fontFamily/multiFontFamily.ts new file mode 100644 index 000000000000..57d08ce28771 --- /dev/null +++ b/src/styles/fontFamily/multiFontFamily.ts @@ -0,0 +1,19 @@ +import bold from './bold'; +import FontFamilyStyles from './types'; + +// In windows and ubuntu, we need some extra system fonts for emojis to work properly +// otherwise few of them will appear as black and white +const fontFamily: FontFamilyStyles = { + EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji', + EXP_NEUE_BOLD: bold, + EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji', + EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji', + EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji', + SYSTEM: 'System', + MONOSPACE: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', + MONOSPACE_ITALIC: 'ExpensifyMono-Regular, Segoe UI Emoji, Noto Color Emoji', + MONOSPACE_BOLD: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', + MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold, Segoe UI Emoji, Noto Color Emoji', +}; + +export default fontFamily; diff --git a/src/styles/fontFamily/singleFontFamily.ts b/src/styles/fontFamily/singleFontFamily.ts new file mode 100644 index 000000000000..0d6c253eb3a6 --- /dev/null +++ b/src/styles/fontFamily/singleFontFamily.ts @@ -0,0 +1,17 @@ +import bold from './bold'; +import FontFamilyStyles from './types'; + +const fontFamily: FontFamilyStyles = { + EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic', + EXP_NEUE_BOLD: bold, + EXP_NEUE: 'ExpensifyNeue-Regular', + EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium', + EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic', + SYSTEM: 'System', + MONOSPACE: 'ExpensifyMono-Regular', + MONOSPACE_ITALIC: 'ExpensifyMono-Regular', + MONOSPACE_BOLD: 'ExpensifyMono-Bold', + MONOSPACE_BOLD_ITALIC: 'ExpensifyMono-Bold', +}; + +export default fontFamily; From 2ed8b64b48227a5e5e089c86565dd217095b4678 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 10 Oct 2023 15:48:49 +0800 Subject: [PATCH 2/4] create a single and multi fallback bold file --- src/styles/fontFamily/bold/index.android.js | 5 +++-- src/styles/fontFamily/bold/index.ios.js | 5 +++-- src/styles/fontFamily/bold/index.js | 5 +++-- src/styles/fontFamily/multiFontFamily.ts | 4 ++-- src/styles/fontFamily/singleFontFamily.ts | 4 ++-- 5 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/styles/fontFamily/bold/index.android.js b/src/styles/fontFamily/bold/index.android.js index 7473e4d7533c..73ba56dc4262 100644 --- a/src/styles/fontFamily/bold/index.android.js +++ b/src/styles/fontFamily/bold/index.android.js @@ -1,3 +1,4 @@ -const bold = 'ExpensifyNeue-Bold'; +const singleBold = 'ExpensifyNeue-Bold'; +const multiBold = 'ExpensifyNeue-Bold'; -export default bold; +export {singleBold, multiBold}; diff --git a/src/styles/fontFamily/bold/index.ios.js b/src/styles/fontFamily/bold/index.ios.js index 3ba35f200d3d..a0523831a058 100644 --- a/src/styles/fontFamily/bold/index.ios.js +++ b/src/styles/fontFamily/bold/index.ios.js @@ -1,3 +1,4 @@ -const bold = 'ExpensifyNeue-Regular'; +const singleBold = 'ExpensifyNeue-Regular'; +const multiBold = 'ExpensifyNeue-Regular'; -export default bold; +export {singleBold, multiBold}; diff --git a/src/styles/fontFamily/bold/index.js b/src/styles/fontFamily/bold/index.js index 66d3c64f3565..401a808d29d6 100644 --- a/src/styles/fontFamily/bold/index.js +++ b/src/styles/fontFamily/bold/index.js @@ -1,3 +1,4 @@ -const bold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji'; +const singleBold = 'ExpensifyNeue-Regular'; +const multiBold = 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji'; -export default bold; +export {singleBold, multiBold}; diff --git a/src/styles/fontFamily/multiFontFamily.ts b/src/styles/fontFamily/multiFontFamily.ts index 57d08ce28771..2edd17548354 100644 --- a/src/styles/fontFamily/multiFontFamily.ts +++ b/src/styles/fontFamily/multiFontFamily.ts @@ -1,11 +1,11 @@ -import bold from './bold'; +import {multiBold} from './bold'; import FontFamilyStyles from './types'; // In windows and ubuntu, we need some extra system fonts for emojis to work properly // otherwise few of them will appear as black and white const fontFamily: FontFamilyStyles = { EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic, Segoe UI Emoji, Noto Color Emoji', - EXP_NEUE_BOLD: bold, + EXP_NEUE_BOLD: multiBold, EXP_NEUE: 'ExpensifyNeue-Regular, Segoe UI Emoji, Noto Color Emoji', EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium, Segoe UI Emoji, Noto Color Emoji', EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic, Segoe UI Emoji, Noto Color Emoji', diff --git a/src/styles/fontFamily/singleFontFamily.ts b/src/styles/fontFamily/singleFontFamily.ts index 0d6c253eb3a6..6d5b05a5b0aa 100644 --- a/src/styles/fontFamily/singleFontFamily.ts +++ b/src/styles/fontFamily/singleFontFamily.ts @@ -1,9 +1,9 @@ -import bold from './bold'; +import {singleBold} from './bold'; import FontFamilyStyles from './types'; const fontFamily: FontFamilyStyles = { EXP_NEUE_ITALIC: 'ExpensifyNeue-Italic', - EXP_NEUE_BOLD: bold, + EXP_NEUE_BOLD: singleBold, EXP_NEUE: 'ExpensifyNeue-Regular', EXP_NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Medium', EXP_NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic', From 91d32431cbb9f121aa49896714e7c3ca92181fef Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 10 Oct 2023 15:49:23 +0800 Subject: [PATCH 3/4] use single font family as the system fonts --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index bba62cc4f4e0..a19f3ba484c6 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -5,8 +5,8 @@ import PropTypes from 'prop-types'; import htmlRenderers from './HTMLRenderers'; import * as HTMLEngineUtils from './htmlEngineUtils'; import styles from '../../styles/styles'; -import fontFamily from '../../styles/fontFamily'; import convertToLTR from '../../libs/convertToLTR'; +import singleFontFamily from '../../styles/fontFamily/singleFontFamily'; const propTypes = { /** Whether text elements should be selectable */ @@ -70,7 +70,7 @@ function BaseHTMLEngineProvider(props) { baseStyle={styles.webViewStyles.baseFontStyle} tagsStyles={styles.webViewStyles.tagStyles} enableCSSInlineProcessing={false} - systemFonts={_.values(fontFamily)} + systemFonts={_.values(singleFontFamily)} fallbackFonts={fallbackFonts} domVisitors={{ // eslint-disable-next-line no-param-reassign From 8ade45201e53e0a11b35b40e5aa992359c8521e4 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 10 Oct 2023 15:50:00 +0800 Subject: [PATCH 4/4] remove unnecessary fallback fonts --- src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js index a19f3ba484c6..c806bedc31c7 100755 --- a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js +++ b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js @@ -60,10 +60,6 @@ function BaseHTMLEngineProvider(props) { // We need to memoize this prop to make it referentially stable. const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]); - // We need to pass multiple system-specific fonts for emojis but - // we can't apply multiple fonts at once so we need to pass fallback fonts. - const fallbackFonts = {'ExpensifyNeue-Regular': fontFamily.EXP_NEUE}; - return ( (text.data = convertToLTR(text.data)),