Text Layers

Name: Media La Vista FZCO
Address: Dubai Silicon Oasis, Dubai, AE
Telephone: +971 55 581 01 49

Text layers display formatted text content in rectangular regions with various scrolling/sizing behaviors.

Constructors

Constructor	Description
`$.textArea()`	Basic text wrapping in a rectangular region
`$.fitTextArea()`	Auto-sizes font to fill the area
`$.headlineTextArea()`	Single headline, max font size
`$.scrollingTextArea()`	Scrolls long text
`$.pingPongTextArea()`	Bounces text back and forth
`$.textBar()`	Horizontal text ticker bar

All text layers support common layer attributes and frame decoration.

Text Attributes

Alignment

Attribute	Values	Default
`textAlign`	`'start'`, `'center'`, `'end'`	`'start'`
`displayAlign`	`'before'` (top), `'center'`, `'after'` (bottom)	`'before'`

Styling

Attribute	Description	Example
`fill`	Text color	`'white'`, `'#ff0000'`
`fontFamily`	Font name	`'Arial'`
`fontSize`	Size in px or `'max'`	`60`, `'max'`
`fontWeight`	Weight	`'bold'`

Examples

Simple Text

$(function() {
  $.textArea({
    width: '90%', height: '15%', top: '80%', left: '5%',
    fontSize: 60
  }).text("Welcome to jSignage demo").addTo('svg');
});

Auto-Sized Text

$(function() {
  $.textArea({ fontSize: 'max', width: '90%', height: '15%'})
    .text("Welcome").addTo('svg');
});

Formatted Text with tspan

$.textArea({ fontSize: 60 }).text(
  $.tspan("Welcome to ")
    .tspan("jSignage", { fill: 'blue'})
    .tspan(" API demo")
)

Scrolling News Ticker

$.scrollingTextArea({
  top: '80%', height: '10%', lines: 1, lineDur: '2s',
  fill: 'white',
  frame: { backColor: 'black', backOpacity: 0.6 }
}).text("Long text that scrolls automatically").addTo('svg');

Dynamic Clock

$(function() {
  var clock = $.textArea({ fontSize: 'max', width: '90%', height: '20%'}).addTo('svg');
  $.setInterval(function() {
    var d = new Date();
    clock.text(d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds());
  }, 1000);
});

Layers Overview — common attributes
Frame Decoration — background, borders, shadows
Transitions & Effects — flyIn, fadeIn for text
Slideshows — text inside renderToSVG slides