IE10 also validates special character escape sequences

Most of the pages have been rendering pretty consistently in Internet Explorer 10. I was perturbed that one particular page was giving a problem on IE10, but, not on Chrome and Firefox. When I opened the developer tools, I saw the following two error reports:

HTML1402: Character reference is missing an ending semi-colon “;”.

and

HTML1403: Numeric character reference does not resolve to a valid character.

On going to the relevant line of HTML code, I found that there was a comment section which contained data curtailed beyond 30 characters.

What the developer had done in fact was to encode the single quote in the comment before inserting it into the database and then extract the first 30 characters via code before rendering it. As a result the single quote ( ‘ ) translated into its escape sequence [& # 3 9 ;] and got cut off to some text ending in &#3.

Chrome did not even report a warning about this malformed escape character. Neither did Firefox.

To set matters straight, firstly, we need to encode after curtailing and not before.

We could also try the following css which actually curtails on the basis of width. The good thing about it is that it considers the rendered text and not the html text. Therefore, you will never have a situation where a portion of your escape sequence is curtailed.

<style>
.curtail {width: 329px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>
try it on the following html in your page
<p class=”curtail”>
This is some text interspersed with single quotes’ to ensure that it is going to be a lot more longer than hundred pixels.
</p>

–Updated on December 5, 2012

Thanks to my colleagues who were trying the above class on a span and found that it was ineffective. All we had to do was a little tweak. Basically span is an inline element and as such does not take widths. We updated the class to make it behave like an inline-block element and it worked!

<style>
.curtail {width: 329px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}
</style>
try it on the following html in your page
<span>
This is some text interspersed with single quotes’ to ensure that it is going to be a lot more longer than hundred pixels.
</span>

Personally, HTML conformance is a good thing. However, most programmers, who treat HTML with disdain may be in for trouble if they continue to ignore malformed HTML when handling it in their code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s