fix(components/): fix black bg on the right half of two-color characters may not be black 修正雙色字右半的黑背景不黑的問題 #101
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…rLead.fg === colorTail.fg`
This issue was caused by the following lines:
```js
className={cx({
[`q${colorLead.fg}`]: colorLead.fg === colorTail.fg,
// ...
[`q${colorTail.fg}`]: colorLead.fg !== colorTail.fg,
// ...
```
When `colorLead.fg === colorTail.fg`, these lines were equivalent to:
```js
className={cx({
[`q${colorTail.fg}`]: true,
// ...
[`q${colorTail.fg}`]: false,
// ...
```
Note that there were two lines containing the key `q${colorTail.fg}`,
where the second one overrode the first one,
thus made the q<fg> class missing from the HTML class list.
This was introduced by commit 38f10ba
("refactor(components/TwoColorWord): extract"),
which refactored this component with `classnames`
but did not success to address this error-prone detail.
This issue is fixed by always enabling the `q${colorTail.fg}` class.
…visual effects This issue was described in commit a75d550 ("Fix two-color character rendering bug when the right-half is black."). However, another description is still given below. This issue was caused by the HTML layout of two-color chars, e.g.: ```html <span class="q15 b1"> <span class="q15 b1b0 wpadding" data-text="Ａ" style="display: inline-block; width: 24px;"> Ａ </span> Ｍ </span> ``` The "black" part of the background of the inner span is actually transparent, but the outer span has its own background (of the bg color of the left-half char), thus the "black" part of the inner span appeared to be not black. To fix this issue, WordSegmentBuilder is specialized for two-color chars (as JavaScript class TwoColorWordBuilder) so as to instead generate such layout as: ```html <span class="q15 b1b0 wpadding" data-text="Ａ" style="display: inline-block; width: 24px;"> Ａ </span> <span class="q15 b1"> Ｍ </span> ``` This no only avoids the unwanted background color introduced by the outer span but also eliminates the unnecessary outer span for a sole two-color char. Note that this requires the fix introduced in commit bafbe1e ("fix(components/TwoColorWord): fix missing q<fg> HTML class when `colorLead.fg === colorTail.fg`") to make the un-nested span rendered expectedly.
IepIweidieng
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This issue was described in commit a75d550.
此問題已先爲 commit a75d550 所述。
This issue was caused by the HTML layout of two-color chars, e.g.:
此問題由雙色字的 HTML 排版導致，範例：
The "black" part of the background of the inner span is actually transparent, but the outer span has its own background (of the bg color of the left-half char), thus the "black" part of the inner span appeared to be not black.
內層 span 的背景的「黑色」部份實際上是透明的，但外層 span 有自己的背景（帶有左半雙色字的背景顏色），故內層 span 的「黑色」部份看起來並不黑。
To fix this issue,
WordSegmentBuilderis specialized for two-color chars (as JavaScript classTwoColorWordBuilder) so as to instead generate such layout as:爲了解決這個問題，
WordSegmentBuilder已對雙色字特例化（爲 JavaScript 類型TwoColorWordBuilder）來把前述的排版改產生爲：This no only avoids the unwanted background color introduced by the outer span but also eliminates the unnecessary outer span for a sole two-color char.
這不僅避免了外層 span 所導致的不想要的背景顏色，也消除了單獨出現的雙色字的不必要的外層 span。
Note that this requires a fix to
TwoColorWord.jsto make the un-nested span rendered expectedly. See the commit message for details.注意這需要對
TwoColorWord.js修正以讓未經多層套置的 span 按預期彩現。詳見 commit 訊息。Test case
測試案例
Current behavior 目前行爲
Expected behavior (with this fix applied) 預期行爲（套用了此修正）
Sample text 範例文字