Twenty Fifteen: Apostrophe overlaps with other characters

[ashikur698]

Seems like whenever I try to use this character - ʼ. The character overlaps with normal characters like in this screenshot - ​https://prnt.sc/GxDU_EN4319z.

Steps to recreate this issue:

1. Install Twenty Fifteen Theme
2. Create a post
3. Use that same character - ʼ in the title or anywhere else.

[sabernhardt]

The curved apostrophe overlaps the next character in all variants of Noto Serif but not with Noto Sans (in the tags list)

[sabernhardt]

Hi and thanks for the report!

The apostrophe problem is not quite everywhere; Noto Sans is apparently fine. The Noto Serif font files need to be updated, though. We probably should check other fonts for available updates too.

I tried the old Twenty Fifteen stylesheet URL, fetching from Google Fonts, and their version works.

[Ankit K Gupta]

Hi @ashikur698 I tried this issue with the Twenty Fifteen theme and looks good to me.
Could you please share/update some more details if this issue needs any specific steps to reproduce? thanks!

[ashikur698]

Kindly use the same character that I've mentioned. Just copy it. Replying to Ankit K Gupta:

Hi @ashikur698 I tried this issue with the Twenty Fifteen theme and looks good to me.
Could you please share/update some more details if this issue needs any specific steps to reproduce? thanks!

[StringPiggy]

I can reproduce this issue according to @ashikur698 instructions:
​https://prnt.sc/PZq_ZQJFBWKX

The current font we are using is v21 for the Noto Serif fonts.
The new font v23 resolves this issue but looks slightly different from the v21.

​https://prnt.sc/LirfdwJ92l9o

Would we want to update Noto Serif fonts to v23?

[poena]

It is not clear to me how the versions are found. Is 23 still the latest? If not, is there anything that prevents using the latest?

[sabernhardt]

I remember seeing similar version numbers on ​Fontsource, but I cannot find them there anymore. The ​Google Fonts stylesheet from older versions of Twenty Fifteen now shows the version number of Noto Serif as v23.

For the themes up to Twenty Seventeen, most fonts are only one version ahead of last year's and Merriweather is the same.

Font	Themes have:	Google has:
Libre Franklin	v13	v14
Merriweather	v30	v30
Montserrat	v25	v26
Inconsolata	v31	v32
Noto Sans	v27	v35
Noto Serif	v21	v23
Lato	v23	v24
Bitter	v32	v33
Source Sans Pro	v21	v22
Open Sans	v34	v40

[kushang78]

Added patch for this ticket.

[kushang78]

I’ve Updated the below Fonts for twentyfifteen Theme

Below is lists,

• noto-serif/noto-serif-all-400-italic.woff
• noto-serif/noto-serif-all-400-normal.woff
• noto-serif/noto-serif-all-700-italic.woff
• noto-serif/noto-serif-all-700-normal.woff

By updating the fonts, Apostrophe overlaps with other characters issue is resolved now.

Please check the diff file that I've attached!

Thanks!

[kushang78]

Added noto-serif-all-400-italic New Font

[kushang78]

Added noto-serif-all-400-normal New Font

[kushang78]

Added noto-serif-all-700-italic New Font

[kushang78]

Added noto-serif-all-700-normal New Font

[poena]

It may be a good idea to routinely update fonts, for all bundled themes.

@kushang78 Thank you for working on this.
I have a question, why was the latin and latin extended removed?

I also want to suggest the following changes:

• The license file must not be removed.
• .woff2 is the newer format of the two, and when possible it should be used with .woff as a fallback, like before.

[kushang78]

Added patch for this ticket.

[kushang78]

Added noto-serif-latin-400-italic New Font

[kushang78]

Added noto-serif-latin-400-normal New Font

[kushang78]

Added noto-serif-latin-700-italic New Font

[kushang78]

Added noto-serif-latin-700-normal New Font

[kushang78]

The Changes:

• Attached new diff file.
• Added the latest Latin woff2 fonts for noto-serif.
  • Attached: noto-serif-latin-400-italic.woff2
  • Attached: noto-serif-latin-400-normal.woff2
  • Attached: noto-serif-latin-700-italic.woff2
  • Attached: noto-serif-latin-700-normal.woff2
• Added license file.

[poena]

@kushang78 the new diff, 59693-31-01-2024.diff only removes empty lines?

[kushang78]

Replying to poena:

@kushang78 the new diff, 59693-31-01-2024.diff only removes empty lines?

Yes @poena , I've reverted all the code related changes. And Updates only the fonts that I've attached above.

[poena]

So if I understand correctly, the font files that were uploaded are:

• All Noto Serif fallback fonts, noto-serif-all-X, woff format.
• Noto Serif Latin, woff 2

Are there any updates for these sets available from the font provider?
-cyrillic
-cyrillic-ext
-greek
-greek-ext
-latin-ext
-vietnamese

Which versions were uploaded?
The CSS still uses v21 and needs to be updated. Example:

./noto-serif/noto-serif-all-400-normal.woff?ver=21

[kushang78]

Added patch for this ticket.

[kushang78]

Yes @poena ,

I’ve updated only below Noto Serif fonts. There is no requirement to update the other fonts.

• noto-serif-all-400-italic.woff
• noto-serif-all-400-normal.woff
• noto-serif-all-700-italic.woff
• noto-serif-all-700-normal.woff
• noto-serif-latin-400-italic.woff2
• noto-serif-latin-400-normal.woff2
• noto-serif-latin-700-italic.woff2
• noto-serif-latin-700-normal.woff2

There are no updates and requirement for the below sets of fonts!

• cyrillic
• cyrillic-ext
• greek
• greek-ext
• latin-ext
• vietnamese

In attached latest diff file, According to the #comment:8, I’ve included the latest v23 for the noto serif fonts that I’ve mentioned above.

[huzaifaalmesbah]

i tested patch but not work patch properly.

[poena]

@huzaifaalmesbah Thank you for testing. Did you download and replace the font files?

[faisal03]

Testing Report

I have applied patch and downloaded + replaced the font files and it seems to be working.

Before

After

Environment

• OS: macOS
• Localhost Server: Nginx
• PHP: 8.2.1
• WordPress: 6.4.3
• Browser: Chrome
• Theme: Twenty Fifteen

Actual Results

• ✅ The patch is working fine and the apostrophe works as expected.

[huzaifaalmesbah]

@poena Thanks. after replace font files work good.

[darshitrajyaguru97]

Testing Report:✅

Tested in the below environment:

---

PHP: 8.1.9
WordPress: 6.4.3
Theme: Twenty-Fifteen
Browser: Chrome
Plugin: No plugins

---

Before Patch Screenshot:
Screenshot: ​https://prnt.sc/QktYbWpTHTMj

---

After Patch Screenshot:
Screenshot: ​https://prnt.sc/wBkrEzrvUcg7

---

✅ Issue resolved with patch.

[shailu25]

Test Report

Tested Patch: https://core.trac.wordpress.org/attachment/ticket/59693/59693.02.02.24.diff

Testing Environment:

OS: Windows
Web Server: Nginx
PHP: 8.1.23
WordPress: 6.4.3
Browser: Chrome
Theme: Twenty Fifteen
Active Plugins: None

Actual Results:

• Apostrophe overlaps Issue Resolved With Patch & Latest Fonts.✅

Screenshots:

Before Patch: ​https://prnt.sc/n0uXr2kGj1UT
After Patch: ​https://prnt.sc/5bBKFzmy4E_B

[swissspidy]

This looks ready to commit

[sabernhardt]

This is not ready.

1. Four stylesheets refer to Noto Serif, and the patch only updates three of them.
2. The latin-ext files are not updated to version 23, but all of the Noto Serif WOFF files are.
3. The WOFF2 files do not match what I downloaded from either Fontsource or the Google Fonts stylesheet. The attached files may be better than the ones I was able to fetch, yet knowing the source is important.

[sabernhardt]

WOFF2 files from Fontsource

[sabernhardt]

WOFF2 files from Google Fonts (variable, so 400-normal is the same as 700-normal and the two italic files are the same)

[sabernhardt]

version updates within the stylesheets (add to the appropriate font files)

[rajinsharwar]

As this ticket has some recent activities, let's keep this ticket in the milestone for now, and see if we can get some updated patch. If not, we may need to bump this to 6.6 or to a minor release of 6.5

[sabernhardt]

Moving this to the next release cycle.

If anyone is curious, that specific apostrophe character is the "modifier letter apostrophe" (Unicode 02BC).

[karmatosed]

@desrosj this looks ready for commit based on today's discussion in the scrub. However, we believe that due to it being font files we might need different commit steps. If that isn't correct please let us know. Thanks.

https://core.trac.wordpress.org/ticket/59693

Apostrophe fixes for 2015 theme, including font files.

@karmatosed @sabernhardt I'm a little confused about which files from the zip are meant to be included, could you please clarify?

For now I've included the files from the Google Fonts zip but the file sizes are roughly double for each of the files which seems a lot.

• Google Fonts uses the variable font, and Fontsource did/does not, so that could easily explain the larger file size.
• If we replace only the WOFF2 format, all of the woff?ver=23 updates would need to return to woff?ver=21. (The ticket has WOFF files, though I do not know their source.)

Thank you. For this ticket I think it's better to use the non-variable fonts to keep the fix as simple as possible.

In the future, if there is a switch to variable fonts in older themes, they can be wrapped in @supports queries to allow for fallbacks.

I've pushed up the files in the Fontsouce zip on the ticket -- the files are now substantially smaller so it would be good to test they contain the expected glyphs

The font stylesheet identifies ​385 Unicode values for the Latin subset, and the newer Fontsource WOFF2 files are quite different. You could copy the ​tables I used to check them, but switch to the code editor view before pasting the HTML.

Already with Twenty Fifteen 3.7, Firefox told me it used Times New Roman instead of Noto Serif for 63 of the 112 glyphs within the U+2000-206F range. The newer Fontsource files in the patch also fall back for three more glyphs:

• 2191 Upwards Arrow
• 2193 Downwards Arrow
• 2215 Division Slash

Nine glyphs significantly changed the amount of space between them and other characters (including the U+02BC apostrophe) since the previous font version:

• 0060 Grave Accent
• 00A8 Diaeresis
• 00B4 Acute Accent
• 00B8 Cedilla
• 02BB Modifier Letter Turned Comma
• 02BC Modifier Letter Apostrophe
• 02C6 Modifier Letter Circumflex Accent
• 02DA Ring Above
• 02DC Small Tilde

separation with version 21:

separation with version 23:

Additionally, the newer font has noticeably thicker line glyphs such as dashes, and the uppercase letters are shorter now. For comparison, I made images of 83 glyphs with some considerable changes from ​version 21 to ​version 23.