Wrapping Code Samples on Mobile Devices

By  on  

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.

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...

  • By
    Element Position Swapping Using MooTools 1.2

    We all know that MooTools 1.2 can do some pretty awesome animations. What if we want to quickly make two element swap positions without a lot of fuss? Now you can by implementing a MooTools swap() method. MooTools 1.2 Implementation MooTools 1.2 Usage To call the swap...

Discussion

  1. I’m also using PrismJS. Any tips to get the line-numbers to adjust?

  2. 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).

  3. 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.

  4. 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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!