Python+Kivy入門

kv言語のテキストを装飾するtext関連の設定とマークアップ【Kivy入門】

この記事は約9分で読めます。

Kivyアプリではテキストを装飾するために様々なテキスト関連のプロパティがあります。またKivyではテキストにマークアップ言語が使用でき一部の文字列のスタイルを変更したい場合に便利です。

テキスト関連のプロパティ

テキスト関連のプロパティはkivy.core.text.LabelBaseクラスまたはkivy.uix.labelクラスに属しています。テキストを表示することができるウィジェット共通で使用することができます。プロパティのスタイルは文字列全体を装飾します。通常デフォルト値から変更したいプロパティのみ定義します。

<RootWidget>:
    orientation: 'vertical'

    Label:
        text: "テキスト\nテキストだ\nテキストだよ"
        font_size: 20
        #font_name: "../PythonWork/fonts/meiryo.ttc"
        color: 1, 0, 0, 1
        halign: "justify"
        valign: "bottom"
        text_size: 500, 500

        bold: True
        italic: False
        underline: True
        max_lines: 10
        shorten: True
        shorten_from: "left"
        line_height: 1.2
        outline_color: 1, 1, 1, 1
        outline_width: 5
        padding: 10, 10, 10, 10
        font_hinting: "mono"
        markup: True

text

ラベルに表示する文字列を設定します。
デフォルト値: 空文字列 (“”)

text = "テキスト"

font_size

テキストのフォントサイズを設定します。フォントの単位はデフォルトでspです。
デフォルト値: 15sp

font_size = 20

dpなどに変換したい場合は下記のようにします。

font_size = dp(20)

font_name

使用するフォントファイルまたはフォント名を設定します。
デフォルト値: Kivyのデフォルトフォント。

font_name = "../PythonWork/fonts/meiryo.ttc"

font_family

Pangoライブラリ経由でfont_familyを使用することができます。このプロパティを使用するにはPangoをインストールする必要があります。

color

テキストの色を設定します。RGBA形式で指定します。
デフォルト値:[1, 1, 1, 1] (白)

color = 1, 0, 0, 1

カラー指定については下記の記事で説明しています。

halign

水平方向のテキストの位置を設定します。[auto、left、center、right、justify]で指定します。
デフォルト値:auto

halign: "right"

justifyは行揃えになります。デフォルトのautoはcenter位置で行揃えしてくれます。

Label:
        text: "テキスト\nテキストだ\nテキストだよ"
        halign: "justify"
kivyアプリのテキストの行揃え

valign

垂直方向のテキストの位置を設定します。 [top, middle(またはcenter), bottom]で指定します。
デフォルト値:middleまたはcenter

valign: "bottom"

自動調整が効いてるおかげでtopやbottomにするにはtext_sizeや他のプロパティを組み合わせて工夫する必要があります。

text_size

テキストの描画領域を設定します。[幅数値,高さ数値]で指定します。
デフォルト値:[None, None] ウィジェットのサイズに依存します。

text_size: 500, 500

文字列がこの領域に収まらない場合は切り取られます。

bold

テキストを太字にします。[True,False]で指定します。
デフォルト値:False

bold: True

他のプロパティとの組み合わせにより効果がない場合があります。

太字はシステムフォントファイルの太字ファイルを適用しています。日本語表示にしている場合システムフォントを変更していなければ太字にはなりません。Kivyシステムのフォントを変更する方法は下記を参照してください。または画像を使用する方法やPangoを使用したfont_familyを検討してみてください。

italic

テキストを斜体にします。[True,False]で指定します。
デフォルト値:False

italic: True

こちらもboldと同様にシステムのフォントファイルが必要です。italicは日本語表示では単体のフォントファイルがおそらくないので使用できません。画像を使用する方法またはPangoを使用したfont_familyプロパティが使用できるか検討してみてください。。

underline

テキストに下線を引きます。[True,False]で指定します。
デフォルト値:False

underline: True

max_lines

テキストの最大行数を指定します。数値で指定します。
デフォルト値: 0 (制限なし)

max_lines: 10

shorten

テキストが指定サイズを超える場合、短縮して省略記号「…」を追加します。[True,False]で指定します。
デフォルト値:False

shorten: True

shorten_fromプロパティと併用して使います。

shorten_from

テキストの指定位置に「…」の省略記号を追加する位置を設定します。 [center,right,left]で指定します。
デフォルト値:center

shorten_from: "left"

shortenをTrueにしないと機能しません。

line_height

行間の倍率を設定します。数値で指定します。
デフォルト値:1.0

line_height: 1.2

outline_color

テキストの輪郭の色を設定します。RGBAで指定します。
デフォルト値:[0, 0, 0, 1] (黒)

outline_colo: 1, 1, 1, 1

outline_widthと併用して使用します。

outline_width

テキストの輪郭の幅を設定します。数値で指定します。
デフォルト値:1

outline_width: 5

padding

テキスト領域の余白を設定します。
デフォルト値:[0, 0, 0, 0]

書き方①
[padding_left, padding_top, padding_right, padding_bottom]になっていて、左、上、右、下を数値で指定します。

書き方②
 [padding_horizo​​ntal, padding_vertical] になっていて水平方向と垂直方向を数値で指定します。

書き方➂
全ての方向をまとめて指定します。全て同じ余白を設定する場合はこちらをお勧めします。

padding: 10, 10, 10, 10

font_hinting

フォントのレンダリングに使用するヒントを設定します。[normal,light,mono,None]で指定します。
デフォルト値:normal

font_hinting: "mono"

markup

Kivyのマークアップ言語を使いたい時に設定します。[True,False]で指定します。
デフォルト値:False

markup: True

Kivyのマークアップ言語で装飾する

HTMLに似たマークアップ言語を使用することができます。プロパティのスタイルは文字列全体を変更するのに対して、こちらは文字列を部分的にスタイル変更したい場合に便利です。markupプロパティをTrueに設定しておく必要があります。また値をシングルクォートもしくはダブルクォートで囲む必要ありません。エラーになります

<RootWidget>:
    orientation: 'vertical'

    Label:
        text: "[size=40][b]太字[/b]\n[u]下線文字[/u]\n[s]取り消し線[/s][/font]"
        markup: True
    Label:
        text: "[font=../PythonWork/fonts/meiryo.ttc]フォントを変更[/font]"
        markup: True
    Label:
        text: "[color=#8683D5][s]取り消し線[/s][/color]"
        markup: True
    Label:
        text: "テスト[sub]下付き文字[/sub]てすと[sub]下付き文字[/sub]"
        markup: True

テキストを太字にする

boldプロパティと同じようにシステムフォントを使用しています。

[b]太字[/b]

テキストを斜体にする

italicプロパティと同様、Pangoのfont_familyを試してみてください。

[i]斜体[/i]

下線付き文字にする

[u]下線付き文字列[/u]

テキストに取り消し線を付ける

[s]取り消し線[/s]

フォントを変更する

フォントファイルのパスまたはfontの名前。default_fontのnameでもおそらく可能。

[font="../PythonWork/fonts/meiryo.ttc"]フォントを変更[/font]

Font Familyを使用する

Pangoライブラリが必要になります。

[font_family=<str>][/font_family]

フォントサイズを変更する

[size=15][/size]

テキストの色を変更する

16進数で指定します。

[color=#8683D5][/color]

下付き文字にする

[sub]下付き文字[/sub]

上付き文字にする

[sub]下付き文字[/sub]

タグを入れ子にする

タグを入れ子にすることも可能です。

[color=#8683D5][s]取り消し線[/s][/color]

Comment

タイトルとURLをコピーしました