Make WordPress Core

Opened 4 months ago

Last modified 6 minutes ago

#59693 new defect (bug)

Twenty Fifteen: Apostrophe overlaps with other characters

Reported by: ashikur698's profile ashikur698 Owned by:
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 4 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 4 weeks ago.
Added patch for this ticket.
noto-serif-all-400-italic.woff (270.8 KB) - added by kushang78 4 weeks ago.
Added noto-serif-all-400-italic New Font
noto-serif-all-400-normal.woff (249.8 KB) - added by kushang78 4 weeks ago.
Added noto-serif-all-400-normal New Font
noto-serif-all-700-italic.woff (274.7 KB) - added by kushang78 4 weeks ago.
Added noto-serif-all-700-italic New Font
noto-serif-all-700-normal.woff (250.8 KB) - added by kushang78 4 weeks ago.
Added noto-serif-all-700-normal New Font
59693-31-01-2024.diff (6.0 KB) - added by kushang78 4 weeks ago.
Added patch for this ticket.
noto-serif-latin-400-italic.woff2 (175.9 KB) - added by kushang78 4 weeks ago.
Added noto-serif-latin-400-italic New Font
noto-serif-latin-400-normal.woff2 (160.9 KB) - added by kushang78 4 weeks ago.
Added noto-serif-latin-400-normal New Font
noto-serif-latin-700-italic.woff2 (179.3 KB) - added by kushang78 4 weeks ago.
Added noto-serif-latin-700-italic New Font
noto-serif-latin-700-normal.woff2 (162.0 KB) - added by kushang78 4 weeks ago.
Added noto-serif-latin-700-normal New Font
59693.02.02.24.diff (20.1 KB) - added by kushang78 3 weeks ago.
Added patch for this ticket.
Screenshot 2024-02-10 at 11.27.26 PM.png (115.3 KB) - added by huzaifaalmesbah 2 weeks ago.
i tested patch but not work patch properly.
Noto-Serif-Latin-Fontsource-WOFF2.zip (60.2 KB) - added by sabernhardt 9 days ago.
WOFF2 files from Fontsource
Noto-Serif-Latin-Google-Fonts-WOFF2.zip (179.6 KB) - added by sabernhardt 9 days 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 9 days ago.
version updates within the stylesheets (add to the appropriate font files)

Change History (42)

#1 @SergeyBiryukov
4 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
4 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
4 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
4 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
4 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
3 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 3 months ago by StringPiggy (previous) (diff)

#6 @ashikur698
3 months ago

  • Keywords reporter-feedback removed

#7 @poena
5 weeks 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
4 weeks 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
4 weeks ago

Added patch for this ticket.

#9 @kushang78
4 weeks 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
4 weeks ago

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

@kushang78
4 weeks ago

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

@kushang78
4 weeks ago

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

@kushang78
4 weeks ago

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

#10 @poena
4 weeks 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
4 weeks ago

Added patch for this ticket.

@kushang78
4 weeks ago

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

@kushang78
4 weeks ago

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

@kushang78
4 weeks ago

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

@kushang78
4 weeks ago

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

#11 @kushang78
4 weeks 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 4 weeks ago by kushang78 (previous) (diff)

#12 follow-up: @poena
4 weeks ago

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

#13 in reply to: ↑ 12 @kushang78
4 weeks 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
4 weeks 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
3 weeks ago

Added patch for this ticket.

#15 @kushang78
3 weeks 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 3 weeks ago by kushang78 (previous) (diff)

@huzaifaalmesbah
2 weeks ago

i tested patch but not work patch properly.

#16 @poena
2 weeks ago

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

#17 @faisal03
2 weeks 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 2 weeks ago by faisal03 (previous) (diff)

#18 @huzaifaalmesbah
2 weeks 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
2 weeks 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
2 weeks 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
9 days ago

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

This looks ready to commit

#22 @sabernhardt
9 days 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
9 days ago

WOFF2 files from Fontsource

@sabernhardt
9 days 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
9 days ago

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

#23 @sabernhardt
9 days ago

  • Keywords changes-requested added

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


4 days ago

#25 @rajinsharwar
4 days 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
6 minutes 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).

Note: See TracTickets for help on using tickets.