JSignage:FitTextArea

From SpinetiX Support Wiki

Jump to: navigation, search

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

A new fit-text area is constructed with $.fitTextArea( { ... } ).

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

Specific attributes

All attributes applicable to the text areas are supported.

The fit-text area accepts the following specific attributes:

  • factors
    Can be 'fine' (default), 'coarse' (preferred when multiple text areas in the page should be aligned) or an array of scaling factors.

Specific functions

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

See the list of functions to work with layers.

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 alligned on teh 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' );
});

Note:

  • 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.
This page was last modified on 16 January 2019, at 13:47.