4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
14 * @class Roo.util.TextMetrics
15 * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
16 * wide, in pixels, a given block of text will be.
19 Roo.util.TextMetrics = function(){
23 * Measures the size of the specified text
24 * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
25 * that can affect the size of the rendered text
26 * @param {String} text The text to measure
27 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
28 * in order to accurately measure the text height
29 * @return {Object} An object containing the text's size {width: (width), height: (height)}
31 measure : function(el, text, fixedWidth){
33 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
36 shared.setFixedWidth(fixedWidth || 'auto');
37 return shared.getSize(text);
41 * Return a unique TextMetrics instance that can be bound directly to an element and reused. This reduces
42 * the overhead of multiple calls to initialize the style properties on each measurement.
43 * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
44 * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
45 * in order to accurately measure the text height
46 * @return {Roo.util.TextMetrics.Instance} instance The new instance
48 createInstance : function(el, fixedWidth){
49 return Roo.util.TextMetrics.Instance(el, fixedWidth);
56 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth){
57 var ml = new Roo.Element(document.createElement('div'));
58 document.body.appendChild(ml.dom);
59 ml.position('absolute');
60 ml.setLeftTop(-1000, -1000);
64 ml.setWidth(fixedWidth);
69 * Returns the size of the specified text based on the internal element's style and width properties
70 * @memberOf Roo.util.TextMetrics.Instance#
71 * @param {String} text The text to measure
72 * @return {Object} An object containing the text's size {width: (width), height: (height)}
74 getSize : function(text){
82 * Binds this TextMetrics instance to an element from which to copy existing CSS styles
83 * that can affect the size of the rendered text
84 * @memberOf Roo.util.TextMetrics.Instance#
85 * @param {String/HTMLElement} el The element, dom node or id
89 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
94 * Sets a fixed width on the internal measurement element. If the text will be multiline, you have
95 * to set a fixed width in order to accurately measure the text height.
96 * @memberOf Roo.util.TextMetrics.Instance#
97 * @param {Number} width The width to set on the element
99 setFixedWidth : function(width){
104 * Returns the measured width of the specified text
105 * @memberOf Roo.util.TextMetrics.Instance#
106 * @param {String} text The text to measure
107 * @return {Number} width The width in pixels
109 getWidth : function(text){
110 ml.dom.style.width = 'auto';
111 return this.getSize(text).width;
115 * Returns the measured height of the specified text. For multiline text, be sure to call
116 * {@link #setFixedWidth} if necessary.
117 * @memberOf Roo.util.TextMetrics.Instance#
118 * @param {String} text The text to measure
119 * @return {Number} height The height in pixels
121 getHeight : function(text){
122 return this.getSize(text).height;
126 instance.bind(bindTo);
132 Roo.Element.measureText = Roo.util.TextMetrics.measure;