Optimizing Text Justification and Hyphenation for Mixed English-Chinese Content in Mobile Apps

The article discusses the evolution of text alignment and hyphenation strategies in a mobile application (Xueqiu) to improve readability for mixed Chinese-English content. Initially using left alignment like other major apps (e.g., Douban, Weibo, Zhihu), Xueqiu switched to justified alignment for better visual balance in Chinese contexts. However, justified alignment with unbroken English words caused excessive spacing, prompting a technical trade-off analysis between word-breaking and justification.

Four hyphenation approaches were evaluated: hyphens: auto , hyphens: manual , word-break: break-all , and word-break: break-word . While hyphens: auto offered simplicity, it failed to handle long numeric strings and lacked control over hyphen placement. hyphens: manual was ultimately selected for its flexibility—soft hyphens ( &shy; ) and line-break tags ( <wbr> ) were programmatically inserted into English and numeric content via post-processing of HTML strings. This allowed precise control over hyphenation rules (e.g., minimum 4-letter words, 2+ characters before/after hyphen), while numeric strings were split every 6 characters with line breaks.

The solution preserved line-break: normal for punctuation handling in most cases, though word-break: break-all was applied to special tags (e.g., financial tickers), with acceptable impact due to minimal punctuation in such contexts. Performance benchmarks across iOS and Android devices (including low-end models) showed sub-25ms processing time, confirming no performance regression.

Final visual comparisons demonstrate significantly improved text block uniformity and reduced awkward spacing under the optimized manual hyphenation approach.