Code Formatted with SyntaxHighlighter Evolved Appearing Incorrectly on iPad/iPhone

Question

Code Formatted with SyntaxHighlighter Evolved Appearing Incorrectly on iPad/iPhone

idz

2011年5月18日 05:52

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.

Topic plugin-syntaxhighlighter iphone Wordpress

Category Web

idz · Accepted Answer · 2011年5月18日 05:43

It turns out that the style sheet (style.css) for the Twenty Ten theme modifies the size of pre and code independently. This appears to be what is causing the problem. Moreover it increases the size of the fonts which causes them to be too big when compared to the rest of the text.

These are the lines that cause the issue:

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */

pre {
    -webkit-text-size-adjust: 140%;
}
code {
    -webkit-text-size-adjust: 160%;
}

I commented out these two sections:

/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */


/*
pre {
    -webkit-text-size-adjust: 140%;
}
code {
    -webkit-text-size-adjust: 160%;
}
*/

So I guess I am in the strange position of answering my own question. Thanks to all who took time to look at this. Especially @DaveKonopka who at the time of writing was the only one to come up with a possible solution.

Dave Konopka · Accepted Answer · 2011年5月18日 03:58

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.

Code Formatted with SyntaxHighlighter Evolved Appearing Incorrectly on iPad/iPhone

About