3

I have this kivy file here:

<Help>:
    Label:
        text: "[b]Help Page[/b]\n"
        font_size: 30
        markup: True
        valign: "top"
        color: 0,0,0,1
    Label:
        text: "[b] How To Use:[/b]\n"
        font_size: 30
        markup: True
        valign: 'top'
        color: 0,0,0,1

However, the text does not go to the top of the page. This is the output:

Output

What is wrong with this? and may I also ask about how to format those overlapping text. Thanks :)

edit: This is what I want to happen with the text:

desired output

So to get that result I tried using the valign and halign to format the text but it does not seem to work. Hope this clarified my question :)

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Jezreel Martin
  • 75
  • 1
  • 10

1 Answers1

7

Display Text at Top

To display the text at top using valign: 'top', replace text_size: root.width, None with text_size: root.width, root.height

Snippet

<Help>:
    Label:
        id: help
        text_size: root.width, root.height
        markup: True
        valign: 'top'
        halign: 'center'
        color: 0,0,0,1

Output

Img01 - Text at top

Display Both Strings as One

To display both strings, "How to Operate: Some text here" and "Some title Some more text" as one, we will do the following:

kv file

<Help>:
    Label:
        id: help
        text_size: root.width, None
        markup: True
        halign: 'center'
        color: 0,0,0,1

Python Code

class Help(Screen):

    def on_pre_enter(self, *args):
        self.ids.help.text = "[size=30][b]How to Operate[/b][/size]\nSome text here" + \
                             "\n\n[size=30][b]Some title[/b][/size]\nSome more text"

Output - Combined Text

Img01 - Combined Text

Text Overlapping

The Label's text are overlapping because you are adding two Label widgets on-top each other in a Screen Layout.

Add a BoxLayout as parent of the two Label widgets to prevent text overlapping.

Text Wrapping

Wraps the text at a certain width, provide the width. For example, a Label to be created in a box with width=200 and unlimited height.

Label(text='Very big big line', text_size=(200, None))

Snippet

<Help>:
    BoxLayout:
        orientation: 'vertical'

        Label:
            text_size: dp(230), None
            height: self.texture_size[1]
            text: "[size=30][b]How to Operate[/b][/size]Some text here"
            markup: True
            valign: "top"
            halign: 'center'
            color: 0,0,0,1

        Label:
            text_size: dp(150), None
            text: "[size=30][b]Some title[/b][/size]Some more text"
            markup: True
            valign: 'top'
            halign: 'center'
            color: 0,0,0,1

Output

Img01

Text Alignment

Add text_size: self.size

Snippet

<Help>:
    Label:
        text_size: self.size
        text: "[b]Help Page[/b]\n"
        font_size: 30
        markup: True
        valign: "top"
        color: 0,0,0,1
    Label:
        text_size: self.size
        text: "[b] How To Use:[/b]\n"
        font_size: 30
        markup: True
        valign: 'top'
        color: 0,0,0,1

Text alignment and wrapping

In order for the halign and valign alignment properties to take effect, set the text_size, which specifies the size of the bounding box within which text is aligned.

Output

Img02

ikolim
  • 15,721
  • 2
  • 19
  • 29
  • The solution works but what if for example i want a text right below the "how to operate" text how would I do that? – Jezreel Martin Aug 29 '18 at 01:47
  • 1
    And can I not combine the both so that I can format it as well as not letting the text overlap? – Jezreel Martin Aug 29 '18 at 01:55
  • Please refer to updated post for solution to display both strings, "*How to Operate: Some text here*" and "*Some title Some more text*" as one i.e. using only one Label widget. – ikolim Aug 29 '18 at 14:26
  • 1
    Well the halign works but when I set it the valign to 'top' it still remains in the center. does it mean that I can only use halign here and not valign? – Jezreel Martin Aug 30 '18 at 01:39
  • Please refer to updated post for solution to display text at top. – ikolim Aug 30 '18 at 13:33