nkapliev/getCharsWidth.html

## getCharsWidth.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script>
    var getTextWidthDOM = function(text, fontStyle) {
        var node = getTextWidthDOM.node,
            width;

        if ( ! node) {
            node = getTextWidthDOM.node = document.createElement('span');

            node.style.whiteSpace = 'nowrap';
            node.style.visibility = 'hidden';
            node.style.position = 'absolute';
            node.style.height = 'auto';
            node.style.width = 'auto';
        }

        document.body.appendChild(node);

        node.style.font = fontStyle;
        node.innerHTML = text;
        width = node.offsetWidth;

        document.body.removeChild(node);

        return width;
    };

    var getTextWidthCanvas = function(text, fontStyle) {
        getTextWidthCanvas.canvas || (getTextWidthCanvas.canvas = document.createElement("canvas"));

        var context = getTextWidthCanvas.canvas.getContext("2d");

        context.font = fontStyle;

        return context.measureText(text).width;
    };


    var CHARS_RANGES = [
            [ 0x0400, 0x04FF ], // Cyrillic
            [ 0x001F, 0x007F ] // Latin
        ],
        FONT_STYLE = '13px arial',
        charsWidth = {};

    CHARS_RANGES.forEach(function(range) {
        for (var charCode = range[0], char; charCode <= range[1]; charCode++) {
            char = String.fromCharCode(charCode);

            charsWidth[char] = [
                getTextWidthCanvas(char, FONT_STYLE),
                getTextWidthDOM(char, FONT_STYLE)
            ];
        }
    });

    console.log(charsWidth);

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<script>
	var getTextWidthDOM = function(text, fontStyle) {
	var node = getTextWidthDOM.node,
	width;

	if ( ! node) {
	node = getTextWidthDOM.node = document.createElement('span');

	node.style.whiteSpace = 'nowrap';
	node.style.visibility = 'hidden';
	node.style.position = 'absolute';
	node.style.height = 'auto';
	node.style.width = 'auto';
	}

	document.body.appendChild(node);

	node.style.font = fontStyle;
	node.innerHTML = text;
	width = node.offsetWidth;

	document.body.removeChild(node);

	return width;
	};

	var getTextWidthCanvas = function(text, fontStyle) {
	getTextWidthCanvas.canvas \|\| (getTextWidthCanvas.canvas = document.createElement("canvas"));

	var context = getTextWidthCanvas.canvas.getContext("2d");

	context.font = fontStyle;

	return context.measureText(text).width;
	};


	var CHARS_RANGES = [
	[ 0x0400, 0x04FF ], // Cyrillic
	[ 0x001F, 0x007F ] // Latin
	],
	FONT_STYLE = '13px arial',
	charsWidth = {};

	CHARS_RANGES.forEach(function(range) {
	for (var charCode = range[0], char; charCode <= range[1]; charCode++) {
	char = String.fromCharCode(charCode);

	charsWidth[char] = [
	getTextWidthCanvas(char, FONT_STYLE),
	getTextWidthDOM(char, FONT_STYLE)
	];
	}
	});

	console.log(charsWidth);

	</script>
	</body>
	</html>