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>