{Carrer web log}

CSS3 Chat Bubbles

Monday, December 20, 2010 { 13 Comments }

Few day ago I saw on Hacker News the link Creating Triangles in CSS from Jon Rohan(kudos to JON) and was specially interesting for the chat bubbles. Mainly because I was building one mini app for Twitter who should run on iPhone/iPad (webkit browser) so I needed simple solution for the chat bubbles.

Jon uses this HTML :
<div class="chat-bubble">
Buongiorno!
<div class="chat-bubble-arrow-border"></div>
<div class="chat-bubble-arrow"></div>
</div>

I wanted to use just one div to create the same effect and make CSS to do all the heavy lifting:

<div class="chat-bubble"></div>

After some CSS hacking here is the result:



Example
Example1
Example2
Example3
Example4

From the examples you can see that everything is done with CSS and no images are used for making Chat Bubbles and also the HTML is super simple just one div and one class (<div class="chat-bubble"></div>).

The trick is using :before and :after pseudo-elements with combination of content: " " and absolute, relative positioning. In this case both :after and :before work in the same way because there are absolute positioned. This technique work in all modern CSS3 supported browsers.

If you have any questions please let me know in the comments.

All the examples are also on github for download.

[Update] Today Nicolas Gallagher point to me that he came to this technique 8 months ago Pure CSS speech bubbles . Unfortunately I didn't know about his post and I was careless not to check about other CSS chat bubble solution. And the worst thing is I have no prove beside my gentleman's word that I didn't copy his technique. Sorry Nicolas!

Line length and Font Size relation in design

Thursday, December 09, 2010 { 5 Comments }

There are many studies that are claiming that 60 characters per line is optimal reading size.

Optimal is not necessarily fastest reading line length but is the size  preferred by the users.

In the past I used that information for building Better Web Readability Project - CSS Typography Framework.

I stumbled to Christian Holst article "Readability: the Optimal Line Length" realizing that we came to the same conclusion about the proportion of the font size and line length.

Christian is using 17px font size and 520px column size.

I’m using 16px font size and 480px column size(for better readability project)

If you divide 480/16 = 30 or 520/17 = about 30

So the formula is:

Main Font Size X 30 = Optimal Columns Reading  size

Font Size	x 30	Column Size
12	30	360
13	30	390
14	30	420
15	30	450
16	30	480
17	30	510
18	30	540
19	30	570
20	30	600
21	30	630

I stopped at 21 px for the main font size because at some point the text will become too big and not serve its purpose.

Naturally you can’t just take 12px text and put it in 360px column  and hope that everything will look great. The real design process is far more complex but is interesting  when patterns emerge like in this case.

Here is demo.

Any thoughts?

Safari - open links in new tabs

Thursday, December 02, 2010 { 2 Comments }

I bought MacBook Pro couple weeks ago and the one thing that bother me over and over again was that Safari is opening the links(by default) in new window. I felt like working with IE6 that didn't had tabs support. So I wanted to force Safari to open links in new tabs. The solution for that is little tricky. That is why I'm writing this short post.


If you have older version of Safari you need to use Terminal. Open the Terminal.app and write : defaults write com.apple.Safari TargetedClicksCreateTabs -boolean

But that didn't worked for me because in the newer version of safari this solution is hidden in: Safari > Preferences > Tabs > Open pages in tabs instead of windows : Always



Enjoy!