For those of you who haven't entirely abandoned Facebook for the uprising Google+, you'll likely have noticed that Facebook has once again made a significant change to the Profile page. The Facebook Timeline is the product of Facebook's new focus on UI design. Love it or hate it, it's here to stay.
One of the most beloved changes has been the addition of a large "cover" photo to the profile page. Facebook tells us to: "Fill this wide, open space with a unique image that represents you best. It's the first thing people see when they visit your timeline." Indeed, the cover photo and the profile picture provide a great opportunity for one to show off their creativity. See "Facebook Timeline Cover: 40 creative examples" for some interesting cover hacks.
A simple Facebook cover photo hack is to use the profile picture as a transparent window into the cover photo. LifeHacker recently posted an article describing how to do exactly this with Photoshop or Gimp. Inspired by this post, I decided to make a simple HTML page to preview this kind of cover photo. Below you will find the source code to this test page:
To test out your cover photo, you would modify the img tag (.background img) to point to your large cover photo. The cover photo is 850x315px, but you'll need a larger image than that to show through to the profile picture. Using the Chrome Dev Tools, Firebug, or a similar CSS/DOM debugger you can adjust the dimensions and position of the cover image to your desired position.
Now you still would need to fire up your image editor to crop out your profile picture, which needs to be 180x180, and your cover photo which should be 850x315px. This will require keeping track of the offsets and the dimensions you've been testing with. It makes for a simple tool for seeing what kind of cool cover/profile combinations you can come up with. You can test out your profile picture by enabling the commented out profile img tag and seeing if it worked out the way you desired.
You could now, in theory, do some simple crops with your default system image editor and avoid using the heavyweight Gimp or Photoshop. However, I've found it to be tricky to get Facebook to do exactly what you'd expect with your uploaded photos. I had to do a few uploads of profile pictures before I got the satisfactory alignment which completed my Facebook cover photo hack.
"From all these experiences the most important thing I have learned is that legibility and beauty stand close together and that type design, in its restraint, should be only felt but not perceived by the reader." —Adrian Frutiger
When speaking of typography, one must consider a multitude of variables that go into the art of arranging type to display language. There is the selection of the typeface, the point size, the line length, the line spacing, the spacing between groups of letters and the space between pairs of letters. The end goal is of course legibility, however a good designer will seek a visually aesthetic expression of the language through typography. There is an emotive response that follows the sight of visually pleasing typography, it encourages the consumption of the content. Magazines, newspapers and books all have a rich history in beautiful typography.
Figure 1: Bembo text
The Web, being the new canvas for textual content, has been slowly following the lead of its dead tree predecessors. The implementation of the W3C's Web Open Font Format (WOFF) among all modern desktop browsers gives designers limitless possibility for beautiful text design on the web. Where the Web trails behind is in text justification. Full text justification on the Web is known to be flawed (See Batchelder: Bad Web Typography). Text that is fully justified on the Web may lead to terribly inconsistent word spacing that is very noticeable to the reader.
I stand here today humbled by the task before us, grateful for the trust you have bestowed, mindful of the sacrifices borne by our ancestors. I thank President Bush for his service to our nation, as well as the generosity and cooperation he has shown throughout this transition. Forty-four Americans have now taken the presidential oath. The words have been spoken during rising tides of prosperity and the still waters of peace. Yet, every so often the oath is taken amidst gathering clouds and raging storms. At these moments, America has carried on not simply because of the skill or vision of those in high office, but because We the People have remained faithful to the ideals of our forbearers, and true to our founding documents.
The text above is fully justified with a left and right margin of 200px. Observe the spacing of words on each line and notice the inconsistency. Text justification involves aligning to the left and the right, stretching word spaces to obtain the most uniform amount of per word spacing. When the words are too "loose" it makes for a visually displeasing effect. Hyphenation is used in typography to reduce the looseness of lines. However, browsers don't hyphenate fully justified text. There have been efforts to hyphenate text using Javascript. A script called Hyphenator.js was developed to automatically hyphenate text and is available on Google Code. On Android, using the standard TextView widget, the problem is worse. The TextView, which is a View used to display text, does not support full justification at all. This means if you wanted to make a reader application similar to the Amazon Kindle app using a TextView, you'd get text that looked like this:
Figure 2: Android TextView left aligned text
The jagged right side of the text is quite unpleasant and there is much wasted space where more text could fit in the viewport. There is a fairly simple way to get full text justification on Android; it requires using a WebView. A WebView essentially is like embedding a chrome-less browser into your Android application. This means you get all the benefits of laying out text on the Web, as well as the aforementioned deficiency.
Figure 3: WebView with fully justified text Figure 4: WebView with fully justified text and hyphenation The image on the left shows how mobile WebKit (the rendering engine which powers the WebView) lays out the fully justified text. The second image shows the layout hyphenated by the Hyphenator.js script. The use of two hyphens greatly improved the spacing for lines like "seen grasshoppers and" and "ladybugs. My uncle Bob". The hyphenated WebView text, while superior to the default TextView and the standard fully justified Web text, still has its flaws. The Amazon Kindle Android app does a better job of laying out the excerpt of Roger Ebert's "Life Itself: A Memoir".
Figure 5: Amazon Kindle Android Application
The Kindle app does use hyphenation although it is not shown above. It clearly has a much more uniform spacing of the words though some lines are still suspect. For example: "me. Hal Holmes has a red" stands out. The difference in the WebView layout and the Kindle layout may be attributed to the difference in font type and size, margin size, line spacing etc. The WebView examples use Helvetica and I am not sure which font is being used by the Kindle app. It is also unclear whether or not the Amazon Android app is using its own layout algorithm or is using a WebView with a hyphenation JavaScript. So it seems that the problem with full justification on the Web plagues Android because developers must use a WebView to achieve it unless they are brave enough to roll their own text justification algorithm. In case you are interested, try solving this problem from Kleinberg's Algorithm Design concerning "pretty printing" of text:
But unless you are passioned by Markov Chains or Dynamic Programming, you'll probably stick to a WebView with text-align: justify. [Update] I've just discovered that the new CSS3 Text W3C working draft describes support for hyphenation within the browser: http://www.w3.org/TR/css3-text/#hyphenation. In fact, it's been rolled out in the latest WebKit browsers and in Firefox. I haven't tested it out yet but the usage is fairly standard:
p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
It's great to see typography on the Web moving forward.
Hello world. I imagine you've all forgotten about me in my absence. No, I was not away nor ill, rather I've simply been busy with life, the universe and everything. I have written a blog post that was published on CodeAurora Forum* entitled "Measuring FPS On The Web". This post was made as a Qualcomm Innovation Center employee rather than as a rogue technologist. For those of you whom have not visited my Linked In profile, I've been working at Qualcomm for a couple years as a Graphics Engineer focusing on the Android Browser. In this post, I speak of the inherent problem with measuring frame rates in JavaScript and why today's web benchmarks for the HTML5 canvas are flawed.
*The Code Aurora Forum is a mutually beneficial non-profit corporation promoting open source software that enables mobile and wireless ecosystems that rely on wireless internet and cellular technology.
