search

WordPress / wporg-main-2022

A block-based child theme for WordPress.org, plus local environment
62 stars 22 forks source link

Adjustments in the Japanese version #432

Closed nukaga closed 1 week ago

nukaga commented 2 months ago

If the Japanese translation is included with the English design, it may look strange and the font size and designations may need to be adjusted.

Points to be adjusted in the Japanese version

New TOP

About

News-Single

Download

Design samples in Figma are available here: https://www.figma.com/file/8gSnRdDBGPmpuuwOfoWM3y/Localization%3A-Japanese?type=design&node-id=1%3A2193&mode=design&t=ah3UI8Cuuav8Fyk2-1

Related Issues: Update rosetta homepages to new homepage version #266 How to Implement Web fonts for a specific language for a specific locale #427

Could someone please make the above adjustment?

t-hamano commented 2 months ago

I think it is necessary to continue discussing whether web fonts can be added in #427, so I would like to first submit a PR regarding points other than fonts (font family, font weight).

If possible, change the design of the Get started section, but if it is impossible to change the design, change the font-size to 70px. I want to Japanese below English, and change the font size between English and Japanese. I think it's important for this place to serve as a CTA, so I want the design to look cool, but the font is too big and a bit odd in Japanese.

What do you all think about this? We will probably need to prepare two "Get started" strings with different translation contexts, and only one will be localized. And if you don't need this subtext in languages other than CJK, we may need to hide it with CSS or pattern PHP files.

rocket-martue commented 1 month ago

I will suggest overriding CSS variables such as font family, font size, etc. This will keep the design of the site consistent and ensure that future pages created will reflect the changes.

nukaga commented 3 weeks ago

Thank you @t-hamano !

What do you all think about this? We will probably need to prepare two "Get started" strings with different translation contexts, and only one will be localized. And if you don't need this subtext in languages other than CJK, we may need to hide it with CSS or pattern PHP files.

The proposal was only a "hopefully". After thinking it over, I think my proposal was not a good one, because it used English as a decoration (sub-context). So here I thought it would be better to just change it to 70px.

t-hamano commented 3 weeks ago

If possible, change the design of the Get started section, but if it is impossible to change the design, change the font-size to 70px.

I considered how a change in font size could be applied and what the impact would be if this change were made.

The title of the "Getting started" section has a font size slug of heading-cta. This is defined in theme.json. This size is 120px, but was changed to 96px by the following PR:

https://github.com/WordPress/wporg-parent-2021/pull/120

So, changing the title of the "Getting started" section to 70px means reducing the value of the heading-cta font-size slug from 96px to 70px.

This font size slug is used in a variety of places.

With that in mind, would it make sense to change 96px to 70px? Below are pages that use a heading-cta slug, comparing how it looks when changed from 96px to 70px. These are the ones I have looked at, they may be on other pages too.

Top page

https://ja.wordpress.org/?new-theme=1

96px 70px
image image

WordPress 6.5

https://ja.wordpress.org/download/releases/6-5/?new-theme=1

96px 70px
image image

WordPress 6.4

https://ja.wordpress.org/download/releases/6-4/?new-theme=1

96px 70px
image image

WordPress 6.3

https://ja.wordpress.org/download/releases/6-3/?new-theme=1

96px 70px
image image
image image
nukaga commented 2 weeks ago

Thanks for sharing your insights. I may not have seen everything, but looking at the designs you presented (especially the same class in WordPress 6.5 and WordPress 6.4), the change from 96px to 70px seemed like a good one.

ryelle commented 2 weeks ago

So to summarize, the requested changes for ja.w.org are:

For the Noto Serif replacement, would updating the --wp--custom--heading--typography--font-family variable work? That should apply to all h1, h2, etc, unless they've been customized.

Does that sound right? Have I missed anything?

t-hamano commented 2 weeks ago

For the Noto Serif replacement, would updating the --wp--custom--heading--typography--font-family variable work? That should apply to all h1, h2, etc, unless they've been customized.

The Noto Serif JP font is not a font installed by default on the user's local machine, so a web font must be used.

I think the only problem is that the font published on Google Fonts is too huge in size.

image

This problem is explained in detail in the following issue:

https://github.com/WordPress/wporg-main-2022/issues/427

ryelle commented 2 weeks ago

Yes, I know — I'm also working on https://github.com/WordPress/wporg-main-2022/issues/427, I'll have an update there soon.

Can you confirm that no other style changes are requested, though?

ryelle commented 2 weeks ago

I've deployed the update to the CTA font size, and created a few PRs for updating the font — https://github.com/WordPress/wporg-mu-plugins/pull/630 for adding the file, and https://github.com/WordPress/wporg-main-2022/pull/455 for using it.

nukaga commented 1 week ago

Thank you very much!

  • Update CTA size from 96px to 70px
  • Update headings to Noto Serif JP

I think it's fine. If it gets published and I notice any oddities I'd like to raise another issue to discuss. @ryelle @t-hamano Thanks to both of you🙏