From SpinetiX Support Wiki

Jump to: navigation, search


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 espcially 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.

A new headline text area is constructed with $.headlineTextArea( { ... } ).

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

Specific attributes

All attributes applicable to the text areas are supported, excepted for the vertical alignment which is not relevant since the text is normally full height.
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.

Specific functions

The headline text area has the same methods for specifying text content as the text areas, notably it supported unformatted text or formatted text object using .text().

See the list of functions to work with layers.


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.
This page was last modified on 16 April 2015, at 18:43.