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">);
56 </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">){
57 </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">));
58 </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">);
59 </span><span class="jsdoc-var">ml.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'absolute'</span><span class="jsdoc-syntax">);
60 </span><span class="jsdoc-var">ml.setLeftTop</span><span class="jsdoc-syntax">(-1000, -1000);
61 </span><span class="jsdoc-var">ml.hide</span><span class="jsdoc-syntax">();
63 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">){
64 </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fixedWidth</span><span class="jsdoc-syntax">);
67 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">instance </span><span class="jsdoc-syntax">= {
68 </span><span class="jsdoc-comment">/**
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 </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">){
75 </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">);
76 </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">();
77 </span><span class="jsdoc-var">ml.update</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
78 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">s</span><span class="jsdoc-syntax">;
81 </span><span class="jsdoc-comment">/**
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
87 </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">){
88 </span><span class="jsdoc-var">ml.setStyle</span><span class="jsdoc-syntax">(
89 </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">)
93 </span><span class="jsdoc-comment">/**
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 </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">){
100 </span><span class="jsdoc-var">ml.setWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">);
103 </span><span class="jsdoc-comment">/**
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 </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">){
110 </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">;
111 </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">;
114 </span><span class="jsdoc-comment">/**
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 </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">){
122 </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">;
126 </span><span class="jsdoc-var">instance.bind</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">bindTo</span><span class="jsdoc-syntax">);
128 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">instance</span><span class="jsdoc-syntax">;
131 </span><span class="jsdoc-comment">// backwards compat
132 </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>