3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.util.TextMetrics
9 * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
10 * wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and
11 * should not contain any HTML, otherwise it may not be measured correctly.
14 Ext.util.TextMetrics = function(){
18 * Measures the size of the specified text
19 * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
20 * that can affect the size of the rendered text
21 * @param {String} text The text to measure
22 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
23 * in order to accurately measure the text height
24 * @return {Object} An object containing the text's size {width: (width), height: (height)}
26 measure : function(el, text, fixedWidth){
28 shared = Ext.util.TextMetrics.Instance(el, fixedWidth);
31 shared.setFixedWidth(fixedWidth || 'auto');
32 return shared.getSize(text);
36 * Return a unique TextMetrics instance that can be bound directly to an element and reused. This reduces
37 * the overhead of multiple calls to initialize the style properties on each measurement.
38 * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
39 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
40 * in order to accurately measure the text height
41 * @return {Ext.util.TextMetrics.Instance} instance The new instance
43 createInstance : function(el, fixedWidth){
44 return Ext.util.TextMetrics.Instance(el, fixedWidth);
49 Ext.util.TextMetrics.Instance = function(bindTo, fixedWidth){
50 var ml = new Ext.Element(document.createElement('div'));
51 document.body.appendChild(ml.dom);
52 ml.position('absolute');
53 ml.setLeftTop(-1000, -1000);
57 ml.setWidth(fixedWidth);
62 * Returns the size of the specified text based on the internal element's style and width properties
63 * @param {String} text The text to measure
64 * @return {Object} An object containing the text's size {width: (width), height: (height)}
66 getSize : function(text){
74 * Binds this TextMetrics instance to an element from which to copy existing CSS styles
75 * that can affect the size of the rendered text
76 * @param {String/HTMLElement} el The element, dom node or id
80 Ext.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing')
85 * Sets a fixed width on the internal measurement element. If the text will be multiline, you have
86 * to set a fixed width in order to accurately measure the text height.
87 * @param {Number} width The width to set on the element
89 setFixedWidth : function(width){
94 * Returns the measured width of the specified text
95 * @param {String} text The text to measure
96 * @return {Number} width The width in pixels
98 getWidth : function(text){
99 ml.dom.style.width = 'auto';
100 return this.getSize(text).width;
104 * Returns the measured height of the specified text. For multiline text, be sure to call
105 * {@link #setFixedWidth} if necessary.
106 * @param {String} text The text to measure
107 * @return {Number} height The height in pixels
109 getHeight : function(text){
110 return this.getSize(text).height;
114 instance.bind(bindTo);
119 Ext.Element.addMethods({
121 * Returns the width in pixels of the passed text, or the width of the text in this Element.
122 * @param {String} text The text to measure. Defaults to the innerHTML of the element.
123 * @param {Number} min (Optional) The minumum value to return.
124 * @param {Number} max (Optional) The maximum value to return.
125 * @return {Number} The text width in pixels.
126 * @member Ext.Element getTextWidth
128 getTextWidth : function(text, min, max){
129 return (Ext.util.TextMetrics.measure(this.dom, Ext.value(text, this.dom.innerHTML, true)).width).constrain(min || 0, max || 1000000);