Make WordPress Core

Opened 8 months ago

Last modified 20 hours ago

#59693 assigned defect (bug)

Twenty Fifteen: Apostrophe overlaps with other characters

Reported by: ashikur698's profile ashikur698 Owned by: desrosj's profile desrosj
Milestone: 6.6 Priority: normal
Severity: normal Version: 6.2
Component: Bundled Theme Keywords: has-patch changes-requested
Focuses: Cc:

Description

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.

Attachments (16)

smart-apostrophe-overlap-Noto-Serif.png (11.4 KB) - added by sabernhardt 8 months ago.
The curved apostrophe overlaps the next character in all variants of Noto Serif but not with Noto Sans (in the tags list)
59693.diff (26.6 KB) - added by kushang78 5 months ago.
Added patch for this ticket.
noto-serif-all-400-italic.woff (270.8 KB) - added by kushang78 5 months ago.
Added noto-serif-all-400-italic New Font
noto-serif-all-400-normal.woff (249.8 KB) - added by kushang78 5 months ago.
Added noto-serif-all-400-normal New Font
noto-serif-all-700-italic.woff (274.7 KB) - added by kushang78 5 months ago.
Added noto-serif-all-700-italic New Font
noto-serif-all-700-normal.woff (250.8 KB) - added by kushang78 5 months ago.
Added noto-serif-all-700-normal New Font
59693-31-01-2024.diff (6.0 KB) - added by kushang78 5 months ago.
Added patch for this ticket.
noto-serif-latin-400-italic.woff2 (175.9 KB) - added by kushang78 5 months ago.
Added noto-serif-latin-400-italic New Font
noto-serif-latin-400-normal.woff2 (160.9 KB) - added by kushang78 5 months ago.
Added noto-serif-latin-400-normal New Font
noto-serif-latin-700-italic.woff2 (179.3 KB) - added by kushang78 5 months ago.
Added noto-serif-latin-700-italic New Font
noto-serif-latin-700-normal.woff2 (162.0 KB) - added by kushang78 5 months ago.
Added noto-serif-latin-700-normal New Font
59693.02.02.24.diff (20.1 KB) - added by kushang78 5 months ago.
Added patch for this ticket.
Screenshot 2024-02-10 at 11.27.26 PM.png (115.3 KB) - added by huzaifaalmesbah 4 months ago.
i tested patch but not work patch properly.
Noto-Serif-Latin-Fontsource-WOFF2.zip (60.2 KB) - added by sabernhardt 4 months ago.
WOFF2 files from Fontsource
Noto-Serif-Latin-Google-Fonts-WOFF2.zip (179.6 KB) - added by sabernhardt 4 months ago.
WOFF2 files from Google Fonts (variable, so 400-normal is the same as 700-normal and the two italic files are the same)
59693.stylesheets-only.diff (44.7 KB) - added by sabernhardt 4 months ago.
version updates within the stylesheets (add to the appropriate font files)

Change History (50)

#1 @SergeyBiryukov
8 months ago

  • Component changed from General to Bundled Theme
  • Summary changed from Text Issue with Twenty Fifteen Theme to Twenty Fifteen: Apostrophe overlaps with other characters

@sabernhardt
8 months ago

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

#2 @sabernhardt
8 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.5
  • Version set to 6.2

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.

#3 follow-up: @Ankit K Gupta
8 months ago

  • Keywords needs-testing-info reporter-feedback added

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!

https://i.imgur.com/tySpKac.jpg

#4 in reply to: ↑ 3 @ashikur698
8 months ago

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!

https://i.imgur.com/tySpKac.jpg

#5 @StringPiggy
7 months ago

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?

Last edited 7 months ago by StringPiggy (previous) (diff)

#6 @ashikur698
7 months ago

  • Keywords reporter-feedback removed

#7 @poena
5 months ago

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?

#8 @sabernhardt
5 months ago

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
5 months ago

Added patch for this ticket.

#9 @kushang78
5 months ago

  • Keywords has-patch added; needs-patch removed

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
5 months ago

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

@kushang78
5 months ago

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

@kushang78
5 months ago

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

@kushang78
5 months ago

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

#10 @poena
5 months ago

  • Keywords needs-refresh added

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
5 months ago

Added patch for this ticket.

@kushang78
5 months ago

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

@kushang78
5 months ago

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

@kushang78
5 months ago

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

@kushang78
5 months ago

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

#11 @kushang78
5 months ago

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.
Last edited 5 months ago by kushang78 (previous) (diff)

#12 follow-up: @poena
5 months ago

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

#13 in reply to: ↑ 12 @kushang78
5 months ago

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.

#14 @poena
5 months ago

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
5 months ago

Added patch for this ticket.

#15 @kushang78
5 months ago

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.

Last edited 5 months ago by kushang78 (previous) (diff)

@huzaifaalmesbah
4 months ago

i tested patch but not work patch properly.

#16 @poena
4 months ago

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

#17 @faisal03
4 months ago

Testing Report

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

Before

https://i.imgur.com/cjyAmoZ.png

After

https://i.imgur.com/Up3Bv6O.png

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.
Last edited 4 months ago by faisal03 (previous) (diff)

#18 @huzaifaalmesbah
4 months ago

@poena Thanks. after replace font files work good.

https://i.ibb.co/FgVwzQb/Screenshot-2024-02-13-at-4-15-53-PM.png

#19 @darshitrajyaguru97
4 months ago

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.

#20 @shailu25
4 months ago

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

#21 @swissspidy
4 months ago

  • Keywords commit added; needs-testing-info needs-refresh removed

This looks ready to commit

#22 @sabernhardt
4 months ago

  • Keywords commit removed

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
4 months ago

WOFF2 files from Fontsource

@sabernhardt
4 months ago

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

@sabernhardt
4 months ago

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

#23 @sabernhardt
4 months ago

  • Keywords changes-requested added

This ticket was mentioned in Slack in #core by rajinsharwar. View the logs.


4 months ago

#25 @rajinsharwar
4 months ago

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

#26 @sabernhardt
4 months ago

  • Milestone changed from 6.5 to 6.6

Moving this to the next release cycle.

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

This ticket was mentioned in Slack in #core-themes by karmatosed. View the logs.


2 months ago

#28 @karmatosed
2 months ago

  • Keywords commit added
  • Owner set to desrosj
  • Status changed from new to assigned

@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.

This ticket was mentioned in PR #6823 on WordPress/wordpress-develop by @peterwilsoncc.


9 days ago
#29

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.

@sabernhardt commented on PR #6823:


6 days ago
#30

  • 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.)

@peterwilsoncc commented on PR #6823:


6 days ago
#31

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

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


4 days ago

#33 @sabernhardt
4 days ago

  • Keywords commit removed

@sabernhardt commented on PR #6823:


20 hours ago
#34

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:
https://github.com/WordPress/wordpress-develop/assets/17100257/e71eabe0-4843-4cdd-8d00-c8c94ed3e181

separation with version 23:
https://github.com/WordPress/wordpress-develop/assets/17100257/437c1c71-a605-4ccd-b1bc-d1481e3dd506

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.

Note: See TracTickets for help on using tickets.