Steve'sSightings

Twitter’s Mozilla Problem

marco:

Firefox 3 still has this annoying text-rendering bug for me.

[Bug relating to the awesome conversion of o/ to ø]

This might be related to the Twitter random-spaces-in-words bug: does this say “for th e Underworld” in Firefox 3 for you? (Note that the offending space in “th e” isn’t in the HTML source.)

Update (Soon after this was posted): Twitter fixed the page template and removed the offending Javascript.

I know nothing about the text rendering engine of FF3 on Mac, but I can look into why Twitter causes us all grief. As a few people have already mentioned, Twitter has a Javascript function that is called for Mozilla based browsers: isWrapped(). This function takes a number as it’s only parameter: isWrapped(490). The following pseudocode tries to explain what this method is doing:

 



function isWrapped(int iWantedLength){



     string sHTML = htmlControl.html();



     int iHtmlLength = sHtml.length;



     string sNewHtml = "";



     int iHtmlContainerWidth = htmlControl.width();



     int iWantedStringLength = iHtmlContainerWidth/iWantedLength;



     int iCount = iHtmlLength/iWantedStringLength;



      // Loop through the content of the twitter post and add a newline character



     for(int i=0; i <= iCount; i++){



       sNewHtml+=(sHTML.substr(iCount*i,iCount) + "\n")



     }



     htmlControl.html(sNewHtml);



};

So they are trying to break the lines in the Twitter post by comparing the number of characters to the the width of the container (where the html resides.) They are comparing characters, which are going to be various widths, to a fixed measure – the width of the container in pixels. This is a fundamental fail that is now forgotten in the recesses of the Twitter .js file. Why even bother wrapping the text at all….