<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- text.qdoc -->
<title>Use Case - Displaying Text In QML | Qt 5.9</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td ><a href="index.html">Qt 5.9</a></td><td >Use Case - Displaying Text In QML</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right">Qt 5.9.4 Reference Documentation</td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#displaying-and-formatting-text">Displaying and Formatting Text</a></li>
<li class="level1"><a href="#laying-out-text">Laying Out Text</a></li>
<li class="level1"><a href="#example-code">Example Code</a></li>
<li class="level1"><a href="#internationalization-and-scalability">Internationalization and Scalability</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Use Case - Displaying Text In QML</h1>
<span class="subtitle"></span>
<!-- $$$qtquick-usecase-text.html-description -->
<div class="descr"> <a name="details"></a>
<a name="displaying-and-formatting-text"></a>
<h2 id="displaying-and-formatting-text">Displaying and Formatting Text</h2>
<p>To display text in QML, create a Text item and set the text property to the text you wish to display. The Text item will now display that text.</p>
<p>Several properties can be set on the Text item to style the entire block of text. These include color, font family, font size, bold and italic. For a full list of properties, consult the <a href="whatsnew50.html#text">Text</a> type documentation.</p>
<p>Rich text like markup can be used to selectively style specific sections of text with a Text item. Set Text::textFormat to Text.StyledText to use this functionality. More details are available in the documentation of the <a href="whatsnew50.html#text">Text</a> type.</p>
<a name="laying-out-text"></a>
<h2 id="laying-out-text">Laying Out Text</h2>
<p>By default, Text will display the text as a single line unless it contains embedded newlines. To wrap the line, set the wrapMode property and give the text an explicit width for it to wrap to. If the width or height is not explicitly set, reading these properties will return the parameters of the bounding rect of the text (if you have explicitly set width or height, you can still use paintedWidth and paintedHeight). With these parameters in mind, the Text can be positioned like any other Item.</p>
<a name="example-code"></a>
<h2 id="example-code">Example Code</h2>
<pre class="qml">
import QtQuick 2.3
<span class="type">Item</span> {
<span class="name">id</span>: <span class="name">root</span>
<span class="name">width</span>: <span class="number">480</span>
<span class="name">height</span>: <span class="number">320</span>
<span class="type">Rectangle</span> {
<span class="name">color</span>: <span class="string">"#272822"</span>
<span class="name">width</span>: <span class="number">480</span>
<span class="name">height</span>: <span class="number">320</span>
}
<span class="type">Column</span> {
<span class="name">spacing</span>: <span class="number">20</span>
<span class="type">Text</span> {
<span class="name">text</span>: <span class="string">'I am the very model of a modern major general!'</span>
<span class="comment">// color can be set on the entire element with this property</span>
<span class="name">color</span>: <span class="string">"yellow"</span>
}
<span class="type">Text</span> {
<span class="comment">// For text to wrap, a width has to be explicitly provided</span>
<span class="name">width</span>: <span class="name">root</span>.<span class="name">width</span>
<span class="comment">// This setting makes the text wrap at word boundaries when it goes</span>
<span class="comment">// past the width of the Text object</span>
<span class="name">wrapMode</span>: <span class="name">Text</span>.<span class="name">WordWrap</span>
<span class="comment">// You can use \ to escape quotation marks, or to add new lines (\n).</span>
<span class="comment">// Use \\ to get a \ in the string</span>
<span class="name">text</span>: <span class="string">'I am the very model of a modern major general. I\'ve information \
vegetable, animal and mineral. I know the kings of england and I \
quote the fights historical; from Marathon to Waterloo in order categorical.'</span>
<span class="comment">// color can be set on the entire element with this property</span>
<span class="name">color</span>: <span class="string">"white"</span>
}
<span class="type">Text</span> {
<span class="name">text</span>: <span class="string">'I am the very model of a modern major general!'</span>
<span class="comment">// color can be set on the entire element with this property</span>
<span class="name">color</span>: <span class="string">"yellow"</span>
<span class="comment">// font properties can be set effciently on the whole string at once</span>
<span class="type">font</span> { <span class="name">family</span>: <span class="string">'Courier'</span>; <span class="name">pixelSize</span>: <span class="number">20</span>; <span class="name">italic</span>: <span class="number">true</span>; <span class="name">capitalization</span>: <span class="name">Font</span>.<span class="name">SmallCaps</span> }
}
<span class="type">Text</span> {
<span class="comment">// HTML like markup can also be used</span>
<span class="name">text</span>: <span class="string">'<font color="white">I am the <b>very</b> model of a modern <i>major general</i>!</font>'</span>
<span class="comment">// This could also be written font { pointSize: 14 }. Both syntaxes are valid.</span>
<span class="name">font</span>.pointSize: <span class="number">14</span>
<span class="comment">// StyledText format supports fewer tags, but is more efficient than RichText</span>
<span class="name">textFormat</span>: <span class="name">Text</span>.<span class="name">StyledText</span>
}
}
}
</pre>
<p class="centerAlign"><img src="images/qml-uses-text.png" alt="" /></p><a name="internationalization-and-scalability"></a>
<h2 id="internationalization-and-scalability">Internationalization and Scalability</h2>
<p>When dealing with texts, applications must take into account various topics such as the device's orientation and the language settings.</p>
<p>The following pages go into detail about these various topics.</p>
<ul>
<li>Right-to-left User Interfaces</li>
<li><a href="qtquick-internationalization.html">Internationalization and Localization with Qt Quick</a></li>
<li><a href="scalability.html">Scalability</a></li>
</ul>
</div>
<!-- @@@qtquick-usecase-text.html -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2017 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
