ACE Text Editor displays text characters in place of spaces

Question

I've written the following Javascript:

(function () {
    var computationModule = (function foo1(stdlib, foreign, heap) {
        "use asm";
        var sqrt = stdlib.Math.sqrt,
            heapArray = new stdlib.Int32Array(heap),
            outR = 0.0,
            outI = 0.0;

        function computeRow(canvasWidth, canvasHeight, limit, max, rowNumber, minR, maxR, minI, maxI) {
            canvasWidth = +canvasWidth;
            canvasHeight = +canvasHeight;
            limit = +limit;
            max = max | 0;
            rowNumber = +rowNumber;
            minR = +minR;
            maxR = +maxR;
            minI = +minI;
            maxI = +maxI;

            var columnNumber = 0.0,
                zReal = 0.0,
                zImaginary = 0.0,
                numberToEscape = 0;
            var columnNumberInt = 0;

            // Compute the imaginary part of the numbers that correspond to pixels in this row.
            zImaginary = +(((maxI - minI) * +rowNumber) / +canvasHeight + minI);
            // Iterate over the pixels in this row.
            // Compute the number of iterations to escape for each pixel that will determine its color.
            for (columnNumber = +0; + columnNumber < +canvasWidth; columnNumber = +(+columnNumber + 1.0)) {
                // Compute the real part of the number for this pixel.
                zReal = +(((maxR - minR) * +columnNumber) / +canvasWidth + minR);
                numberToEscape = howManyToEscape(zReal, zImaginary, max, limit) | 0;
                columnNumberInt = columnNumberInt + 1 | 0;
                heapArray[(columnNumberInt * 4) >> 2] = numberToEscape | 0;
            }
        }

        // Function to determine how many iterations for a point to escape.
        function howManyToEscape(r, i, max, limit) {
            r = +r;
            i = +i;
            max = max | 0;
            limit = +limit;

            var j = 0,
                ar = 0.0,
                ai = 0.0;
            ar = +r;
            ai = +i;
            for (j = 0;
                (j | 0) < (max | 0); j = (j + 1) | 0) {
                iteratingFunction(ar, ai, r, i)
                ar = outR;
                ai = outI;
                if (+(ar * ar + ai * ai) >= +(limit * limit))
                    return j | 0;
            }
            return j | 0;
        }

        // The iterating function defining the fractal to draw
        // r and i are the real and imaginary parts of the value from the previous iteration
        // r0 and i0 are the starting points
        function iteratingFunction(r, i, r0, i0) {
            r = +r;
            i = +i;
            r0 = +r0;
            i0 = +i0;
            computePower(r, i, 2);
            // Set the output from this function to t
            outR = +(r0 + outR);
            outI = +(i0 + outI);
        }

        // Compute the result of [r,i] raised to the power n.
        // Place the resulting real part in outR and the imaginary part in outI.
        function computePower(r, i, n) {
            // Tell asm.js that r, i are floating point and n is an integer.
            r = +r;
            i = +i;
            n = n | 0;

            // Declare and initialize variables to be numbers.
            var rResult = 0.0;
            var iResult = 0.0;
            var j = 0;
            var tr = 0.0;
            var ti = 0.0;

            // Declare and initialize variables that will be used only in the
            // event we need to compute the reciprocal.
            var abs = 0.0;
            var recr = 0.0;
            var reci = 0.0;

            if ((n | 0) < (0 | 0)) {
                // For n less than 0, compute the reciprocal and then raise it to the opposite power.
                abs = +sqrt(r * r + i * i);
                recr = r / abs;
                reci = -i / abs;
                r = recr;
                i = reci;
                n = -n | 0;
            }

            rResult = r;
            iResult = i;

            for (j = 1;
                (j | 0) < (n | 0); j = (j + 1) | 0) {
                tr = rResult * r - iResult * i;
                ti = rResult * i + iResult * r;
                rResult = tr;
                iResult = ti;
            }

            outR = rResult;
            outI = iResult;
        } // end computePower

        return {
            computeRow: computeRow
        };
    })(self, foreign, heap);

    // Return computationModule that we just defined.
    return computationModule;
})();

There's nothing particularly unusual about this Javascript, except that I want to make my web application display the Javascript in an ACE text editor (http://ace.c9.io/) so that the user can modify the code at runtime.

I load the Javascript using jQuery AJAX and then set the contents of the ACE Editor to the Javascript code. After the user modifies the code, he can click a button to run the code. (This uses eval)

The problem I'm having is that ACE is displaying strange characters instead of spaces.

Oddly enough, if I try to copy text from the ACE editor, the strange characters disappear and the spaces are normal. Furthermore, the code runs fine even with these strange characters being displayed.

I also noticed that the problem does not appear when using Firefox, but it appears for Chrome and IE 11.

Finally, the problem only occurs when I put the code on a real web server. It doesn't reproduce in my development environment.

Looking at this some more, I can see that it's not just the text I'm loading via AJAX. Even when I type new spaces, more text characters appear!

What could be going wrong so that the text doesn't display properly?

Here's a link to the application: http://danielsadventure.info/html5fractal/

Answer 1

Use charset="utf-8" in the script tag where you include ace.

<script src="path/to/ace.js" charset="utf-8">

This may have something to do with this:

When no explicit charset parameter is provided by the sender, media subtypes of the "text" type are defined to have a default charset value of "ISO-8859-1" when received via HTTP. Data in character sets other than "ISO-8859-1" or its subsets MUST be labeled with an appropriate charset value. See section 3.4.1 for compatibility problems.

http://www.w3.org/Protocols/rfc2616/rfc2616-sec3.html#sec3.7.1

So the string passed to the script are in an encoding different than what ACE (or JS in general) expects, which is UTF-8.