title: Kivy - Draw Rectangle Around Text
body: <p>I'm brand new to Kivy and trying to make a UI for a project. I'm trying to develop an understanding for how everything gets sized in the different layouts.</p>
  <p>I'm having an issue where I have two labels side by side in a box layout (nested in another box layout). I want the 2nd label to have a rectangle drawn behind only the text. I can get 90% of the way there, but I'm stumbling over positioning the rectangle behind the text, since there is no &quot;self.texture_pos&quot; like there is &quot;self.texture_size&quot;.</p>
  <p>How can I dynamically draw a rectangle at the size and position of a label string, or am I doing this a really dumb way?</p>
  <p>My .KV, sorry for the funky colors, as I said I'm trying to understand how everything is positioned:</p>
  <pre><code>#:kivy 1.8.0
  
  BoxLayout:
      size: root.size
      pos: root.pos
      id: foo_bar
      orientation: 'vertical'
  
      canvas.before:
          Color:
              rgb: .6, .6, .6
          Rectangle:
              size: self.size
          
      StatusBarWidget:
      ProcessValWidget:
      ProcessSliderWidget:
      StartStopWidget:
  
  &lt;startstopwidget&gt;:              
      BoxLayout:
          orientation: 'horizontal'
                  
          Label:                      
              font_size: 70
              center_x: root.width / 4
              top: root.top - 50
              text: &quot;2&quot;
              canvas.before:
                  Color:
                      rgba: 0,1,0,1
                  Rectangle:
                      size: self.size
                      pos: self.pos           
          Label:
              font_size: 70
              center_x: root.width * 3 / 4
              top: root.top - 50
              text: &quot;3&quot;
              canvas.before:
                  Color:
                      rgba: 0,0,1,1
                  Rectangle:
                      size: self.size 
                      pos: self.pos
              
  &lt;processvalwidget&gt;:             
      BoxLayout:
          orientation: 'horizontal'
                  
          Label:
              id: lbl_pval
              font_size: 50
              text: &quot;Pressure:&quot;
              text_size: self.size
              halign: 'right'
              valign: 'middle'
              canvas.before:
                  Color:
                      rgba: 1,0,0,1
                  Rectangle:
                      size: self.size 
                      pos: self.pos
          Label:
              id: val_pval
              font_size: 50
              text: &quot;100 PSI&quot;
              canvas.before:
                  Color:
                      rgba: 0,1,0,1
                  Rectangle:
                      size: self.texture_size
                      pos: self.pos
                      
  &lt;processsliderwidget&gt;:              
      BoxLayout:
          orientation: 'vertical'
                  
          Slider:
              id: slider
              min: 0
              max: 100
              step: 1
              orientation: 'horizontal'
              
          Label:
              text: str(slider.value)
  
  &lt;statusbarwidget&gt;:
      size_hint_y: None
      height: 50
      canvas.before:
          Color:
              rgba: 0,0,0,1
          Rectangle:
              size: self.size 
              pos: self.pos
      Label:
          text: &quot;STATUS BAR&quot;
          text_size: self.size
          size_hint_x: None
          halign: 'left'
          valign: 'middle'
          padding_x: 5
  </code></pre>