Incorrect word wrapping for Static widget with Chinese / Japanese characters

[zyf722]

Description

Word wrapping for Static widget seems not working properly with Chinese and Japanese characters.

Please continue reading for more details.

Reproducible Example

from textual.app import App, ComposeResult
from textual.containers import Vertical
from textual.widgets import Static


class ReproApp(App):
    CSS = """
    .view {
        width: 100%;
        height: auto;
        margin: 1;
        border: heavy green;
    }
    """

    ENG_TEXT = "Textual is a Rapid Application Development framework for Python. Build sophisticated user interfaces with a simple Python API. Run your apps in the terminal and (coming soon) a web browser! Textual adds interactivity to Rich with an API inspired by modern web development. On modern terminal software (installed by default on most systems), Textual apps can use 16.7 million colors with mouse support and smooth flicker-free animation. A powerful layout engine and re-usable components makes it possible to build apps that rival the desktop and web experience. Textual runs on Linux, macOS, and Windows. Textual requires Python 3.7 or above. The Textual repository comes with a number of examples you can experiment with or use as a template for your own projects. Join the Textual developers and community on our Discord Server. Head over to the Textual documentation to start building!"
    CHS_TEXT = "Textual是Python的一个快速应用程序开发框架。使用简单的Python API构建复杂的用户界面。在终端和（即将推出的）网络浏览器中运行您的应用程序！Textual通过受现代web开发启发的API为Rich添加了交互性。在现代终端软件（大多数系统默认安装）上，纹理应用程序可以使用1670万种颜色，并支持鼠标和平滑无闪烁的动画。强大的布局引擎和可重复使用的组件使构建与桌面和网络体验相媲美的应用程序成为可能。Textual在Linux、macOS和Windows上运行。Textual需要Python 3.7或更高版本。Textural存储库提供了许多示例，您可以对其进行实验，也可以将其用作自己项目的模板。加入我们Discord服务器上的Textual开发人员和社区。前往文本文档开始构建！"
    JPN_TEXT = "TextualはPythonの高速アプリケーション開発フレームワークです。単純なPython APIを使用して複雑なユーザーインタフェースを構築します。端末および（近日公開予定の）Webブラウザでアプリケーションを実行します！Textualは、現代のweb開発にヒントを得たAPIを通じてRichにインタラクティブ性を追加した。現代のターミナルソフトウェア（ほとんどのシステムのデフォルトインストール）では、テクスチャアプリケーションは1670万色を使用でき、マウスと滑らかでフリッカーのないアニメーションをサポートします。強力なレイアウトエンジンと再利用可能なコンポーネントにより、デスクトップやネットワーク体験に匹敵するアプリケーションの構築が可能になります。TextualはLinux、macOS、Windowsで動作します。TextualにはPython 3.7以上のバージョンが必要です。Texturalリポジトリには多くの例があり、実験を行うことも、独自のプロジェクトのテンプレートとして使用することもできます。Dell Discordサーバ上のTextual開発者とコミュニティに参加します。文書ドキュメントの構築を開始します！"
    KOR_TEXT = "Textual은 Python의 빠른 응용 프로그램 개발 프레임워크입니다.간단한 Python API를 사용하여 복잡한 사용자 인터페이스를 구축합니다.터미널 및 (출시 예정) 웹 브라우저에서 응용 프로그램을 실행하십시오!Textual은 현대 웹 개발에서 영감을 받은 API를 통해 Rich에 상호 작용을 추가했습니다.현대 터미널 소프트웨어 (대부분의 시스템 기본 설치) 에서 텍스쳐 응용 프로그램은 1670 만 가지 색상을 사용할 수 있으며 마우스와 깜박이지 않는 매끄러운 애니메이션을 지원합니다.강력한 레이아웃 엔진과 재사용 가능한 구성 요소로 데스크탑 및 네트워크 환경에 필적하는 어플리케이션을 구축할 수 있습니다.Textual은 Linux, macOS 및 Windows에서 실행됩니다.Textual에는 Python 3.7 이상이 필요합니다.Textural 저장소는 실험하거나 프로젝트의 템플릿으로 사용할 수 있는 많은 예를 제공합니다.Discord 서버의 Textual 개발자 및 커뮤니티에 참여하십시오.텍스트 문서로 이동하여 구문 시작!"

    def compose(self) -> ComposeResult:
        yield Vertical(
            Static(self.ENG_TEXT, classes="view"),
            Static(self.CHS_TEXT, classes="view"),
            Static(self.JPN_TEXT, classes="view"),
            Static(self.KOR_TEXT, classes="view"),
        )


def main():
    app = ReproApp()
    app.run()

Please pay attention to the end of the second line and the beginning of the third line in the Chinese paragraph. The sentence should be Textual通过受现代web开发启发的API为Rich添加了交互性。在现代终端软件（大多数系统默认安装）上，纹理应用程序可以使用1670万种颜色，并支持鼠标和平滑无闪烁的动画。, however the part 加了交互性。在现代 is missing in the actual presentation.

Multiple lines in the same paragraph are with the similar issue. So for the Japanese paragraph below. Given that this feature works for both Korean and English, I guess that this may have something to do with the fact that there are hardly any spaces in a common Chinese or Japanese sentence.

textual diagnose

Textual Diagnostics

Versions

Name	Value
Textual	0.40.0
Rich	13.6.0

Python

Name	Value
Version	3.8.0
Implementation	CPython
Compiler	MSC v.1916 64 bit (AMD64)
Executable	C:\Users\Max\AppData\Local\pypoetry\Cache\virtualenvs\clipper-VCLAtNFH-py3.8\Scripts\python.exe

Operating System

Name	Value
System	Windows
Release	10
Version	10.0.19041

Terminal

Name	Value
Terminal Application	Windows Terminal
TERM	Not set
COLORTERM	Not set
FORCE_COLOR	Not set
NO_COLOR	Not set

Rich Console options

Name	Value
size	width=121, height=30
legacy_windows	False
min_width	1
max_width	121
is_terminal	True
encoding	utf-8
max_height	30
justify	None
overflow	None
no_wrap	False
highlight	None
markup	None
height	None

[darrenburns]

Thanks for the detailed report and reproducible example! I've reproduced this and confirmed that it's an issue in Rich. I've created an issue over in the Rich repository for this: Textualize/rich#3176

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.