1 <html><head><title>Roo/util/TextMetrics.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
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 </span><span class="jsdoc-var">Roo.util.TextMetrics </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
20 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">shared</span><span class="jsdoc-syntax">;
21 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
22 </span><span class="jsdoc-comment">/**
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 </span><span class="jsdoc-var">measure </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
32 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">shared</span><span class="jsdoc-syntax">){
33 </span><span class="jsdoc-var">shared </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.util.TextMetrics.Instance</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
35 </span><span class="jsdoc-var">shared.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
36 </span><span class="jsdoc-var">shared.setFixedWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">);
37 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">shared.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
40 </span><span class="jsdoc-comment">/**
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 </span><span class="jsdoc-var">createInstance </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
49 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.util.TextMetrics.Instance</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
54 </span><span class="jsdoc-comment">/**
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 </span><span class="jsdoc-var">Roo.util.TextMetrics.Instance </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bindTo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">)
65 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ml </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.Element</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">));
66 </span><span class="jsdoc-var">document.body.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ml.dom</span><span class="jsdoc-syntax">);
67 </span><span class="jsdoc-var">ml.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
68 </span><span class="jsdoc-var">ml.setLeftTop</span><span class="jsdoc-syntax">(-1000, -1000);
69 </span><span class="jsdoc-var">ml.hide</span><span class="jsdoc-syntax">();
71 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
72 </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
75 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">instance </span><span class="jsdoc-syntax">= {
76 </span><span class="jsdoc-comment">/**
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 </span><span class="jsdoc-var">getSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
82 </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
83 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ml.getSize</span><span class="jsdoc-syntax">();
84 </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
85 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
88 </span><span class="jsdoc-comment">/**
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
93 </span><span class="jsdoc-var">bind </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">){
94 </span><span class="jsdoc-var">ml.setStyle</span><span class="jsdoc-syntax">(
95 </span><span class="jsdoc-var">Roo.fly</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'font-size'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'font-style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'font-weight'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'font-family'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'line-height'</span><span class="jsdoc-syntax">)
99 </span><span class="jsdoc-comment">/**
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 </span><span class="jsdoc-var">setFixedWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">){
105 </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
108 </span><span class="jsdoc-comment">/**
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 </span><span class="jsdoc-var">getWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
114 </span><span class="jsdoc-var">ml.dom.style.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">;
115 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.width</span><span class="jsdoc-syntax">;
118 </span><span class="jsdoc-comment">/**
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 </span><span class="jsdoc-var">getHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">){
125 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.height</span><span class="jsdoc-syntax">;
129 </span><span class="jsdoc-var">instance.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bindTo</span><span class="jsdoc-syntax">);
131 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">instance</span><span class="jsdoc-syntax">;
134 </span><span class="jsdoc-comment">// backwards compat
135 </span><span class="jsdoc-var">Roo.Element.measureText </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.util.TextMetrics.measure</span><span class="jsdoc-syntax">;</span></code></body></html>