Amazon’s Pure CSS Solution to Avoid Cutting Off Text

Amazon is using a nice CSS trick to truncate a text block without showing half-lines (like someone cut the document horizontally). The problem is that CSS “overflow: hidden;” is a crude creature that will brutally cut lines off halfway through like a 1970s dot-matrix printer. There’s no “overflow hidden, but jeez be gentle about it okay” property. So this is a workaround, but it does impose a change on the UI…the fading text on the bottom.

Using Devtools for the image below, I’ve enhanced the mask with outline and gradient colour, and also filled the block with text to build a continuous paragraph on the bottom.

There’s a semi-transparent gradient mask in front of the content. The mask is mostly clear, but has a white band on the bottom 15%. This band is turquoise for illustration purposes here. So this bottom band covers up text on the next line without occupying too much whitespace. You’ll notice the band starts where the bottom line ends. So the bottom line is already fading, and then BOOM! It’s all white below that.

The mask is 50 pixels, so there will be about 45 pixels (85% of 50px) transition from full text to fully-transparent text, followed by about 5 pixels of white.

A side note is the layout technique for the mask. Probably basic for most CSS designers, but not how I would have done it. It’s simply using standard flow, but with position: relative to shift the mask up 50px, and a 50px negative margin to ensure the mask doesn’t actually affect the flow. (I would have done it by making the whole thing position relative, and absolute elements inside it. This technique is much simpler.)

I found this technique via StackOverflow a little while ago, as mentioned here earlier, so I was chuffed to spot it in the wild, and on Amazon no less.

Update: Syd Lawrence points out that it’s worth using pointer-events: none on the mask. This is the CSS property that makes the front layer porous, allowing mouse clicks to cheekily slip through to the element behind it.

will_paginate for mobiles

I’ve been using ElasticSearch + Tire to (finally!) build Player FM search and they’ve worked well.

One little trick I used just now is a responsive pagination. I’m using will_paginate and bootstrap_will_paginate gems for this.

Normally, you get this clutter on mobile:

messed up!

Fortunately, will_paginate marks classes semantically, so you can do this instead:

responsive joy

using a SASS media query:

  1. .pagination
  2.   @media (max-width: 480px)
  3.     li  
  4.       display: none
  5.       &.active,&.prev,&.next
  6.         display: inline

I think there are some other ways to do it via server-side mobile detection, but this was a simple and reliable trick.

A Fine Coffee Bug (Random Coding Note). And jsConsole.

This is a bug that took so long to track down, I had to write it somewhere.

The wrong code was:

radio('new-page').subscribe = -> # handle new pages

It should have been

radio('new-page').subscribe -> # handle new pages

The first call was actually over-writing the radio subscribe() function, so no further handlers were actually getting registered.

This does happen quite a bit with CoffeeScript. By wiping out all the parentheses and other junk, it leaves just a few symbols which sometimes are necessary and sometimes not. e.g. with jQuery onclick registration ($('button').on 'click', -> ....), one has to stop and think if there’s a comma or not. Everything else is natural it flows staight from the lizard brain and onto the screen, but not the damn comma. Hopefully there will be some nicer syntax highlighters and run-time diagnostics to catch this kind of thing in the future.

What phased me about this was it was working on desktop, but not Android. Thought it might be some Android quirk. But it’s because I’ve customised the basic player for android, so this code was only actually executed for Android.

Anyway, if there’s one useful thing I can say about this: Remy’s jsConsole tool rocks! Seriously. It helped me get Player FM working on Windows Phone IE the other day and it got me out of this fine Android pickle today. With Android Browser, you can get a basic console with about:debug, but it’s rubbish. Silently fails a lot of the time, only shows the first console log argument, no command-line history or completion so you’re typing like it’s a 2003 SMS. jsConsole makes it real easy. Just put something like this in your HTML layout (for Rails/Haml):

 -if Rails.env.development?
<script src="http://jsconsole.com/remote.js?myawesomeapp"></script>

Then visit jsConsole and type :listen myawesomeapp. Now you have a grown-up’s console.