Hey

thanks for ng-FitText, which is great.

I am using it in an Ionic (1) app, and I am experiencing big performance issue when transitionning to a page that contains a fittext directive. The digest cycle is called again several times, and my users can wait 5 seconds to see the next page.

One of the fittext directive is on the items of a ng-repeat.

<ion-slide ng-repeat="s in sliderPages">
					<ul>
						<!-- <li ng-repeat="item in prodata | matchingProBrand:data.computed.proName:data.computed.proBrand | limitTo:s*sliderItemNumber+sliderItemNumber  | limitTo:-sliderItemNumber"> -->
						<li ng-repeat="item in suggestionList | limitTo:s*sliderItemNumber+sliderItemNumber:s*sliderItemNumber ">
							<a class="suggestPro item-content" ng-click="itemID=item.id;changeisFlash();launchComputeService(item.id);">
								<span><img ng-src={{imagesUrls[item.imageName]}} /></span>
								<p class="flex-caption" ng-class="item.fun == '0' ? 'aNormal' :( item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))" fittext fittext-min="8" fittext-max="12" ng-bind="item.model + ' - ' + (item.name | split:' ':0)" > {{item.model}} - {{item.name | split:' ':0}}</p> 
							</a>
						</li>
					</ul>
				</ion-slide>

Do you have an idea to help me on this ?

Add a conditional class so the element can be hidden for FOUC (if desired)

Any idea on how to solve this? :)

Current calculation of font size appears to use (parent[0].offsetWidth - 6) as the detector of parent width. However, if the parent element has the following CSS applied:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Then the detected width fails to accommodate for any padding applied to the parent. (This is particularly noticeable when using Twitter Bootstrap with fittext elements directly inside col- items)

Current Hackaround for this is to wrap fittext elements in another div, however, out of the box support would be lovely :)

I am trying to use the directive on more than one headline on a page.

It will resize the first, but not the second.

Any recommendations?

I recently included ng-fittext.js via bower into project and all my tests began to fail expressing module was undefined. I could fix the error if i switched my specs to angular.mock.module. I was able to narrow this down to window.module was being overriden from what angular.mock sets it to. If modified ng-fittext.js to not have a module variable this fixed the issue.

You have added global css inheritance, but minified js is still outdated. Please update it so it would be accessible through bower.

Please correct me if I'm wrong, but my understanding is that this library should shrink text to fit within the width of an element. If I'm mistaken, feel free to close this issue.

issue:

This "lorem ipsum" text should be contained within the dark area.

The text element itself is the width of the dark area (~280px).

code:

// config
angular.module('app')
  .config(function(fitTextConfigProvider) {
    fitTextConfigProvider.config = {
      debounce: _.debounce
    };
  })

<!-- view -->
<h1 data-fittext ng-model='user.name' ng-bind='user.name'></h1>

CSS (from web inspector):

The following styles are set by this module:

{
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
}

Notice that "font-size" property is absent. The rest of the styles were defined in the CSS of my app.

EDIT: I should also note that no errors have been thrown.

Would be nice if this was bower compatible

http://devhike.blogspot.com/2013/06/how-to-register-your-library-or.html

Thanks.

Consider making TypeScript Definitions to https://github.com/borisyankov/DefinitelyTyped

How can I disable line-height?

I have 5 lines of text controlled by FitText, it is not mandatory to fill the 5 lines though, so I keep the max font size high. If the user enter 1 letter for each field though the height of the element exceeds it's limits and goes over the rest of the elements below.
Is there anyway that I could set a maximum parent height and adapt the fonts according to that too ?

I set a min size to 30 and it breaks outside of the container element on mobile. How can I get it to do lines breaks automatically?

Font size is 0 if template is loaded dynamically by angular-route, unless I triggered $(window).resize().

When I add negative pixel letter-spacing to the style of the element, fitText will increase the font size of the text beyond the element width.

• a minified version could be provided
• folder and script names should be lowercase

Other than that, great job.

The config value provider conflicts with a service of the same name in my application.

The config provider should be prefixed. I would suggest fitTextConstants or fitTextDefaultConfig would be better names.

I observed that when I hide a parent of the text, I sometimes (but not always) have an unexpected resize to the min size.
The hiding is done with some animations (slide / fade), and I suspect when showing again the fit routine is never called. Resizing the window works fine but I can't expect that from my users :)
Also to provoke this, you can : hide, resize the window, show.
Do you know any workaround ?

Hi

how to dynamically call ng-fitText to resize some text that has been dynamically insterted ?

thanks

See plunker for example

Hi, thank you for this module.

I had to investigate to understand why this module doesn't worked "out of the box" just by adding data-fittext as a directive on my element.

It appears that Jade compiles data-fittext as data-fittext="data-fittext" in HTML in order to support older browser (they don't like empty attribute). I would suggest to use a specific attribute name for the compressor value instead of using the default directive attribute value.

It's not a big deal but Jade is quite popular and it will probably save some time to other people in the exact same situation :)

Regards,

Hi
I've got an exception, when I bind ngFitText module to my angular application:

Error: [$injector:modulerr] Failed to instantiate module application due to:
[$injector:modulerr] Failed to instantiate module app.core due to:
[$injector:modulerr] Failed to instantiate module ngFitText due to:
[$injector:nomod] Module 'ngFitText' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ngFitText
minErr/<@http://127.0.0.1:3000/bower_components/angular/angular.js:63:12
module/<@http://127.0.0.1:3000/bower_components/angular/angular.js:1774:1
ensure@http://127.0.0.1:3000/bower_components/angular/angular.js:1698:38
module@http://127.0.0.1:3000/bower_components/angular/angular.js:1772:1
loadModules/<@http://127.0.0.1:3000/bower_components/angular/angular.js:4115:22
forEach@http://127.0.0.1:3000/bower_components/angular/angular.js:323:11
loadModules@http://127.0.0.1:3000/bower_components/angular/angular.js:4099:5 angular.js:63:11

I inserted in the module like this:

angular.module('app.core', ['ngAnimate', 'ngTouch', 'ngSanitize', 'restangular', 'ui.router', 'ngMaterial', 'ngFitText']);

and using ngFitText version 3.3.0
Thanks

Need a better solution than setting a delay.

getComputedStyle is ran too quickly to get the computed styles on page load. Needs a timeout to let dom calculate.

This is breaking line-height for me

i'm using on ionic framework.

Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module ngFitText due to:
Error: [$injector:nomod] Module 'ngFitText' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Is it possible to have a way to manually refresh the font-size calculation ?

Maybe via a custom event that we could trigger when we want, or by watching another special attribute, or both...

We need to use ngBindHtml , and not ngBind (that is [watched](ngBind watch) by the directive).
It may also help people using the {{ ... }} notation, or after having resized the parent container.

I have a widget that can be resized to any size.
I have several lines of text inside it that need to scale when the widget resizes.
One of the text changes constantly ( like stock price)

The issue I see is that when the stock price value is updated (every 5 sec or so) , the text does not resize and appears out of the container.

eg.

``` kjhkj`

`

On the site http://patrickmarabeas.github.io/ng-FitText.js/ if it goes too many characters it deletes all of the header. Latest Chrome OS

If the directive is wrapped inside an element with padding, it appears this is not being considered. The result is that the text is sized as if this padding was not there.

A solution could be changing:

Math.min((parent[0].offsetWidth - 6) * ratio * compressor,

to

Math.min(((parent[0].offsetWidth - (parseFloat(getComputedStyle(parent[0]).paddingLeft) + parseFloat(getComputedStyle(parent[0]).paddingRight))) - 6) * ratio * compressor,

Moving on to Angular 2...
Is there any good (somewhat proven) alternative to ng-FitText for the new framework at present?
Or a plan to develop this neat utility for it?

p.s. I see someone started https://github.com/lokenxo/ng2-fittext but it looks a bit too fresh out of the oven.

"[$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 21 of the expression [{fontSize:fontSize} {fontSize:fontSize}] starting at [{fontSize:fontSize}]"

I don't have time to investigate right now but here's the piece of code that produces that error

<h5 data-fittext>{{object.property}}</h5>

which is inside a directive and a ng repeat.

Hi,

I'm using your plugin and I'd like to know if there's any way to have the same size for a set of elements.
I have a grid with 3 elements in it and I'd love to have a 'fixed' font-size, that would correspond to the minimal font-size in this set, for all my items in the set

For debugging purpose or to proceed own minifying process can you please provide source file through bower.

Hi,

I have a div which the width and height is dynamic. the user can change values in an inputbox.
How can i trigger a rest of the FitText once the values change?

Thanks

Is there a way to have a line break inside my fittext?

Is have some text that I want to display all the same size but on two lines, for example:

some
random text

the outcome I need is (all the text the same size):
some
random text

But doing this makes the text appear very large.

Can someone help?

Hi, thank you for this module.

I had to investigate to understand why this module doesn't worked "out of the box". Just by adding data-fittext as a directive on my element.

It appears that Jade compiles data-fittext as data-fittext="data-fittext" in HTML in order to support older browser (they don't like empty attribute). I would suggest to use a specific attribute name for the compressor value instead of using the default directive attribute value.

It's not a big deal but Jade is quite popular and it will probably save some time to other people in the exact same situation :)

Regards,

element[0].style should be cached.

We would like to use ng-FitText, but noticed that the npm version is quite out of date and we don't make use of bower. Is there a chance we could get an updated npm version available?

I noticed the resizer function gets called on every resize event. On systems where windows are continuously repainted as the user is resizing them, it could help to rate limit the number of resize calls per 100ms (for instance).

http://lodash.com/docs#debounce has just such an example:

// avoid costly calculations while the window size is in flux
var lazyLayout = _.debounce(calculateLayout, 150);
jQuery(window).on('resize', lazyLayout);

What do you think?

it sometimes occurs even on demo page. You can see it on the following image.

I'm using ngFitText in a context where I have several text elements aligned.
They have different lenghts, meaning they all resize differently.

Given ngFitText sets line-height: 1, they also lose the alignment.

A data-fittext-preserve-line-height="true" option, setting the line-height to the value of the original font-size, would be very handy :)

I tried myself something around this line of code:

window.getComputedStyle(element[0],null).getPropertyValue("font-size");

But I just couldn't make it properly work inside the algorithm you are using.

I've been having trouble getting this to work tonight, and after some experiments I discovered that I get great results when using this everywhere BUT within an ng-view. That is to say, with identical elements and css text will resize correctly outside of an ng-view but incorrectly within one. The text will render at font-size 10 and doesn't seem to respond to any prompting, including it seemingly ignores the data-fittext-max and data-fittext-min attributes.

Sorry I don't have time tonight to whip up an example to illustrate what I'm seeing, just thought I'd drop off the intel.

If you add e.g. "ng-FitText.js": "2.0.0" to your bower.json and try "bower install", it will fail with "No versions found in git://github.com/patrickmarabeas/ng-FitText.js.git".

Thanks for releasing this project, look forward to trying it out.

Hi

Is there a way to use "rem" units in data-fittext-max ?

Thanks a lot for this plugin

Hiya, lines seem to be overlapping in the example. I've had the same thing happen to me :( Any help?

My code (i am using bootstrap)

<div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4">
			<button class="col-xs-12 object-button"><span data-fittext >Create Object</span></button>						
		</div>

I would also prefer to not have a span inside the button, but not having the span there didn't work at all.

<div class="col-xs-10 col-xs-offset-1 col-md-4 col-md-offset-4">
			<button data-fittext class="col-xs-12 object-button">Create Object</button>						
		</div>

Relevant CSS

.object-button{
	height: 150px;
}

.other-object-button,
.object-button{
	/*font-size: 2vw;*/
	font-weight: 300;
	text-align: center;
	color: #ffffff;
	background-color: #1b39a8;
	border: 0px ;
	width:100%;
	display:inline-block;	
	/*border: 2px solid #0F358B;*/
}

Does this support angular 1.4? Has anyone tested it with Angular 1.4?