Asian Horizontal Scroll Website

I’ve seen quite a few horizontal scrolling tumblr themes and, honestly, thought they were kinda… bad. They sure were cute and quirky, but not very useful for the visitor. You couldn’t even scroll with the mouse wheel; only the scrollbar at the bottom of the page. Talk about annoying.

I like gimmicks as much as the next person, but a website needs to be usable.

But then I began to wonder if there were any good uses for horizontal scrolling websites. We have vertical scrolling websites because that’s how we read. Line-by-line, slowly downwards. And then I thought about East Asian languages, like Korean, Chinese, and Japanese. They’re adapted to the Western-style, left-to-right, horizontal conventions now, but they were still designed for vertical reading. Manga is still vertical.

So I quickly put together a horizontal scroll, right-to-left, vertical static site, which can be viewed here. It starts on the right side and you can use the mouse wheel to scroll (down for left, up for right). I don’t know what you could do with it, but I’m sure there’s something. Here’s a quick guide for the basics of a site like this (you should have some understanding of HTML, CSS, and jQuery):

Making the text display properly (CSS):

writing-mode: vertical-rl;
text-orientation: upright;

“vertical-rl” makes the text display vertically and from right-to-left, and “upright” makes sure the letters are not rotated. You might need to float your content to the right as well. Remember your prefixes!

To change your mouse scrolling actions, here is a link to a fantastic horizontal scrolling jQuery plugin, though I’m sure it’s not too hard to make your own. If want to use that plugin, though, simply link to it in your code and also include the following:

$(function(){

	$("body").mousewheel(function(event, delta) {
		this.scrollLeft += (delta * 30);
		event.preventDefault();
	});
});

Of course, the above code is for scrolling from right to left. If you want to scroll from left to right, change the plus sign to a minus. Lastly, to make sure the page starts on the very right side, have this jQuery script:

$(function(){
	var left = $(document).outerWidth() - $(window).width();
	$('body, html').scrollLeft(left);
});	

I’m out of ideas, but I hope someone else can use this and build something new and interesting. Since the site I put together was just basic text, there are probably some nuances I haven’t smoothed out yet. If you’ve got questions or an idea, feel free to send them my way.