Bug 261086

Summary: IBM Plex Sans Condensed is not correctly displayed in combination of ::first-letter
Product: WebKit Reporter: chrillek <ck>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: karlcow, mmaxfield
Priority: P2 Keywords: BrowserCompat
Version: Safari 16   
Hardware: Unspecified   
OS: iOS 15   
Attachments:
Description Flags
First-letter styling in Firefox (above) and Safari. FF is correct
none
rendering in Safari, firefox none

chrillek
Reported 2023-09-03 10:34:52 PDT
Created attachment 467531 [details] First-letter styling in Firefox (above) and Safari. FF is correct Open https://bru6.de/unterwegs/blog/ljubljana/ in Safari in a mobile view (either width < 768 pixel in portrait mode or height < 600 in landscape). The initial letter/first-letter of the first paragraph of text should be displayed in "IBM Plex Sans Condensed" and is displayed as that in Firefox and Chrome. Safari, however, displays the first letter in "IBM Plex Serif". Inquiring the computed style with JavaScript first = document.querySelector('.content p:nth-of-type(1):not(.book-summary)'); st = getComputedStyle(first,"::first-letter"); console.log(st.getPropertyValue('font-family')); logs the correct font family, but the display is wrong.
Attachments
First-letter styling in Firefox (above) and Safari. FF is correct (712.88 KB, image/png)
2023-09-03 10:34 PDT, chrillek 		no flags
Details
rendering in Safari, firefox (146.40 KB, image/png)
2023-09-03 22:07 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2023-09-03 22:07:29 PDT
Created attachment 467534 [details] rendering in Safari, firefox That doesn't seem related to ::first-letter at all, but to the font itself. I changed the font to be color: red, and font-family: Impact And this is correctly applied in Safari. So this is "IBM Plex Sans Condensed" which doesn't seem to be understood by Safari. https://bru6.de/unterwegs/fonts/ibm-plex-sans-condensed-v7-latin-regular.woff2 https://bru6.de/unterwegs/fonts/ibm-plex-sans-condensed-v7-latin-ext_latin-700.woff2
Karl Dubost
Comment 2 2023-09-03 22:14:10 PDT
@media screen and (min-height: 600px) { .content p:nth-of-type(1):not(.book-summary)::first-letter { color: #bbb; text-shadow: 1px 1px 2px #000; font-family: var(--sans-serif-font); margin-right: 0.5rem; } @supports (initial-letter: 3) or (-webkit-initial-letter: 3) { .content p:nth-of-type(1):not(.booksummary)::first-letter { -webkit-initial-letter: 3; initial-letter: 3; } } :root { --sans-serif-font: "IBM Plex Sans Condensed"; --serif-font: "IBM Plex Serif"; --blue: #1e73be; --light-blue: #2f84cf; --link-blue: #3273dc; --white-fg: #fff; --light-gray: #eee; --dark-gray: #aaa; --foreground: #000; } /* ibm-plex-sans-condensed-regular - latin */ @font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-condensed-v7-latin-regular.woff2") format("woff2"); } /* ibm-plex-sans-condensed-italic - latin */ @font-face { font-family: "IBM Plex Sans Condensed"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-condensed-v7-latin-italic.woff2") format("woff2"); } /* ibm-plex-sans-condensed-700 - latin-ext_latin */ @font-face { font-family: "IBM Plex Sans Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-condensed-v7-latin-ext_latin-700.woff2") format("woff2"); }
chrillek
Comment 3 2023-09-03 22:57:38 PDT
After I reported the bug, I read at caniuse that Safari can’t cope with _web fonts_ in this situation. So it is related to the font, but it’s not the font that is buggy.
Karl Dubost
Comment 4 2023-09-04 01:58:47 PDT
Thanks for the digging. Indeed Duplicate of Bug 195002 *** This bug has been marked as a duplicate of bug 195002 ***
Note You need to log in before you can comment on or make changes to this bug.