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);
55 * @class Roo.util.TextMetrics.Instance
56 * Instance of TextMetrics Calcuation
58 * Create a new TextMetrics Instance
59 * @param {Object} bindto
60 * @param {Boolean} fixedWidth
63 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth)
65 var ml = new Roo.Element(document.createElement('div'));
66 document.body.appendChild(ml.dom);
67 ml.position('absolute');
68 ml.setLeftTop(-1000, -1000);
72 ml.setWidth(fixedWidth);
77 * Returns the size of the specified text based on the internal element's style and width properties
78 * @param {String} text The text to measure
79 * @return {Object} An object containing the text's size {width: (width), height: (height)}
81 getSize : function(text){
89 * Binds this TextMetrics instance to an element from which to copy existing CSS styles
90 * that can affect the size of the rendered text
91 * @param {String/HTMLElement} el The element, dom node or id
95 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
100 * Sets a fixed width on the internal measurement element. If the text will be multiline, you have
101 * to set a fixed width in order to accurately measure the text height.
102 * @param {Number} width The width to set on the element
104 setFixedWidth : function(width){
109 * Returns the measured width of the specified text
110 * @param {String} text The text to measure
111 * @return {Number} width The width in pixels
113 getWidth : function(text){
114 ml.dom.style.width = 'auto';
115 return this.getSize(text).width;
119 * Returns the measured height of the specified text. For multiline text, be sure to call
120 * {@link #setFixedWidth} if necessary.
121 * @param {String} text The text to measure
122 * @return {Number} height The height in pixels
124 getHeight : function(text){
125 return this.getSize(text).height;
129 instance.bind(bindTo);
135 Roo.Element.measureText = Roo.util.TextMetrics.measure;