JSignage:FitTextArea

This page is related to jSignage text layers.

jSignage.fitTextArea()

jSignage.fitTextArea( attributesObject )

Returns: jSignage Object

Description

A fit-text area is an extension of the text area layer that automatically chooses the optimal font size so that all the text is visible. It is especially useful for text from an external source, such as a news feed, which needs to be displayed in full, but whose size may be variable and cannot be known in advance.

The fit-text is part of the advanced layer type.

Parameters

attributesObject
Type: Plain Object.

An object containing any of the text layer attributes, plus the specific attribute factors, which can be set to 'fine' (default), 'coarse' (preferred when multiple text areas in the page should be aligned) or an array of scaling factors.

Functions

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.

Examples

Simple text area

Create a text as large as possible.

$(function(){ 
    $.fitTextArea( { fontSize: 'max' } ).text('Fit this text.').addTo('svg');
});

Maximum size

Create a fit text area, when the font size is at most 100px. The text may be smaller if it doesn't fit.

$(function(){ 
   $.fitTextArea( { fontSize: 100 } ).text('Fit this text to no more than 100px.').addTo('svg');
});

Variable text size

Relative text size between the tspan() are preserved. As for normal textArea tbreak() can also be used.

$(function(){ 
     $.fitTextArea( {} ).text(
                              $.tspan('Big text', { fontSize: 200 })
                               .tbreak().tbreak()
                               .tspan('Small text', { fontSize: 100 })
                       ).addTo('svg');
});

Text aligned on the baseline

Using the factors enables alignment of the text on the baseline by choosing integer factors.

$(function(){ 
  $('svg').add([
     $.fitTextArea( { left: '0%', width: '33%' , fontSize: 150, factors: [1,2,4], displayAlign: 'before' } )
                  .text('Small text'),
     $.fitTextArea( { left: '33%', width: '33%', fontSize: 150, factors: [1,2,4], displayAlign: 'before' } )
                  .text('Medium text baseline is aligned to the small text.'),
     $.fitTextArea( { left: '66%', width: '33%', fontSize: 150, factors: [1,2,4], displayAlign: 'before' } )
                  .text('Large text baseline is aligned to the small and medium text, because the size is always divided by 2.')
   ]);
});

Quote of the day

Shows the first quote of the day from an RSS feed.

$(function(){
  var uri = 'http://feeds.feedburner.com/brainyquote/QUOTEBR';
  $.get( uri, function( rssFeed ) {
          text = $.parseRSS( rssFeed );      
          $.fitTextArea( 
                         { fontSize: 'max' } 
                       ).text(
                              $.tspan( text[0].description ).tbreak().tbreak()
                               .tspan( text[0].title )
                       ).addTo('svg');
  }, 'text' );
});

Notes:

The $.get() is used to retrieve the quote from the 'uri'.
The $.parseRSS() is used to parse the input data, and map it into a JavaScript array.
The quote is loaded once when the document is opened and is never updated.

JSignage:FitTextArea

From SpinetiX Support Wiki

Contents