feat(framework): add override font-family for glyphs with diacritics (#…

…2402)
SAP · Nov 5, 2020 · 85198f2 · 85198f2
1 parent c8bf4e5
commit 85198f2
Show file tree

Hide file tree

Showing 38 changed files with 148 additions and 72 deletions.
diff --git a/packages/base/src/FontFace.js b/packages/base/src/FontFace.js
@@ -56,18 +56,63 @@ const fontFaceCSS = `
 	}
 `;
 
-const insertFontFace = () => {
-	if (document.querySelector(`head>style[data-ui5-font-face]`)) {
-		return;
+/**
+ * Some diacritics are supported by the 72 font:
+ *  * Grave
+ *  * Acute
+ *  * Circumflex
+ *  * Tilde
+ *
+ * However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
+ *  * Breve
+ *  * Horn
+ *  * Dot below
+ *  * Hook above
+ *
+ *
+ * Override for the characters that aren't covered by the '72' font to other system fonts
+ *
+ * U+0102-0103: A and a with Breve
+ * U+01A0-01A1: O and o with Horn
+ * U+01AF-01B0: U and u with Horn
+ * U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
+ * U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
+ *
+ */
+const overrideFontFaceCSS = `
+	@font-face {
+		font-family: '72override';
+		unicode-range: U+0102-0103, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EB7, U+1EB8-1EC7, U+1EC8-1ECB, U+1ECC-1EE3, U+1EE4-1EF1, U+1EF4-1EF7;
+		src: local('Arial'), local('Helvetica'), local('sans-serif');
 	}
+`;
 
-	// If OpenUI5 is found, let it set the font
+const insertFontFace = () => {
 	const OpenUI5Support = getFeature("OpenUI5Support");
-	if (OpenUI5Support && OpenUI5Support.isLoaded()) {
-		return;
+
+	// Only set the main font if there is no OpenUI5 support, or there is, but OpenUI5 is not loaded
+	if (!OpenUI5Support || !OpenUI5Support.isLoaded()) {
+		insertMainFontFace();
 	}
 
-	createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
+	// Always set the override font - OpenUI5 in CSS Vars mode does not set it, unlike the main font
+	insertOverrideFontFace();
+};
+
+const insertMainFontFace = () => {
+	if (!document.querySelector(`head>style[data-ui5-font-face]`)) {
+		createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
+	}
+};
+
+const insertOverrideFontFace = () => {
+	if (!document.querySelector(`head>style[data-ui5-font-face-override]`)) {
+		createStyleInHead(overrideFontFaceCSS, { "data-ui5-font-face-override": "" });
+	}
 };
 
 export default insertFontFace;
diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css
@@ -34,7 +34,7 @@
 
 .ui5-nli-group-heading {
 	color: var(--sapGroup_TitleTextColor);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontHeader6Size);
 	white-space: nowrap;
 	overflow: hidden;
@@ -50,7 +50,7 @@
 	margin-right: 1rem;
 	color: var(--sapList_TableGroupHeaderTextColor);
 	font-size: var(--sapFontHeader6Size);
-	font-family: var(--sapFontHeaderFamily);
+	font-family: "72override", var(--sapFontHeaderFamily);
 }
 
 [dir="rtl"] .ui5-nli-group-toggle-btn {
@@ -60,4 +60,4 @@
 [dir="rtl"] .ui5-nli-group-counter {
 	margin-right: 0.25rem;
 	margin-left: 1rem;
-}
+}
diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css
@@ -61,7 +61,7 @@
 	flex: 1;
 	width: 100%;
 	padding: 0 1rem 0 0.75rem;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	box-sizing: border-box;
 }
 
@@ -136,4 +136,4 @@
 
 [dir="rtl"] .ui5-nli-footer-showMore {
 	margin-right: 1rem;
-}
+}
diff --git a/packages/fiori/src/themes/ProductSwitch.css b/packages/fiori/src/themes/ProductSwitch.css
@@ -1,5 +1,5 @@
 :host {
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 }
 
@@ -27,4 +27,4 @@
 		padding: 0;
 		width: 100%;
 	}
-}
+}
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
@@ -10,7 +10,7 @@
 	align-items: center;
 	background: var(--sapShellColor);
 	height: 2.75rem;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	box-sizing: border-box;
@@ -92,7 +92,7 @@ slot[name="profile"] {
 
 .ui5-shellbar-menu-button-title {
 	display: inline-block;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	margin: 0;
 	font-size: 0.75rem;
 	white-space: nowrap;
@@ -340,7 +340,7 @@ slot[name="profile"] {
 	justify-content: center;
 	align-items: center;
 	font-size: var(--sapFontSmallSize);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	z-index: 2;
 	box-sizing: border-box;
 }

diff --git a/packages/fiori/src/themes/UploadCollection.css b/packages/fiori/src/themes/UploadCollection.css
@@ -110,7 +110,7 @@
 }
 
 .uc-dnd-overlay .dnd-overlay-text {
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapMFontHeader4Size);
 	color: var(--sapContent_NonInteractiveIconColor);
 }

diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css
@@ -53,7 +53,7 @@
 
 .ui5-uci-file-name {
 	display: block;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontLargeSize);
 	color: var(--sapTextColor);
 	margin-bottom: 0.25rem;
@@ -66,7 +66,7 @@
 
 .ui5-uci-description {
 	margin-top: 0.375rem;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontMediumSize);
 	color: var(--sapContent_LabelColor);
 	white-space: initial;
@@ -80,7 +80,7 @@
 }
 
 .ui5-uci-file-extension {
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontMediumSize);
 	color: var(--sapTextColor);
 	white-space: no-wrap;

diff --git a/packages/main/src/themes/Badge.css b/packages/main/src/themes/Badge.css
@@ -11,7 +11,7 @@
 	border: solid 1px var(--sapLegendColor1);
 	border-radius: 1.125em;
 	box-sizing: border-box;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	text-align: center;
 }
 

diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css
@@ -7,7 +7,7 @@
 :host {
 	min-width: var(--_ui5_button_base_min_width);
 	height: var(--_ui5_button_base_height);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	text-shadow: var(--_ui5_button_text_shadow);
 	border-radius: var(--_ui5_button_border_radius);

diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
@@ -81,7 +81,7 @@
 }
 
 .ui5-calheader-middlebtn {
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	width: var(--_ui5_calendar_header_middle_button_width);
 	flex: var(--_ui5_calendar_header_middle_button_flex);
 	position: relative;

diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css
@@ -14,7 +14,7 @@
 	border-radius: .25rem;
 	border: 1px solid var(--_ui5_card_border_color);
 	overflow: hidden;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	box-sizing: border-box;
 }
@@ -93,7 +93,7 @@
 
 .ui5-card-header .ui5-card-status {
 	display: inline-block;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
 	color: var(--sapTile_TextColor);
 	text-align: left;
@@ -106,15 +106,15 @@
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-heading {
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapMFontHeader5Size);
 	font-weight: normal;
 	color: var(--sapTile_TitleTextColor);
 	max-height: 3.5rem;
 }
 
 .ui5-card-header .ui5-card-header-text .ui5-card-subheading {
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	color: var(--sapTile_TextColor);

diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css
@@ -19,7 +19,7 @@
 	height: var(--_ui5_day_picker_item_height);
 	margin-top: var(--_ui5_daypicker_item_margin);
 	margin-right: var(--_ui5_daypicker_item_margin);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	border-radius: var(--_ui5_daypicker_item_border_radius);
 }
 
@@ -31,7 +31,7 @@
 	display: flex;
 	flex-basis: 87.5%;
 	flex-direction: column;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 }
 
 .ui5-dp-days-names-container {
@@ -184,4 +184,4 @@
 
 .ui5-dp-emptyweek {
 	height: var(--_ui5_day_picker_empty_height);
-}
+}
diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css
@@ -10,7 +10,7 @@
 	height: var(--_ui5_input_height);
 	color: var(--sapField_TextColor);
 	font-size: var(--sapFontSize);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-style: normal;
 	background-color: var(--sapField_Background);
 	border: 1px solid var(--sapField_BorderColor);

diff --git a/packages/main/src/themes/Label.css b/packages/main/src/themes/Label.css
@@ -5,7 +5,7 @@
 :host {
 	max-width: 100%;
 	color: var(--sapContent_LabelColor);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	cursor: text;
@@ -68,4 +68,4 @@ bdi{
 :host([required][show-colon]) [dir="rtl"] .ui5-label-required-colon:after {
 	margin-right: .125rem;
 	margin-left: 0;
-}
+}
diff --git a/packages/main/src/themes/Link.css b/packages/main/src/themes/Link.css
@@ -7,7 +7,7 @@
 :host {
 	max-width: 100%;
 	color: var(--sapLinkColor);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	cursor: pointer;
 	outline: none;

diff --git a/packages/main/src/themes/List.css b/packages/main/src/themes/List.css
@@ -40,7 +40,7 @@
 	text-overflow: ellipsis;
 	box-sizing: border-box;
 	font-size: var(--sapMFontHeader4Size);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	color: var(--sapGroup_TitleTextColor);
 	height: 3rem;
 	line-height: 3rem;
@@ -54,7 +54,7 @@
 	box-sizing: border-box;
 	-webkit-text-size-adjust: none;	/* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */
 	font-size: var(--sapFontSize);
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	line-height: 2rem;
 	background-color: var(--sapList_FooterBackground);
 	color: var(--ui5_list_footer_text_color);

diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css
@@ -69,6 +69,6 @@
 .ui5-li-content {
 	max-width: 100%;
 	min-height: 1px; /* IE specific: fixes vertical centering with flex  */
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	pointer-events: none;  /* IE specific: fixes focus crrectly applied*/
-}
+}
diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css
@@ -76,7 +76,7 @@
 	width: 100%;
 	color: var(--sapTextColor);
 	line-height: 1.2;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 }
 

diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css
@@ -11,7 +11,7 @@
 	padding: 2rem 0 1rem 0;
 	display: flex;
 	flex-direction: column;
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontSize);
 	justify-content: center;
 	align-items: center;
@@ -79,4 +79,4 @@
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-}
+}
diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css
@@ -5,7 +5,7 @@
 }
 
 :host {
-	font-family: var(--sapFontFamily);
+	font-family: "72override", var(--sapFontFamily);
 	background-color: var(--sapGroup_TitleBackground);
 	border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
 }
@@ -57,7 +57,7 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	font-family: var(--sapFontHeaderFamily);
+	font-family: "72override", var(--sapFontHeaderFamily);
 	font-size: var(--sapFontHeader5Size);
 	font-weight: normal;
 	color: var(--sapGroup_TitleTextColor);

diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -46,7 +46,7 @@
     color: var(--sapPageHeader_TextColor);
     font-size: 1rem;
     font-weight: 400;
-    font-family: var(--sapFontFamily);
+    font-family: "72override", var(--sapFontFamily);
     display: flex;
     justify-content: center;
     align-items: center;