textareas slow in Chrome

So there’s a page on my site, https://www.doogal.co.uk/BatchGeocoding.php, that someone complained about. Specifically, they complained that if they tried to geocode 3,000 postcodes, it was terribly slow. I tried it myself and experienced the same problem. When geocoding postcodes, the page uses my own internal database, so it should suffer none of the throttling issues of Google Maps. No worries I thought, I can reproduce the problem, which is generally the biggest hurdle, fixing it should be straightforward.

So I fired up Chrome’s profiler and found… absolutely nothing… None of the delays were in my code. So I tried Microsoft Edge and it was super quick. I pretty much gave up at that point and suggested the user tried MS Edge.

Three weeks later I had a look with fresh eyes. And something popped up from the recesses of my mind, spellcheck=”false”. I vaguely remembered setting that attribute on a textarea in the past had improved performance and once again, this fixed the issue. A single geocode was previously taking a second, now all 3,000 took a couple of minutes. This may be a bug in Chrome or maybe spellchecking is a very CPU intensive process. Either way, turning it off makes everything better.

As always this is just a reminder for me and maybe it will be useful to someone passing through.

MooZoom with image maps

MooZoom is a nice piece of JavaScript that adds zoom and pan functionality to images, built on top of MooTools. It wasn’t exactly what I needed. I didn’t want the zoom/pan to be constrained to the original size, I wanted the ability to zoom out beyond the original size and I wanted image maps to be handled correctly. I’m quite pleased with the results and you can download the source here.

To use it, in your image simply set

class="moozoom"

Resizing an image map when zooming an image

There are some cool libraries out there for zooming images in a HTML document, but none that I’ve seen handle resizing an image map attached to the image. My research may be incomplete so I might be recreating the wheel here, but this simple solution seems to fix the problem. Now I need to integrate with one of those libraries.

First up my HTML looks like this

      <map id="map" name="map">
        <area coords="15,92,568,247" alt="Blah" href="javascript:alert('hello');" />
        <area coords="18,259,546,432" alt="Blah" href="javascript:alert('hello 2');" />
      </map>
      <input type="button" value="+" onclick="javascript:ZoomIn();"/>
      <input type="button" value="-" onclick="javascript:ZoomOut();"/><br />
      <img src="Highlight cells.png" usemap="#map" id="image" />

And then there is some JavaScript to do the resizing, that looks like this

  <script type="text/javascript">
    function ZoomIn() {
      Zoom(1.1);
    }

    function ZoomOut() {
      Zoom(0.9);
    }

    function Zoom(amount) {
      // resize image
      var image = document.getElementById('image');
      image.height = image.height * amount;

      // resize image map
      var map = document.getElementById('map');
      for (var i = 0; i < map.areas.length; i++) {
        var area = map.areas[i];
        var coords = area.coords.split(',');
        for (var j = 0; j < coords.length; j++) {
          coords[j] = coords[j] * amount;
        }
        area.coords = coords[0] + ',' + coords[1] + ',' + coords[2] + ',' + coords[3];
      }
    }
  </script>

writing-mode: tb-rl broken in IE8

Vertical text in a web page can be pretty damn handy. I’ve used it in our documenter for Metastorm BPM procedures where we have some grids with columns which would become too wide if the column headers used horizontal text. OK, it only ever worked in Internet Explorer, but given the add-on is for an application that only runs in IE on Windows, I wasn’t too concerned by that.

Now, along comes IE8 and vertical text no longer works properly. Grids are incorrectly sized when they contain vertical text. Try this in a HTML page.

  what the...
  <table border="2px">
    <tr>
      <td style="writing-mode:tb-rl">Some text</td>
      <td style="writing-mode:tb-rl">Some more text</td>
    </tr>
  </table>
  .. is going on in that grid?

And this is what that will look like (obviously view in IE8 to see the problem)

what the...

Some text

Some more text

.. is going on in that grid?

Which is disappointing… Ah but you’re not here to see the problem are you? You want to know how to solve it I guess. The only solution I’ve found is to add the following to your head element, which forces IE8 to render the page in IE7 emulation, which means you miss out on all the new rendering goodness in IE8.

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Update – You’ll probably need to manually force IE to switch to IE8 standards mode to see the problem, seems that MS has decided BlogSpot sites are not ready for IE8, so this is running in compatibility mode.

XSLT to generate an HTML listing of your iTunes library

The data for the music in an iTunes library is stored in an XML file which means that it should be simple to produce an XSLT file to generate an HTML document listing all the albums in your iTunes library. Well, it would be, but the XML format used by iTunes is, how can I put this, idiosyncratic. Other people may use more fragrant language to describe it…

Anyway I found this very useful article describing how to create an XSLT file to do almost what I wanted, but I wasn’t interested in grouping by genre, since the genre data is often not very accurate or helpful. I’m also a little anal about my music collection and wanted it sorted by artist name, rather than album name. This part was slightly tricky because the data may not be complete. The album artist field is often not entered and the artist field may not be the album artist, even when the album is not a compilation. And finally the compilation flag may be set when you don’t expect it to be or conversely not set when you expect it to be. e.g. a greatest hits album may be flagged as a compilation. This is arguably correct, but I wanted these kind of albums to be grouped with the artist. So quite a few changes were required which is why I’m posting this, it’s not just me trying to get some reflected glory (and hence me linking to the original article repeatedly)

Anyway, the basic idea is the same as the original article. First put an XML file in the same directory as your iTunes library, as follows

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="albumList.xsl" type="text/xsl"?>
<wrapper>
  <incl file="iTunes Music Library.xml"/>
</wrapper>

Next is the XSLT, in a file called albumList.xsl in the same directory, which looks like this.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:output method="html" encoding="UTF-8" indent="yes"/>

  <!-- match the wrapper and apply templates to the <incl> xml file -->
  <xsl:template match="/wrapper">
    <xsl:apply-templates select="document(incl/@file)/plist/dict/dict"/>
  </xsl:template>
  
  <xsl:key name="songsByAlbum" match="dict" use="string[preceding-sibling::key[1]='Album']"/>

  <xsl:template match="dict">
    <html>
      <head>
        <title>iTunes Album Listing</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style>
          body
          {
            font-family:Arial;
          }
        </style>
      </head>
      <body>
        <table>
          <thead>
            <tr>
              <td><b>Artist</b></td>
              <td><b>Album</b></td>
            </tr>
          </thead>
          <xsl:variable name="song" select="/plist/dict/dict/dict"/>

          <!-- output the albums that aren't compilations -->
          <xsl:for-each select="$song[generate-id(.)=
        generate-id(key('songsByAlbum',string[preceding-sibling::key[1]='Album'])[1])]">
            <xsl:sort select="concat(string[preceding-sibling::key[1]='Album Artist'], string[preceding-sibling::key[1]='Artist'])"/>

            <xsl:for-each select="key('songsByAlbum',string[preceding-sibling::key[1]='Album'])
          [not(true[preceding-sibling::key[1]='Disabled'])]
          [not(true[preceding-sibling::key[1]='Compilation'])]            
          [1]">
              <xsl:call-template name="outputAlbum" />
            </xsl:for-each>
          </xsl:for-each>

          <!-- output each compilation -->
          <xsl:for-each select="$song[generate-id(.)=
        generate-id(key('songsByAlbum',string[preceding-sibling::key[1]='Album'])[1])]">
            <xsl:sort select="string[preceding-sibling::key[1]='Album']"/>

            <xsl:for-each select="key('songsByAlbum',string[preceding-sibling::key[1]='Album'])
          [not(true[preceding-sibling::key[1]='Disabled'])]
          [true[preceding-sibling::key[1]='Compilation']]
          [not(string[preceding-sibling::key[1]='Album Artist'])]
          [1]">
              <xsl:call-template name="outputAlbum" />
            </xsl:for-each>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>

  <xsl:template name="outputAlbum">
    <tr valign='top'>
      <!-- the artist: -->
      <td>
        <xsl:choose>
          <xsl:when test="string[preceding-sibling::key[1]='Album Artist']">
            <xsl:value-of select="string[preceding-sibling::key[1]='Album Artist']"/>
          </xsl:when>
          <xsl:otherwise>
            <xsl:choose>
              <xsl:when test="true[preceding-sibling::key[1]='Compilation']">
                <i>Compilation</i>
              </xsl:when>
              <xsl:otherwise>
                <xsl:value-of select="string[preceding-sibling::key[1]='Artist']"/>
              </xsl:otherwise>
            </xsl:choose>
          </xsl:otherwise>
        </xsl:choose>
      </td>
      <!-- the album name: -->
      <td>
        <xsl:value-of select="string[preceding-sibling::key[1]='Album']"/>
      </td>
    </tr>
  </xsl:template>
  
</xsl:stylesheet>

Now open the XML file in your favoured browser (as long as your favoured browser is IE or FireFox) and the HTML should be generated. It can be slow, it might be the XSLT can be optimised somewhat but I’m not hugely experienced in optimising XSLT so haven’t investigated further. And of course the XSLT can’t cope with all rubbish data in your iTunes library, garbage in, garbage out.

One other improvement would be to improve the sorting so that artists such as The Fall came under F, rather than T, but I have no idea how to achieve that.

Yet more tick mark fun

I've written about this three times now. Read my previous posts here

• Displaying a tick mark in HTML
• More on tick marks in HTML
• Even more on tick marks in HTML

But it turns out it's not as simple as the browser somebody is using. The other day I noticed that my tick marks weren't displaying on a computer that had IE7 installed. After more fiddling around I realised the fonts installed on that particular PC must be different to the ones installed on other PCs I'd tested and IE7 was unable to find the tick mark. I'm not sure whether IE7 only uses the current font or if it tries other fonts in an attempt to find the correct symbol but in any case it just displayed a square block.

Because of this I'm thinking perhaps the only 100% reliable solution is to either use an image or to display a checkbox in all situations, not just for IE6. In a desperate attempt to avoid either of those solutions, I've started using the 'Arial Unicode MS' font for my document. I guess this is fairly unlikely to work on Macs and Linux boxes, but they aren't particularly high on my list of required supported environments and they will fall back to more conventional fonts anyway, which hopefully work for these computers.

Update: Even the ‘Arial Unicode MS’ font won’t always work, even on Windows. This font is not installed by default on Windows systems, but it does come with Office, which I guess most Windows users will have installed.

Even more on tick marks in HTML

It's always the seemingly simplest probems that have the most long-winded solutions. So my last post was wrong, although that solution worked in some HTML docs, as soon as I switched to HTML 4.01 FireFox started showing extra crud, as you'll notice if you're viewing this in FireFox. So here's a solution for tick marks in HTML 4.01, still using conditional comments, which works in IE6, IE7 and FireFox 2, probably...

<![if !IE]> &#10003;<![endif]>
<!--[if IE 7]> &#10003;<![endif]-->
<!--[if lt IE 7]> <input type="checkbox" disabled="disabled" checked="checked" /> <![endif]--> 

And to complete the whole thing, here's an XSLT template to put a tick mark in your HTML output.

  <xsl:template name="outputTickMark">
    <xsl:text disable-output-escaping="yes">
      &lt;![if !IE]&gt; &#10003; &lt;![endif]&gt;
      &lt;!--[if IE 7]&gt; &#10003; &lt;![endif]--&gt;
      &lt;!--[if lt IE 7]&gt; &lt;input type="checkbox" disabled="disabled" checked="checked" /&gt; &lt;![endif]--&gt;
    </xsl:text>
  </xsl:template>

and here's a tick mark that might work this time.

✓

By the way, I found this article on conditional comments particularly useful.

Update: The absolute final word on this subject is here

More on tick marks in HTML

My original post about displaying a tick mark in HTML is one of the more popular hits on this site. This fact and the increasing usage of IE7 and FireFox drove me to come up with a nicer solution than the one proposed there (using the lowest common denominator checkbox input field).

Internet Explorer supports something called conditional comments. Using these you can serve up different content to different browsers directly in your HTML, rather than doing funky server-side things. I have to use this approach since I'm generating a static HTML file. So here is the markup -

<!--[if IE 7]><!--> 
&#10003; 
<!--<![endif]-->
<!--[if lt IE 7]>
<input type="checkbox" disabled checked>
<!--<![endif]-->

The if IE 7 comment will be rendered by IE7 and any other browser. The if lt IE 7 comment should only be rendered by IE6 and below. I've tested it in IE6, IE7 and FireFox 2, which covers enough bases for my needs. And here is the output, which hopefully should show some kind of tick mark.

✓

Update - there's a more up to date and correct version of this available here

The CSS media attribute

I was going to write about this some time ago and never got round to it but Jeff Atwood covers it much better than I could ever hope to. Another reason I thought I'd highlight this is after a conversation with one of our clients who'd paid a company to write an ActiveX control to produce printer friendly versions of web pages. There really wasn't any need, it's trivially simple to produce a stylesheet for printer-friendly output, generally all you need to do is hide some of your headers and menus etc. Even with my pathetic CSS skills I managed to create one for the Random Pub Finder.

On the other hand I'm not so sure about the use of a handheld stylesheet though. I did one of these for the Random Pub Finder as well, but as far as I can see we never get any hits from handheld devices. Also, I may be wrong but I think quite a few handheld devices actually ignore the handheld stylesheet and just render websites using the standard stylesheet. This is probably due to the lack of websites that actually provide a handheld stylesheet, meaning any handheld device needs to be able to cope with full-size pages anyway. And finally, it's a right pain testing your site against the huge number of devices out there, particularly as the emulators always seem to be a pain to set up.

Displaying a tick mark in HTML

This afternoon's challenge was to get a tick mark to appear in a HTML file. Not too taxing I thought. I'd already done it, using the HTML entity ✓. But this didn't properly in all browsers. I initially thought the problem was some kind of encoding problem but it seems that unfortunately it's one of those HTML things that works in 'modern' browsers but doesn't seem to work in IE6 (this ✓ should be a tick mark, if you're one of the lucky ones). Given that most people are still using IE6, it's not really an ideal solution.

So what to do? I thought I'd search for a fairy common font that had a tick mark available. WingDings does and although it's a Windows font, I thought it would be available on enough computers to suit my needs. Unfortunately, as this page shows, FireFox doesn't display WingDings fonts at all, even when they are installed on the computer. Most odd, although it seems that this is how browsers should work...

You may be asking why I didn't plump for the simplest solution, displaying an image? Unfortunately I'm generating a web page on the fly on the user's PC and I don't want to be generating extra images if I can avoid it. Life could get very complicated if they already have a file with the same name on their PC. I guess they wouldn't appreciate me overwriting it.

So my not very neat solution was to use a standard checkbox, <input type="checkbox" disabled checked>, . This wouldn't be too bad if I could apply some styling to it to make it look less like a checkbox, but CSS for a checkbox is ignored so I'm not very happy with the resulting output. If anybody knows of a better solution, let me know.

Addendum - Since quite a few people are finding this page, you might be interested in the follow-up posts, which have a potentially better soluton to this problem

FireFox and IE differences

Often when I'm reading up on support for particular HTML or CSS features, I'll see something along the lines of "Most modern browsers support this feature, Internet Explorer doesn't". A loose translation of this could be "if you use this feature it won't work for 80% of your users".

I do most of my testing in IE then go over to FireFox to make sure it looks OK and probably because of this it always seems to be the other way round, FireFox doesn't support a lot of stuff that IE does.

FireFox doesn't have a way to render text vertically. OK, there's no official way to do this, so IE has come up with it's own CSS attribute, but I'm kind of surprised that FireFox hasn't come up with some way of doing it, it seems like quite a common thing to want to do.

Another problem is hiding and showing rows in a table. FireFox kind of supports using 'display:block' but the row gets taller and taller with each hide and show. So I have to use 'display:table-row', which doesn't work in IE. Not sure which is standards-compliant but 'display:block' seems like the more consistent approach.