From SpinetiX Support Wiki

(Redirected from JSignage:HeadlineTextAreas)
Jump to: navigation, search

This page is related to jSignage text layers.


jSignage.headlineTextArea( attributesObject )

Returns: jSignage Object


A headline text area is an extension of the text area layer optimized for single lines. It automatically adjusts the font size and transform so that:

  • the text occupies the full height of the area on a single line, and
  • it is entirely visible.

It is especially useful for single line text from an external source, such as a news headline, which needs to be displayed in full, but whose size may be variable and cannot be known in advance.

The headline text area is part of the advanced layer type.


  • attributesObject
    Type: Plain Object.
    An object containing any of the text layer attributes, excepted for the vertical alignment which is not relevant since the text is normally full height, plus the specific attributes detailed below.

Specific attributes

The headline text area accepts the following specific attributes:

  • scaleMethod
    Scaling method, either 'squeeze' or 'uniform'. Default: 'squeeze'.
    Specifies how the text size is reduced to make it fit in the area if it is too large:
    • If set to 'squeeze', the text will be squeezed horizontally.
    • If set to 'uniform', the font size is reduced and the text is centered vertically.


All jSignage layers share a common set of functions, such as .begin(), .end(), .show(), .hide(), .addTo(), etc. To add or replace the text content inside a text area, use the .text() method.


Simple text area

Create a single line of text as large as possible.

    $.headlineTextArea( {} ).text('Fit this text.').addTo('svg');

Scaled text area

Create a single line of text as large as possible reducing the font size to make it fit in the area.

    $.headlineTextArea( {scaleMethod: 'uniform'} ).text('Fit this text.').addTo('svg');

Show the date

Shows the current date on a single line.

var old =null;
function showDate() {
   var now = new Date();
   var date = now.toDateString();
   if ( old ) old.end();
   old = $.headlineTextArea( { scaleMethod: 'uniform' } )
                           .text( date )
   $.setTimeout( showDate, 5*60*1000 );
$( showDate );


  • The date is updated every 5 min using a timer. It is created using the setTimeout helper.
  • The function showDate is called once when the document is fully loaded using $( showDate );.
  • The old text area is stored in a variable (old) and is terminated using the end() before adding a new text zone to the document. This insure that only the latest text is visible.
  • The text area is build with the function removeAfter() to make sure that it it removed from the tree once it is over. This prevent memory leaks.

See also

This page was last modified on 20 August 2019, at 13:12.