Skip to content

Commit 5a550b8

Browse files
vladitasevvladitasev
authored
feat(framework): add override font-family for glyphs with diacritics (#2402)
1 parent 682a25c commit 5a550b8

38 files changed

+148
-72
lines changed

‎packages/base/src/FontFace.js

+52-7
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

+3-3
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

+2-2
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

+2-2
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

+3-3
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

+1-1
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

+3-3
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

+1-1
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

+1-1
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

+1-1
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
}
8282

8383
.ui5-calheader-middlebtn {
84-
font-family: var(--sapFontFamily);
84+
font-family: "72override", var(--sapFontFamily);
8585
width: var(--_ui5_calendar_header_middle_button_width);
8686
flex: var(--_ui5_calendar_header_middle_button_flex);
8787
position: relative;

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
border-radius: .25rem;
1515
border: 1px solid var(--_ui5_card_border_color);
1616
overflow: hidden;
17-
font-family: var(--sapFontFamily);
17+
font-family: "72override", var(--sapFontFamily);
1818
font-size: var(--sapFontSize);
1919
box-sizing: border-box;
2020
}
@@ -93,7 +93,7 @@
9393

9494
.ui5-card-header .ui5-card-status {
9595
display: inline-block;
96-
font-family: var(--sapFontFamily);
96+
font-family: "72override", var(--sapFontFamily);
9797
font-size: var(--sapFontSmallSize);
9898
color: var(--sapTile_TextColor);
9999
text-align: left;
@@ -106,15 +106,15 @@
106106
}
107107

108108
.ui5-card-header .ui5-card-header-text .ui5-card-heading {
109-
font-family: var(--sapFontFamily);
109+
font-family: "72override", var(--sapFontFamily);
110110
font-size: var(--sapMFontHeader5Size);
111111
font-weight: normal;
112112
color: var(--sapTile_TitleTextColor);
113113
max-height: 3.5rem;
114114
}
115115

116116
.ui5-card-header .ui5-card-header-text .ui5-card-subheading {
117-
font-family: var(--sapFontFamily);
117+
font-family: "72override", var(--sapFontFamily);
118118
font-size: var(--sapFontSize);
119119
font-weight: normal;
120120
color: var(--sapTile_TextColor);

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
height: var(--_ui5_day_picker_item_height);
2020
margin-top: var(--_ui5_daypicker_item_margin);
2121
margin-right: var(--_ui5_daypicker_item_margin);
22-
font-family: var(--sapFontFamily);
22+
font-family: "72override", var(--sapFontFamily);
2323
border-radius: var(--_ui5_daypicker_item_border_radius);
2424
}
2525

@@ -31,7 +31,7 @@
3131
display: flex;
3232
flex-basis: 87.5%;
3333
flex-direction: column;
34-
font-family: var(--sapFontFamily);
34+
font-family: "72override", var(--sapFontFamily);
3535
}
3636

3737
.ui5-dp-days-names-container {
@@ -184,4 +184,4 @@
184184

185185
.ui5-dp-emptyweek {
186186
height: var(--_ui5_day_picker_empty_height);
187-
}
187+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
height: var(--_ui5_input_height);
1111
color: var(--sapField_TextColor);
1212
font-size: var(--sapFontSize);
13-
font-family: var(--sapFontFamily);
13+
font-family: "72override", var(--sapFontFamily);
1414
font-style: normal;
1515
background-color: var(--sapField_Background);
1616
border: 1px solid var(--sapField_BorderColor);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
:host {
66
max-width: 100%;
77
color: var(--sapContent_LabelColor);
8-
font-family: var(--sapFontFamily);
8+
font-family: "72override", var(--sapFontFamily);
99
font-size: var(--sapFontSize);
1010
font-weight: normal;
1111
cursor: text;
@@ -68,4 +68,4 @@ bdi{
6868
:host([required][show-colon]) [dir="rtl"] .ui5-label-required-colon:after {
6969
margin-right: .125rem;
7070
margin-left: 0;
71-
}
71+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
:host {
88
max-width: 100%;
99
color: var(--sapLinkColor);
10-
font-family: var(--sapFontFamily);
10+
font-family: "72override", var(--sapFontFamily);
1111
font-size: var(--sapFontSize);
1212
cursor: pointer;
1313
outline: none;

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
text-overflow: ellipsis;
4141
box-sizing: border-box;
4242
font-size: var(--sapMFontHeader4Size);
43-
font-family: var(--sapFontFamily);
43+
font-family: "72override", var(--sapFontFamily);
4444
color: var(--sapGroup_TitleTextColor);
4545
height: 3rem;
4646
line-height: 3rem;
@@ -54,7 +54,7 @@
5454
box-sizing: border-box;
5555
-webkit-text-size-adjust: none; /* To improve readability Mobile Safari automatically increases the size of small text so let's disable this */
5656
font-size: var(--sapFontSize);
57-
font-family: var(--sapFontFamily);
57+
font-family: "72override", var(--sapFontFamily);
5858
line-height: 2rem;
5959
background-color: var(--sapList_FooterBackground);
6060
color: var(--ui5_list_footer_text_color);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,6 @@
6969
.ui5-li-content {
7070
max-width: 100%;
7171
min-height: 1px; /* IE specific: fixes vertical centering with flex */
72-
font-family: var(--sapFontFamily);
72+
font-family: "72override", var(--sapFontFamily);
7373
pointer-events: none; /* IE specific: fixes focus crrectly applied*/
74-
}
74+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
width: 100%;
7777
color: var(--sapTextColor);
7878
line-height: 1.2;
79-
font-family: var(--sapFontFamily);
79+
font-family: "72override", var(--sapFontFamily);
8080
font-size: var(--sapFontSize);
8181
}
8282

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
padding: 2rem 0 1rem 0;
1212
display: flex;
1313
flex-direction: column;
14-
font-family: var(--sapFontFamily);
14+
font-family: "72override", var(--sapFontFamily);
1515
font-size: var(--sapFontSize);
1616
justify-content: center;
1717
align-items: center;
@@ -79,4 +79,4 @@
7979
justify-content: center;
8080
align-items: center;
8181
width: 100%;
82-
}
82+
}

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
}
66

77
:host {
8-
font-family: var(--sapFontFamily);
8+
font-family: "72override", var(--sapFontFamily);
99
background-color: var(--sapGroup_TitleBackground);
1010
border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
1111
}
@@ -57,7 +57,7 @@
5757
overflow: hidden;
5858
text-overflow: ellipsis;
5959
white-space: nowrap;
60-
font-family: var(--sapFontHeaderFamily);
60+
font-family: "72override", var(--sapFontHeaderFamily);
6161
font-size: var(--sapFontHeader5Size);
6262
font-weight: normal;
6363
color: var(--sapGroup_TitleTextColor);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
color: var(--sapPageHeader_TextColor);
4747
font-size: 1rem;
4848
font-weight: 400;
49-
font-family: var(--sapFontFamily);
49+
font-family: "72override", var(--sapFontFamily);
5050
display: flex;
5151
justify-content: center;
5252
align-items: center;

0 commit comments

Comments
 (0)