Code Formatted with SyntaxHighlighter Evolved Appearing Incorrectly on iPad/iPhone

by

I have just started a programming blog and I am using the SyntaxHightlighter Evolved plugin to format my code. On most browsers this is working just fine. However if I attempt to view the site from either an iPhone or iPad the line numbers and code are no longer aligned. Basically the problem seems to be that the line numbers and code fonts are sized independently (see image below).

I assumed somebody else must have seen the problem so I consulted The Mightly Oracle Google, but could not seem to find anything relevant. I have also searched this site to no avail.

Being a programmer I looked at the source code, but realized that it would take me some time to understand how it works and fix the problem.

I am using WordPress version 3.1.2 with the Twenty Ten theme version 1.2

I have the following plugins active:

  • Google Analytics for WordPress version 4.1
  • SyntaxHighlighter version 3.1.1

Has anybody else seen (an hopefully fixed) this problem? Or could some kind soul point me in the right direction?

If you need to see the website there is a link in my profile to it. I don’t want to link-spam 😉

Thanks in advance!

UPDATE: 5/17/2011

I thought I had found a solution but, while it solved the problem on the iPad, it remained an issue on the iPhone. So the bounty is still up for grabs.

Syntax Highlighter Evolved

2 s
2

This appears to be an issue with SyntaxHighlighter the underlying js library that the plugin uses. I loaded up the js demo on its own and got the same offset results on my iPhone. I’m still unclear on the reason but the font size of the gutter number is not consistent with the code lines.

One potential fix is to adjust the font-size on the gutter numbers up by a small percentage to match the code. Media queries could be used to target and apply the fix only for iPhone and iPad devices.

I dropped the following code into the example that comes with the SyntaxHighlighter js package. It corrected the problem on my iPhone. You could probably put this CSS into your WordPress theme and get the same results.

<style type="text/css">

/* ios safari line number fix */

  /* ipad */
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    td.gutter div.line { font-size: 1.4em !important; }
  }

  /* iphone */
  @media only screen and (max-device-width: 480px) {
    td.gutter div.line { font-size: 1.4em !important; }
  }

</style>

It holds up well for me with lengthy code snippets (50+ lines). I don’t have an iPad to test on.

Leave a Comment