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"
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_horizontal, 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