ember-text-resize

Easily resize texts to fit the container.

Installation

ember install ember-text-resize

Demo

https://brunosalgado1985.github.io/demos/ember-text-resize/

Usage

Pass the text to text-resize component:

<div class="row">
    <div class="columns small-2">
        {{text-resize text="999.999.999,99"}}
    </div>
</div>

Or wrap it:

<div class="row">
    <div class="columns small-2">
        {{#text-resize}}
            999.999.999,99
        {{/text-resize}}
    </div>
</div>

Settings

• fontSize: initial font size (default: element css font-size)
• minFontSize: minimum font size
• maxFontSize: maximum font size
• step: pixels to maximize/minimize the text until it fit. (default: -2)
• alwaysVisible: show the text while it's resizing. (default: false)
• text: text to fit on the container.

Maximize the text

Set a positive value on step.

<div class="row">
    <div class="columns small-12">
        {{#text-resize step=4}}
            999.999.999,99
        {{/text-resize}}
    </div>
</div>

Minimize the text

Set a negative value on step.

<div class="row">
    <div class="columns small-2">
        {{#text-resize step=-4}}
            999.999.999,99
        {{/text-resize}}
    </div>
</div>

Working asynchronous

import Ember from 'ember';
 
export default Ember.Controller.extend({
 
    init() {
        this._super(...arguments);
 
        setTimeout(() => {
            Ember.set(this, 'myText1', '999.999.999,99');
            Ember.set(this, 'myText2', '999.999.999,99');
        }, 1000);
    },
 
});

<div class="row">
    <div class="columns small-6">
        {{text-resize step=4 text=myText1}}
    </div>
    <div class="columns small-6">
        {{#text-resize step=-4}}
            {{myText2}}
        {{/text-resize}}
    </div>
</div>

Max and Min Font Size

Use minFontSize and maxFontSize to set the size limits.

<div class="row">
    <div class="columns small-6">
        {{text-resize step=3 text=myText1 maxFontSize=40}}
    </div>
    <div class="columns small-1">
        {{#text-resize step=-4 minFontSize=12}}
            {{myText2}}
        {{/text-resize}}
    </div>
</div>