Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
Anyone? Bueller? –  idz May 16 '11 at 8:05
add comment

2 Answers

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.

share|improve this answer
    
Hi Dave, thanks for taking the time to investigate this. Unfortunately for me this did not solve the issue. The line numbers and code are still misaligned (on both the iPad and iPhone). This lead me to investigate the theme a little more carefully (I mean if worked you and not for me something that was different in our setups must be to blame -- the theme seemed the logical place look) and I was able to find the root cause of the issue. I'll write it up as an answer for the next person that encounters this. I was surprised no-one else had. –  idz May 18 '11 at 5:34
    
Hmmm! My attempts only solved it on the iPad -- weird. So the bounty is still up for grabs. –  idz May 18 '11 at 5:52
    
Looks like if I use your iPhone fix in conjunction with the change I made -- it looks good on iPhone and iPad. I would still like to understand the root cause. –  idz May 18 '11 at 6:23
add comment
up vote 3 down vote accepted

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.

share|improve this answer
    
You can give him the bounty without choosing his answer as the correct one. Because if you choose your own answer, you won't get your bounty back anyway, and it will just be wasted. And since Bounty awards are no longer tied to accepted answer in any way you can accept your own answer, and use your bounty to thank him :-) (if you so wish) –  Lea Cohen May 22 '11 at 8:34
1  
@LeaCohen thanks for telling me this. Currently neither answer is ideal, but given how long its been open I am not holding out much hope. I like the idea of being able to give @DaveKonopka the bounty -- clearly he spent some time on it. –  idz May 22 '11 at 8:48
1  
I am having the same problem, but using a different theme (Foghorn, which is built off of the foundation of Twenty Eleven). This specific answer didn't work for me, but started me in the right direction. This post and related comments led me to come up with this, which I think should generalize well: .syntaxhighlighter { -webkit-text-size-adjust: none; } –  dpdearing Aug 11 '12 at 4:48
    
@dpdearing ++. Worked for me, and I suspect this is the correct solution for everyone having this issue. Thanks! :) –  Nate Apr 25 at 6:20
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.