Size of a string with a css class

Question

Hi i have build my own text-wrap class. and i've run into a small problem it is kind off slow, because my script that checks the size of the font puts the string into a div with the classes but thats on a big scale intens for the DOM. so is there another way?

as you can see i tryed to build a cache controller but that makes it slower

var textMetrics = function (appendTo) {
    var span;
    var cache = [];

    this.init = function () {
        span = document.createElement("span");
            appendTo.appendChild(span);
            span.style.position = 'absolute';
            span.style.left     = -9999 + 'px';
    };

    this.checkCache = function (word, style) {

        for (var i = 0; i < cache.length; i++) {
            if (cache[i].word == word) {
                return cache[i].value;
            }
        }
        return false;
    };

    this.addCache = function (word, style, value) {
        cache.push({
            "word": word,
            "style": style,
            "value": value
        });
    };

    this.getSize = function (word, style) {
        word = word.replaceAll(" ", "&nbsp;");

        //var inCache = this.checkCache(word, style);
        var inCache = false;
        if (inCache === false) {

            span.innerHTML = word;

            for (var i in style) {
                span.style[i] = style[i];
            }

            var coords = {
                "width": span.offsetWidth,
                "height": span.offsetHeight
            };


            for (var i in style) {
                span.style[i] = "";
            }

            span.innerHTML = "";

            this.addCache(word, style, coords);

            return coords;
        }
        else {
            return inCache;
        }

    };

    this.init();
};

Jan Pöschko · Accepted Answer · 2012-01-04 16:09:33Z

1

You could consider making your cache a dictionary (JS object) instead of a list:

var cache = {};

this.addCache = function (word, style, value) {
    cache[word] = value;
};

this.checkCache = function (word, style) {
    var value = cache[word];
    if (typeof value != "undefined")
        return value;
    return false;
};

I didn't really get what your style variable is about — maybe you should add it to the cache key as well.

answered Jan 4, 2012 at 16:09

Jan Pöschko

5,6101 gold badge30 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sjaak Hijmering Over a year ago

Thx:) i will make it a dictionary!

Steven de Salas · Accepted Answer · 2012-01-04 16:11:07Z

1

Since you are basically using a dictionary the best format for your cache is a simple javascript object that behaves as a hashmap.

var cache = {};

You can then assign words to it as follows:

this.addCache = function (word, style, value) {
    cache[word] = {style: style, value: value};
};

And check them as follows:

this.checkCache = function (word) {
    return cache[word];
};

So then you can:

var cachedItem = this.checkCache(word);
if (cachedItem ) {
    alert(cachedItem.value);
}

This should speed up your cache searches considerably as you dont have to loop through an array that keeps getting larger and larger.

answered Jan 4, 2012 at 16:11

Steven de Salas

21.6k9 gold badges78 silver badges85 bronze badges

3 Comments

Sjaak Hijmering Over a year ago

ok thx! that wil help! but another question. is there no faster way of checking the text size a way without appending it to the DOM.

Steven de Salas Over a year ago

DOM is what creates the greatest performance hit in javascript. Even greater than looping through an array unecessarily. If what you want is to check the size of text in a hidden tag I dont think there is a reliable way without using DOM, but I recommend that you create as little DOM as possible, either by reusing it or deleting it straight after you create it. Note that appending values to a cache variable is not adding anything to DOM, only adding new tags using document.createElement(), node.innerText = blah and node.appendChild();

Sjaak Hijmering Over a year ago

thats a pitty! i will make the cache as a object! i will continue searching for a sulution that can calculate the text size without appending it to the DOM i think that makes it mutch faster! how to they do it on google docs. because that stays fast when you copy a huge text in it.

Jan Pöschko · Accepted Answer · 2012-01-04 21:41:33Z

0

You could try to approximate the text width using the widths of individual characters. This will introduce problems when there's special kerning for combinations like "ff", of course. I wrote a function that caches the widths of pairs of characters to accommodate for that. Thus, only a constant number of DOM manipulations is needed. It's on http://jsfiddle.net/wbL9Q/6/ and https://gist.github.com/1562233 (too much code for here).

However, while this worked for me in Safari (Mac), it did not give the correct results in Firefox. Apparently, some even more complex kerning is applied there. Maybe extending the algorithm to triples of characters (or even more) could help.

(Sorry for posting my 2nd answer, but I thought it makes sense because it's a completely different aspect.)

answered Jan 4, 2012 at 21:41

Jan Pöschko

5,6101 gold badge30 silver badges28 bronze badges

1 Comment

Sjaak Hijmering Over a year ago

Thx for making this peace of code but its verry important that it works on the following browsers!: IE7 of higher, FireFox, Chrome, Safari. but I will try to fix that!:) Thank you verry mutch!:)

Collectives™ on Stack Overflow

Size of a string with a css class

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related