Displaying Text

このページでは、テキストの表示の仕組みについて説明します。Span、Line、Text について、これらを作成、スタイル設定、表示、変更する方法などについて説明します。

`Span`

Span は、スタイル設定されたテキストセグメントです。独自のスタイルを持つ部分文字列と考えることができます。これは、ratatui でテキストを表示する最も基本的な単位です。

以下の例では、次のインポートを想定しています。

use ratatui::{prelude::*, widgets::*};

Span は、コンテンツの「コンテンツ」と「スタイル」で構成されています。 Span は、いくつかの異なる方法で作成できます。

Span::raw の使用:

   fn ui(_app: &App, f: &mut Frame) {
       let span = Span::raw("This is text that is not styled");
       // --snip--
   }

Span::styled の使用:

   fn ui(_app: &App, f: &mut Frame) {
       let span = Span::styled("This is text that will be yellow", Style::default().fg(Color::Yellow));
       // --snip--
   }

Stylize トレイトを使用:

   fn ui(_app: &App, f: &mut Frame) {
       let span = "This is text that will be yellow".yellow();
       // --snip--
   }

Span は、スタイルのテキストの基本的なビルディングブロックであり、テキストが表示される場所で使用できます。

`Line`

次に説明するビルディングブロックは Line です。Line はグラフィムのクラスターを表し、クラスター内の各ユニットは独自のスタイルを持つことができます。Line 構造体のインスタンスは、基本的に Span オブジェクトのコレクション、つまり Vec<Span> と考えることができます。

各 Line 構造体は複数の Span オブジェクトで構成されているため、単語、フレーズ、または文の行にさまざまなスタイルを適用できます。

fn ui(_: &App, f: &mut Frame) {
    let line = Line::from(vec![
        "hello".red(),
        " ".into(),
        "world".red().bold()
    ]);
    // --snip--
}

Line は、コンテンツが Into<Cow<'a, &str>> であるコンテンツから直接構築できます。

fn ui(_: &App, f: &mut Frame) {
    let line = Line::from("hello world");
    // --snip--
}

フルラインを直接スタイリングすることもできます。

fn ui(_: &App, f: &mut Frame) {
    let line = Line::styled("hello world", Style::default().fg(Color::Yellow));
    // --snip--
}

また、 into() を使用して、 Stylize のtrait を直接ラインで使用できます。

fn ui(_: &App, f: &mut Frame) {
    let line: Line = "hello world".yellow().into();
    // --snip--
}

最後に、 alignment() または速記の方法 left_aligned()、 centered() および right_aligned() を使用して整列することもできます。 Line を内部的に使用するウィジェットは、一般的にこれを尊重します。

fn ui(_: &App, f: &mut Frame) {
    let line = Line::from("hello world").alignment(Alignment::Center);
    let line = Line::from("hello world").centered(); // shorthand
    // --snip--
}

`Text`

Text は、出力テキストの最終的な構成要素です。 Text オブジェクトは、 Line のコレクションを表します。

ほとんどのウィジェットは、 Text に変換できるコンテンツを受け入れます。

fn ui(_: &App, f: &mut Frame) {
    let span1 = "hello".red();
    let span2 = "world".red().bold();
    let line = Line::from(vec![span1, " ".into(), span2]);
    let text = Text::from(line);
    f.render_widget(Paragraph::new(text).block(Block::bordered()), f.size());
}

これは、ターミナルで得られるもののHTML表現です。

hello world

多くの場合、上記のようなコードを簡素化できます。

fn ui(_: &App, f: &mut Frame) {
    let line: Line = vec![
        "hello".red(),
        " ".into(),
        "world".red().bold()
    ].into();
    f.render_widget(Paragraph::new(line).block(Block::bordered()), f.size());
}

これは、この場合、Rustがタイプを推測し、それらを適切に変換できるためです。

Text インスタンスは、 raw または styled コンストラクターを使用して作成できます。

Paragraph のためにかなり頻繁に自分自身をやっていることに気付くかもしれません。これはあなたがそれをするかもしれない一つの方法です:

fn ui(_: &App, f: &mut Frame) {
    let text = vec![
        "hello world 1".into(),
        "hello world 2".blue().into(),
        Line::from(vec!["hello".green(), " ".into(), "world".green().bold(), "3".into()]),
    ];
    f.render_widget(Paragraph::new(text).block(Block::bordered()), f.size());
}

hello world 1

hello world 2

hello world 3

次のセクションでは、スタイル設定について詳しく説明します。

Line と同様に、Text は alignment() または短縮メソッド left_aligned()、centered()、right_aligned() を使用して配置できます。内部で Text を使用するウィジェットは、通常、これに従います。以下の例では、特定の行の配置をオーバーライドできることに注意してください。

fn ui(_: &App, f: &mut Frame) {
    let text= Text::from(vec![
        Line::from("hello world 1").left_aligned(),
        Line::from("hello world 2"),
        Line::from("hello world 3").right_aligned(),
    ]).centered();
    f.render_widget(Paragraph::new(text).block(Block::bordered()), f.size());
}

hello world 1

hello world 2

hello world 3