Skip to content

Commit b522a8b

Browse files
vladitasevvladitasev
committed
feat(framework): add override font-family for glyphs with diacritics (#2402)
1 parent 293c099 commit b522a8b

38 files changed

+148
-72
lines changed

‎packages/base/src/FontFace.js‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,63 @@ const fontFaceCSS = `
5656
}
5757
`;
5858

59-
const insertFontFace = () => {
60-
if (document.querySelector(`head>style[data-ui5-font-face]`)) {
61-
return;
59+
/**
60+
* Some diacritics are supported by the 72 font:
61+
* * Grave
62+
* * Acute
63+
* * Circumflex
64+
* * Tilde
65+
*
66+
* However, the following diacritics and the combination of multiple diacritics (including the supported ones) are not supported:
67+
* * Breve
68+
* * Horn
69+
* * Dot below
70+
* * Hook above
71+
*
72+
*
73+
* Override for the characters that aren't covered by the '72' font to other system fonts
74+
*
75+
* U+0102-0103: A and a with Breve
76+
* U+01A0-01A1: O and o with Horn
77+
* U+01AF-01B0: U and u with Horn
78+
* U+1EA0-1EB7: A and a with diacritics that are not supported by the font and combination of multiple diacritics
79+
* U+1EB8-1EC7: E and e with diacritics that are not supported by the font and combination of multiple diacritics
80+
* U+1EC8-1ECB: I and i with diacritics that are not supported by the font and combination of multiple diacritics
81+
* U+1ECC-1EE3: O and o with diacritics that are not supported by the font and combination of multiple diacritics
82+
* U+1EE4-1EF1: U and u with diacritics that are not supported by the font and combination of multiple diacritics
83+
* U+1EF4-1EF7: Y and y with diacritics that are not supported by the font and combination of multiple diacritics
84+
*
85+
*/
86+
const overrideFontFaceCSS = `
87+
@font-face {
88+
font-family: '72override';
89+
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;
90+
src: local('Arial'), local('Helvetica'), local('sans-serif');
6291
}
92+
`;
6393

64-
// If OpenUI5 is found, let it set the font
94+
const insertFontFace = () => {
6595
const OpenUI5Support = getFeature("OpenUI5Support");
66-
if (OpenUI5Support && OpenUI5Support.isLoaded()) {
67-
return;
96+
97+
// Only set the main font if there is no OpenUI5 support, or there is, but OpenUI5 is not loaded
98+
if (!OpenUI5Support || !OpenUI5Support.isLoaded()) {
99+
insertMainFontFace();
68100
}
69101

70-
createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
102+
// Always set the override font - OpenUI5 in CSS Vars mode does not set it, unlike the main font
103+
insertOverrideFontFace();
104+
};
105+
106+
const insertMainFontFace = () => {
107+
if (!document.querySelector(`head>style[data-ui5-font-face]`)) {
108+
createStyleInHead(fontFaceCSS, { "data-ui5-font-face": "" });
109+
}
110+
};
111+
112+
const insertOverrideFontFace = () => {
113+
if (!document.querySelector(`head>style[data-ui5-font-face-override]`)) {
114+
createStyleInHead(overrideFontFaceCSS, { "data-ui5-font-face-override": "" });
115+
}
71116
};
72117

73118
export default insertFontFace;

‎packages/fiori/src/themes/NotificationListGroupItem.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
.ui5-nli-group-heading {
3636
color: var(--sapGroup_TitleTextColor);
37-
font-family: var(--sapFontFamily);
37+
font-family: "72override", var(--sapFontFamily);
3838
font-size: var(--sapFontHeader6Size);
3939
white-space: nowrap;
4040
overflow: hidden;
@@ -50,7 +50,7 @@
5050
margin-right: 1rem;
5151
color: var(--sapList_TableGroupHeaderTextColor);
5252
font-size: var(--sapFontHeader6Size);
53-
font-family: var(--sapFontHeaderFamily);
53+
font-family: "72override", var(--sapFontHeaderFamily);
5454
}
5555

5656
[dir="rtl"] .ui5-nli-group-toggle-btn {
@@ -60,4 +60,4 @@
6060
[dir="rtl"] .ui5-nli-group-counter {
6161
margin-right: 0.25rem;
6262
margin-left: 1rem;
63-
}
63+
}

‎packages/fiori/src/themes/NotificationListItem.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
flex: 1;
6262
width: 100%;
6363
padding: 0 1rem 0 0.75rem;
64-
font-family: var(--sapFontFamily);
64+
font-family: "72override", var(--sapFontFamily);
6565
box-sizing: border-box;
6666
}
6767

@@ -136,4 +136,4 @@
136136

137137
[dir="rtl"] .ui5-nli-footer-showMore {
138138
margin-right: 1rem;
139-
}
139+
}

‎packages/fiori/src/themes/ProductSwitch.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:host {
2-
font-family: var(--sapFontFamily);
2+
font-family: "72override", var(--sapFontFamily);
33
font-size: var(--sapFontSize);
44
}
55

@@ -27,4 +27,4 @@
2727
padding: 0;
2828
width: 100%;
2929
}
30-
}
30+
}

‎packages/fiori/src/themes/ShellBar.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
align-items: center;
1111
background: var(--sapShellColor);
1212
height: 2.75rem;
13-
font-family: var(--sapFontFamily);
13+
font-family: "72override", var(--sapFontFamily);
1414
font-size: var(--sapFontSize);
1515
font-weight: normal;
1616
box-sizing: border-box;
@@ -92,7 +92,7 @@ slot[name="profile"] {
9292

9393
.ui5-shellbar-menu-button-title {
9494
display: inline-block;
95-
font-family: var(--sapFontFamily);
95+
font-family: "72override", var(--sapFontFamily);
9696
margin: 0;
9797
font-size: 0.75rem;
9898
white-space: nowrap;
@@ -340,7 +340,7 @@ slot[name="profile"] {
340340
justify-content: center;
341341
align-items: center;
342342
font-size: var(--sapFontSmallSize);
343-
font-family: var(--sapFontFamily);
343+
font-family: "72override", var(--sapFontFamily);
344344
z-index: 2;
345345
box-sizing: border-box;
346346
}

‎packages/fiori/src/themes/UploadCollection.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
}
111111

112112
.uc-dnd-overlay .dnd-overlay-text {
113-
font-family: var(--sapFontFamily);
113+
font-family: "72override", var(--sapFontFamily);
114114
font-size: var(--sapMFontHeader4Size);
115115
color: var(--sapContent_NonInteractiveIconColor);
116116
}

‎packages/fiori/src/themes/UploadCollectionItem.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353

5454
.ui5-uci-file-name {
5555
display: block;
56-
font-family: var(--sapFontFamily);
56+
font-family: "72override", var(--sapFontFamily);
5757
font-size: var(--sapFontLargeSize);
5858
color: var(--sapTextColor);
5959
margin-bottom: 0.25rem;
@@ -66,7 +66,7 @@
6666

6767
.ui5-uci-description {
6868
margin-top: 0.375rem;
69-
font-family: var(--sapFontFamily);
69+
font-family: "72override", var(--sapFontFamily);
7070
font-size: var(--sapFontMediumSize);
7171
color: var(--sapContent_LabelColor);
7272
white-space: initial;
@@ -80,7 +80,7 @@
8080
}
8181

8282
.ui5-uci-file-extension {
83-
font-family: var(--sapFontFamily);
83+
font-family: "72override", var(--sapFontFamily);
8484
font-size: var(--sapFontMediumSize);
8585
color: var(--sapTextColor);
8686
white-space: no-wrap;

‎packages/main/src/themes/Badge.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
border: solid 1px var(--sapLegendColor1);
1212
border-radius: 1.125em;
1313
box-sizing: border-box;
14-
font-family: var(--sapFontFamily);
14+
font-family: "72override", var(--sapFontFamily);
1515
text-align: center;
1616
}
1717

‎packages/main/src/themes/Button.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
:host {
88
min-width: var(--_ui5_button_base_min_width);
99
height: var(--_ui5_button_base_height);
10-
font-family: var(--sapFontFamily);
10+
font-family: "72override", var(--sapFontFamily);
1111
font-size: var(--sapFontSize);
1212
text-shadow: var(--_ui5_button_text_shadow);
1313
border-radius: var(--_ui5_button_border_radius);

‎packages/main/src/themes/CalendarHeader.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
}
7777

7878
.ui5-calheader-middlebtn {
79-
font-family: var(--sapFontFamily);
79+
font-family: "72override", var(--sapFontFamily);
8080
width: var(--_ui5_calendar_header_middle_button_width);
8181
flex: var(--_ui5_calendar_header_middle_button_flex);
8282
position: relative;

0 commit comments

Comments
 (0)