title: Creating subtitles in QML with background and vertical wrapping
body: <p>I am making a video player app using QML.</p>
  
  <p>I am currently having issues implementing subtitles with QML.</p>
  
  <p>My current code for the subtitles is: </p>
  
  <pre><code>Rectangle {
      id: nativeSubtitles
      height: nativeSubs.font.pixelSize + 4
      visible: true
      anchors.left: controlsBar.left
      anchors.right: controlsBar.right
      anchors.bottom: progressBar.top
      radius: 5
      color: "transparent"
  
      Label {
          id: nativeSubs
          width: parent.width
          text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew "
          color: "white"
          font.family: notoFont.name
          font.pixelSize: 24
          renderType: Text.NativeRendering
          horizontalAlignment: Text.AlignHCenter
          opacity: 1
          background: Rectangle {
              color: "orange"
              anchors.left: parent.left
              anchors.right: parent.right
          }
      }
  }
  </code></pre>
  
  <p>This doesn't work as I want it to.</p>
  
  <p>How I want the subtitles to work is they are centered between left and right and bottom of <code>controlsbar</code>.</p>
  
  <p>If the subtitles grow to be too large to fit within the width of it, the text should split and add another line to grow vertically, still however anchored to the bottom of controlsbar. </p>
  
  <p>The background should only occupy the areas where the text is occupied with a outside padding of 2.</p>
  
  <p>How should I do this? I've been spending ages pulling my hair out trying to get things to work...</p>
  
  <p>EDIT: New code with fixed vertical wrapping thanks to <a href="https://stackoverflow.com/a/52955752/10547967">https://stackoverflow.com/a/52955752/10547967</a></p>
  
  <pre><code>Rectangle {
      id: nativeSubtitles
      height: nativeSubs.font.pixelSize + 4
      visible: true
      anchors.left: controlsBar.left
      anchors.right: controlsBar.right
      anchors.bottom: progressBar.top
      radius: 5
      color: "transparent"
  
      Label {
          id: nativeSubs
          width: parent.width
          text: "SUBTITLES! OWO YESH f rre e er erwwew we wewe ew ew ew eew ewew ew ewwe3wwe ew "
          color: "white"
          font.family: notoFont.name
          font.pixelSize: 24
          renderType: Text.NativeRendering
          horizontalAlignment: Text.AlignHCenter
          anchors.bottom: parent.top
          opacity: 1
          wrapMode: Text.WrapAtWordBoundaryOrAnywhere
  
          background: Rectangle {
              color: "orange"
              anchors.left: parent.left
              anchors.right: parent.right
          }
      }
  }
  </code></pre>
  
  <p>Now all that needs to be fixed is for the background to only be the width of the text when the text doesn't take up the full width of the space between the controlsbar left and right anchors</p>