prettier / prettier/prettier

HTML: Disable breaking a line at the place around Chinese or Japanese characters

Open
#16,837 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
52.3k
Forks
5k
Avg merge
19h 2m
Merged PRs (30d)
117

Description

Prettier 3.3.3
Playground link

# Options (if any):

Input:

<p>
文
句子
文
句子
文
句子
文
句子
文
句子
文
句子
文
句子
文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子
Sentence
Sentence
Sentence
Sentence
Sentence
</p>

Output:

<p>
  文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文
  句子 文 句子 文 句子 文 句子 文 句子 Sentence Sentence Sentence Sentence
  Sentence
</p>

Expected output:

<p>
  文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子
  Sentence Sentence Sentence Sentence Sentence
</p>

Why?

Firefox renders the input as the following:

<p>
  文句子文句子文句子文句子文句子文句子文句子文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 文 句子 Sentence Sentence Sentence Sentence Sentence
</p>

https://codepen.io/tats-u/pen/PoMVYev

We should ban line breaking at any places between han like Markdown. HTML and Markdown share the same line breaking handling.
For details please see the above issue and PR, and https://github.com/prettier/prettier/issues/16819.

image

Note: JSX should keep the current behavior because it is independent of (HTML/)CSS specs.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Playground reproduction and compare the HTML behavior with the referenced Markdown issue and PR. Verify that HTML no longer breaks between Han characters while JSX keeps its current behavior, then confirm the expected output against the Firefox rendering and the linked CodePen example.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript
Domain
devtools, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.