JSignage:TextTutorial6

Description

Displaying text of unknown length by scaling down the font size

• When text comes from an external data source, its length is not known in advance.
• One method to display text of unknown length is to use the fitTextArea layer.
• This layer type is similar to the textArea but will reduce (but never expand) the font size to make sure that all the text is showing on the screen.
• The scaling is done according to a fixed number of factors so as to preserve alignment between adjacent text areas as demonstrated below: three lines on the left occupy the same space as two lines on the right.

Source code

var theDuchess = "\u201CI quite agree with you. And the moral of that is: Be what you would seem to be, "
                     + "or if you'd like it put more simply: Never imagine yourself not to be otherwise than "
                     + "what it might appear to others that what you were or might have been was not otherwise "
                     + "than what you had been would have appeared to them to be otherwise.\u201D";

var leftText = $.fitTextArea({
        top: '5%',
        height: '90%',
        left: '15%',
        width: '35%',        
        textAlign: 'end',
        displayAlign: 'before',
        fontFamily: 'Georgia',
        fontSize: 32
});

var rightText = $.textArea({
        top: '5%',
        height: '90%',
        left: '55%',
        width: '40%',
        textAlign: 'start',
        displayAlign: 'before',
        fontFamily: 'Georgia',
        fontSize: 32
});

rightText.text( theDuchess );

$.get( 'media/Corbeau.txt', function( text ) {
        var lines = text.split( '\n' );
        var txt = $.tspan();
        for ( var i=0; i<lines.length; i++ )
          txt.tspan( lines[i] ).tbreak();
        leftText.text( txt );

        $('svg').add([ leftText, rightText ]);
}, 'text' );