Tabris.js Widgets: TextView

The TextView widget is used to display text inside your Tabris.js application. With its help, you can apply text alignment, line spacing, text color, and use some HTML markup elements. It extends the Widget class. Using the parent class functions, you can modify common widget parameters such as size and position, background color or image, and font settings.

Properties and events

Property alignment determines the horizontal alignment of the text;
If property markupEnabled value is true, you can use some HTML tags inside the widget. Supported tags are a, del, ins, b, i, strong, em, big, small, br. All tags must be closed (e.g. use instead of ). There is no tag because TextView is not meant for if. For displaying images use ImageView widget;
Property selectable defines if the text can be selected or not;
tapLink event fires when the user clicks on a link in an HTML text. Requires to set markupEnabled to true and to provide a text containing an anchor () with an href attribute.

Examples

1. A demonstration of different font families and font sideloading

import {ScrollView, TextView, contentView, app} from 'tabris';
 
app.registerFont('ubuntu', 'resources/Ubuntu-M.ttf#Ubuntu');
 
let FAMILIES = ['sans-serif', 'serif', 'condensed', 'monospace', 'ubuntu'];
 
let scrollView = new ScrollView({
 left: 0, top: 0, right: 0, bottom: 0
}).appendTo(contentView);
 
 for (let family of FAMILIES) {
     let font = ' 24px ' + family;
     new TextView({
       left: 16, top: 'prev() 24', right: 16,
       text: font
     }).appendTo(scrollView);
     new TextView({
       left: 16, top: 'prev() 8', right: 16,
       text: 'Sphinx of black quartz, judge my vow',
       font: font
     }).appendTo(scrollView);
 }

import {ScrollView, TextView, contentView, app} from 'tabris';

app.registerFont('ubuntu', 'resources/Ubuntu-M.ttf#Ubuntu');

let FAMILIES = ['sans-serif', 'serif', 'condensed', 'monospace', 'ubuntu'];

let scrollView = new ScrollView({

left: 0, top: 0, right: 0, bottom: 0

}).appendTo(contentView);

for (let family of FAMILIES) {

let font = ' 24px ' + family;

new TextView({

left: 16, top: 'prev() 24', right: 16,

text: font

}).appendTo(scrollView);

new TextView({

left: 16, top: 'prev() 8', right: 16,

text: 'Sphinx of black quartz, judge my vow',

font: font

}).appendTo(scrollView);

}

2. Try line spacing changes on the fly!

import { Composite, Slider, TextView, contentView } from 'tabris';
 
let textView = new TextView({
   left: 16, top: 16, right: 16,
   text: 'And thus the first man of the Pequod that mounted the mast to look out for ' +
       'the White Whale, on the White Whale\'s own peculiar ground; that man was ' +
       '       swallowed up in the deep. But few, perhaps, thought of that at the time. ' +
       'Indeed, in some sort, they were not grieved at this event, at least as a ' +
       'portent; for they regarded it, not as a foreshadowing of evil in the ' +
       'future, but as the fulfillment of an evil already presaged. They declared ' +
       'that now they knew the reason of those wild shrieks they had heard the ' +
       'night before. But again the old Manxman said nay.'
}).appendTo(contentView);
 
let controls = new Composite({
   left:
       0, right: 0, bottom: 0,
}).appendTo(contentView);
 
let spacingView = new TextView({
   right: 16, width: 32, centerY: 0,
}).appendTo(controls);
 
let slider = new Slider({
   left: 16, right: [spacingView, 16], bottom: 16, top: 16,
   minimum: 2,
   maximum: 50
}).onSelectionChanged(({ value }) => {
   let lineSpacing = value / 10;
   textView.lineSpacing = lineSpacing;
   spacingView.text = lineSpacing;
}).appendTo(controls);
 
slider.selection = 15;

import { Composite, Slider, TextView, contentView } from 'tabris';

let textView = new TextView({

left: 16, top: 16, right: 16,

text: 'And thus the first man of the Pequod that mounted the mast to look out for ' +

'the White Whale, on the White Whale\'s own peculiar ground; that man was ' +

' swallowed up in the deep. But few, perhaps, thought of that at the time. ' +

'Indeed, in some sort, they were not grieved at this event, at least as a ' +

'portent; for they regarded it, not as a foreshadowing of evil in the ' +

'future, but as the fulfillment of an evil already presaged. They declared ' +

'that now they knew the reason of those wild shrieks they had heard the ' +

'night before. But again the old Manxman said nay.'

}).appendTo(contentView);

let controls = new Composite({

left:

0, right: 0, bottom: 0,

}).appendTo(contentView);

let spacingView = new TextView({

right: 16, width: 32, centerY: 0,

}).appendTo(controls);

let slider = new Slider({

left: 16, right: [spacingView, 16], bottom: 16, top: 16,

minimum: 2,

maximum: 50

}).onSelectionChanged(({ value }) => {

let lineSpacing = value / 10;

textView.lineSpacing = lineSpacing;

spacingView.text = lineSpacing;

}).appendTo(controls);

slider.selection = 15;

3. It is highly recommended to use modern compiled versions of JavaScript such as TypeScript and JSX. Here is the JSX example of enabling HTML markup for TextView

import {CheckBox, contentView, Stack, TextView} from 'tabris';
 
contentView.append(
 <Stack stretch padding={16} spacing={16} alignment='stretchX'>
   <TextView markupEnabled font='16px'>
     Normal Text <b>bold</b> <i>italic</i><br/>
     <big>big</big><br/>
     <small>small</small><br/>
     <strong>strong</strong><br/>
     <ins>inserted</ins><br/>
     <del>deleted</del>
   </TextView>
   <CheckBox text='Enable markup' checked onSelect={e => $(TextView).only().markupEnabled = e.checked}/>
 </Stack>
);

import {CheckBox, contentView, Stack, TextView} from 'tabris';

contentView.append(

Normal Text bold italic

small

strong

<ins>inserted</ins>

<del>deleted</del>

</TextView>

<CheckBox text='Enable markup' checked onSelect={e => $(TextView).only().markupEnabled = e.checked}/>

</Stack>

);

Useful tips

Remember that all Tabris widgets are JavaScript classes. While customizing the TextView you can extend it and use the custom child class instead. It might improve the structure of your application greatly.

For example, you can create CustomTextView class with parameters for font family and size, background color and corner radius. This way you will be able to modify it from one place later instead of looking for each TextView widget and customizing its manually.

For more detailed information about the widget, use TextView documentation page.

Feedback is welcome!

Want to join the discussion?
Feel free to contribute!

SLACK

GITHUB

Tabris.js Widgets: TextView

Properties and events

Examples

Useful tips

Feedback is welcome!

Stay tuned! Subscribe to our Developer Newsletter

CONTACT

LEARN MORE

LEGAL STUFF

SEE MORE