Scaling text to fit in Famo.us Surface

Question

Here's the surface

this.gymNameSurface = new Surface({
  size: [true, gymDetailItemHeight],
  classes: ["gym_name_details"],
  content: ['<div id="gym_name_details">',this.options.data.gymName.properties.gymName,'</div>'].join(''),
  properties: {
    backgroundColor: 'black',
    fontSize: "2em",
    lineHeight: '72px'
  }
})

In cases when the gym name is under a certain # of characters, '2em' is the perfect size. In instances when the gym name is over a certain # of characters, it's too large.

How do I dynamically resize the fontSize of the the text inside the surface if, say, I don't want the surface's width to be > window.innerWidth/2?

Thanks

score 1 · Accepted Answer · answered Oct 11 '14 at 16:37

1

You could do it with plain js:

var fontsize = "2em"; // Less text - big font
if(this.options.data.gymName.properties.gymName.length > 32) {
    fontsize = "1.4em"; // More text - smaller font size
}

then on your surface properties:

properties: {
    ...
    fontSize: fontsize,
    ...
}

answered Oct 11 '14 at 16:37

kobra

150
7

Commenting trustkr's answer below: You do not need jQuery to check element heights. You can get the width & height of an element with Famo.us via `mySurface.getSize(true)` - The true-argument means to get the real size of the element, instead of the value set in properties. – kobra Oct 15 '14 at 09:22

score 1 · Answer 2 · answered Oct 13 '14 at 05:33

You might not know how wide your text will be at first, and thus you won't know what font size to choose for your font, but you can calculate it after it exists in the DOM. Something like this:

gymNameSurface.on('deploy', function() {

    var surfaceWidth = $('#gymNameSurface').width(); // or get the surface width on Surface.prototype.commit from the context.
    var $myText = $('#text');
    var textWidth = $myText.width();
    var fontSize = 24; // randomly picked
    var ratio = surfaceWidth/textWidth;

    fontSize = fontSize*ratio;

    $myText.css({'font-size': fontSize+'em'}); //  or whatever unit you are using.
});

Tip on the commit function of a Surface: from the context you can predetermine the width of a surface before it's content (a DOM element) has even been deployed.

score 0 · Answer 3 · answered Oct 13 '14 at 19:11

Thanks to vtntimo, here's final code:

this.gymNameSliderFontSize = "1.9em"
if (this.options.data.gymName.properties.gymName.length > 22) {
  this.gymNameSliderFontSize = "1.1em"; // More text - smaller font size
} else if (this.options.data.gymName.properties.gymName.length > 21) {
  this.gymNameSliderFontSize = "1.2em";
} else if (this.options.data.gymName.properties.gymName.length > 20) {
  this.gymNameSliderFontSize = "1.3em";
} else if (this.options.data.gymName.properties.gymName.length > 19) {
  this.gymNameSliderFontSize = "1.4em";
} else if (this.options.data.gymName.properties.gymName.length > 18) {
  this.gymNameSliderFontSize = "1.5em";
} else if (this.options.data.gymName.properties.gymName.length > 17) {
  this.gymNameSliderFontSize = "1.6em";
} else if (this.options.data.gymName.properties.gymName.length > 16) {
  this.gymNameSliderFontSize = "1.7em";
} else if (this.options.data.gymName.properties.gymName.length > 15) {
  this.gymNameSliderFontSize = "1.9em";
}

this.gymNameSurface = new Surface({ 
  size: [true, gymDetailItemHeight],
  classes: ["gym_name_details"],
  content: ['<div id="gym_name_details">',this.options.data.gymName.properties.gymName,'</div>'].join(''),
  properties: {
    backgroundColor: 'black',
    fontSize: this.gymNameSliderFontSize,
    lineHeight: '72px', 
    letterSpacing: '1px'
  }
})

Downvoted for tree of `if`s. `var len = this.options.data.gymName.properties.gymName.length; var size = Math.max(1, 7 - (len - 16); if (size > 7) size = 9; this.gymNameSliderFontSize = "1."+size+"em";` works just as well (or an array, object w/keys, etc). — Iiridayn, Feb 01 '16 at 22:22

Scaling text to fit in Famo.us Surface

3 Answers3