Wrapping Code Samples on Mobile Devices
One part of being a technical blogger that I've had to come to grips with is code samples and small mobile device screens. I was amazed when I saw a double-digit percentage of visits to this blog were from mobile phones -- mental! I started paying more attention to detail on said devices and I realized that code samples required loads of horizontal scrolling: yuck. By utilizing CSS white-space, we can make code wrap and avoid arm-numbing scrolling on small screens:
pre {
white-space: pre-line;
}
I like using PrismJS so that requires a different selector:
pre[class*='language-'], code[class*='language-'] {
white-space: pre-line;
}
Thankfully white-space lets me help you all avoid horizontal scrolling on mobiles. Of course you'll need to choose which media query you want to apply that to, but I'll let you do that. In some cases it may be difficult to read the line-broken code, but that's surely better than all that crazy scrolling.
![Responsive Images: The Ultimate Guide]()
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...
![5 Awesome New Mozilla Technologies You’ve Never Heard Of]()
My trip to Mozilla Summit 2013 was incredible. I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out. MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...
![MooTools ASCII Art]()
I didn't realize that I truly was a nerd until I could admit to myself that ASCII art was better than the pieces Picasso, Monet, or Van Gogh could create. ASCII art is unmatched in its beauty, simplicity, and ... OK, well, I'm being ridiculous; ASCII...
![Introducing MooTools HeatMap]()
It's often interesting to think about where on a given element, whether it be the page, an image, or a static DIV, your users are clicking. With that curiosity in mind, I've created HeatMap: a MooTools class that allows you to detect, load, save, and...
I’m also using PrismJS. Any tips to get the line-numbers to adjust?
Also, by default tab size is about 4 i believe, this snippet brings it back a little…
// @media query here for small screens... pre{ webkit-tab-size: 2; -moz-tab-size: 2; -ms-tab-size: 2; -o-tab-size: 2; tab-size: 2; }That is, assuming you’ve got tabs over spaces (which you should of course).
Interesting post. I have thought about this for quite some time. The thing is that code is much more readable, in my opinion, when not wrapping it like this.
Since we are used to large screens, reading wrapped code like this is hard and unfamiliar. We do not code on small screens and therefor it makes more sense to scroll horizontally when viewing code then to force line breaking/wrapping.
No offense, but I would rather go with all the crazy scrolling. I honestly think it looks nicer than the broken up code, and it is easier to read and understand code samples.