Best Way to render Web Page at 1px Width

Question

A client has asked for a responsive web design down to 1px width (they originally asked for 0px, but I was able to convince them that that could not actually exist).

Obviously, I am unable to render characters or images so my idea is to encode everything in Morse or binary code using pixels down the height of the page. Can this be done using just CSS?

Answer 1

This is the stupidest question I've ever seen!

I'm going to save my insults for you and your client, purely because this is interesting. It's not useful or usable for a human, but it is possible to make a webpage 1px wide.

... except for images, obviously you aren't going to see images well at 1px so you could either scale them to a single pixel or hide them altogether. I'll let you decide.

... also no desktop browser can have a viewport that small. But it is possible to have a 1px wide iframe.

... also you and your client won't be able to read this, it will be in Morse or binary (or something else). Totally not human readable.

---

Use media queries to only show binary at 1px

Using CCS media queries, which most responsive developers are using today, add something like this:

@media screen and (max-width: 1px) { }

You'll want to add your CSS in those curlies.

Then rotate and position

I've made an example of what you want to do, which is rotate and position the text so it's half off the left side of the screen.

Check the JSfiddle (I've put it in a div with the overflow hidden to simulate a 1px wide widow). You'll probably need to use javascript if the text content is dynamic.

Use a barcode-esque font

If you looked at the JSfiddle above it's probably not obvious that even a well trained machine couldn't read that. The characters are different widths and some characters will look the same, eg l,i and t have the same width and center pixel line.

So you'll probably want to use a barcode font like this.

The final result will come out looking like this: