Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add word/line break option <wbr /> #55565

Open
hanneslsm opened this issue Oct 24, 2023 · 2 comments
Open

Add word/line break option <wbr /> #55565

hanneslsm opened this issue Oct 24, 2023 · 2 comments
Labels
[Block] Heading Affects the Headings Block [Block] Paragraph Affects the Paragraph Block [Feature] Typography Font and typography-related issues and PRs [Type] Enhancement A suggestion for improvement.

Comments

@hanneslsm
Copy link

hanneslsm commented Oct 24, 2023

What problem does this address?

Some words are too long, so they will break on mobile (even with fluid typography). Unfortunately, the word break can be incorrect.
With the wbr Tag it's possible to control where the word will break. With &shy; a hyphen will be added.

Desktop (no issues) Mobile (Wrong word/line break)
image image
The correct word break in this word would be "Verpackungs- lösungen"

What is your proposed solution?

Adding a option for line break or word break
Not sure if "(invisible)" is the best wording.
image

This is very important for making Gutenberg more attractive to non-english speaker.

@hanneslsm hanneslsm changed the title Add line break controls <wbr /> Add line break option <wbr /> Oct 24, 2023
@jordesign jordesign added [Type] Enhancement A suggestion for improvement. [Block] Heading Affects the Headings Block [Block] Paragraph Affects the Paragraph Block [Feature] Typography Font and typography-related issues and PRs labels Oct 24, 2023
@masteradhoc
Copy link
Contributor

+1 from me. We get through this also a lot and would appreciate a solution :)

@hanneslsm
Copy link
Author

For everyone reading this how to break words manually until this feature exist:

  1. Go to the Code editor and search for the word
  2. Add either &shy; (word break with hyphen) or <wbr /> (without)

@hanneslsm hanneslsm changed the title Add line break option <wbr /> Add word/line break option <wbr /> Oct 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Heading Affects the Headings Block [Block] Paragraph Affects the Paragraph Block [Feature] Typography Font and typography-related issues and PRs [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants