Is there no text vertical align property in famo.us?

Question

It looks like in all the famo.us examples they use a really big lineHeight property to vertically align the text on a surface to the middle, whereas they use textAlign: "center" to align it horizontally. That seems problematic if there is no vertical align because if I want a paragraph of text the line height trick will screw that up.

Thanks!

Answer 1

This should be an easier question than it is but because of an issue with true-sizing surfaces, you may need to pull together a hack for this one.

The issue is that true-sized surfaces, cannot report their height to modifiers for properly calculating position at a given origin. You will have to set the actual height of the surface in order to achieve true centering.

In this example, The surface is centered in the entire context based on the size of the content. I subclassed the Surface so I could redefine deploy which takes the target element as the argument. I then set the size of the surface.state so that with its origin, it is able to center the element.

These are the types of issues that will be fixed soon, but a hack will have to do for now..

Here is the example.. Good Luck

var Engine            = require('famous/core/Engine');
var Surface           = require('famous/core/Surface');
var StateModifier     = require('famous/modifiers/StateModifier');

function MySurface(options) {
    Surface.apply(this, arguments);
    this._superDeploy = Surface.prototype.deploy
}

MySurface.prototype = Object.create(Surface.prototype);
MySurface.prototype.constructor = MySurface;

MySurface.prototype.deploy = function deploy(target) {
  this._superDeploy(target);
  var size    = this.getSize();
  var width   = size[0] == true ? target.offsetWidth  : size[0] ;
  var height  = size[1] == true ? target.offsetHeight : size[1] ;
  this.state.setSize([width,height]);
};


var context = Engine.createContext();

var lorem = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var surface = new MySurface({
  size: [200,true],
  content: lorem,
  properties: {
    color: 'white',
    textAlign: 'center',
    backgroundColor: 'green'
  }
});

surface.state = new StateModifier({origin:[0.5,0.5]});

context.add(surface.state).add(surface);