How to solve uneven spacing problem when the text component contains multiple character types and is justified

#harmonyos #textcomponent #unevencharacterspacing #textalign

Read the original article：How to solve uneven spacing problem when the text component contains multiple character types and is justified

Requirement Description

Using TextAlign.Justify or TextAlign.Start does not achieve the justified alignment effect; the spacing between different characters is inconsistent. As shown below:

Background Knowledge

In the Text component, the relevant parts of TextAlign and WordBreak are as follows:

TextAlign properties and descriptions

Property	Description
Start	Align horizontally to the start
Center	Align horizontally to the center
End	Align horizontally to the end
JUSTIFY	Justify alignment

WordBreak properties and descriptions

Attribute	Description
NORMAL	CJK (Chinese, Japanese, Korean) text can break lines at any two characters, while Non-CJK text (such as English) can only break lines at whitespace.
BREAK_ALL	For Non-CJK text, line breaks can be made between any two characters. For CJK, the effect is the same as for NORMAL.
BREAK_WORD	Similar to BREAK_ALL, for non-CJK text, a line break can occur between any two characters. When there is a break point (such as a whitespace) in a line of text, the text will prioritize breaking at that point to ensure that words are displayed as complete as possible. If there are no break points in the entire line of text, a line break will occur between any two characters. The effect for CJK is the same as for NORMAL.

Implementation Steps

Chinese characters are always full-width, but numbers, English letters, and special characters can be either full-width or half-width. Generally, numbers, English letters, and special characters use the simplified half-width format. Formatting issues may occur when processing mixed text; however, using a line-breaking rule can automatically convert them into half-width format.

When TextAlign.JUSTIFY or TextAlign.Start does not achieve justified alignment, you can use the line-breaking rule wordBreak to achieve the desired effect.

Combining WordBreak.BREAK_ALL with TextAlign.JUSTIFY allows English words to break by letter and Chinese text by character, helping to control spacing.

Code Snippet / Configuration

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('@@Test@@123456789!@#$%-@@Test@@123456789!@#$%-@@Test@@123456789!@#$%-@@Test@@123456789!@#$%-@@Test@@123456789!@#$%')
        .width('100%')
        .backgroundColor('#87ceeb')
        .textAlign(TextAlign.JUSTIFY)
        .wordBreak(WordBreak.BREAK_ALL) // Combine with TextAlign.JUSTIFY to achieve justified alignment and solve uneven spacing
        .fontSize(14)
    }
    .margin({ left: 20, right: 20, top: 70 })
  }
}