bureau

It means “desk” or “work table” in french : how metaphoric for a blog discussing what my work's about. Get the RSS feed.

i

I'm Thibaut Sailly, an independant interface designer based in Paris. Say hello on twitter or by email at bonjour ✉ tsailly ◦ net.

Topics

Archives

© 2010-2014 Thibaut Sailly · Powered by Movable Type · RSS

February 2012

EMDb

Here is a document I've been building over the past year while working on CSS files based on ems for dimensions.
Let's say you want the text in <div id="foo"> to have a font size of 14px, while its parent div has a font size of 16px. In ems, this translates as (target size)/(context size) = 14 / 16 = 0.875em. What I used to do was reach to the calculator app each time, and copy paste the result in my css.
At some point I realized I was often calculating the same sizes over and over again; storing these recurring sizes in a document allowed me to refer to it for a quicker copy&paste, resulting in a less tedious workflow. Project after project, little by little these tables completed themselves, and here we are today.

a screenshot of the emdb text file

Formating decisions

The value is followed by a semicolon: placing the caret after the colon of the css rule, a simple paste will finish the line, no need to type the semicolon at the end. In the case of replacing an existing value, placing the caret after the colon and hitting command+shift+right arrow followed by command+V proved to be a smooth keyboard ride.

The target and context in pixel sizes in the comments are here for two reasons: it made finding the right value in this reference document quicker(1) and it's easier to get back in the logic of the file when you haven't worked on it for a while — it lowers the em abstraction bar.

The 16px column is the first one, as it is the one I have been refering to the most, given it's the default font size in html documents. The following columns respect the logical order, but only even numbers. Odd font size contexts are not referenced here because I haven't been using them in my designs.

The file is available here on GitHub, so feel free to fill the remaining voids, and improve it whatever way you may find.

Happy em sizing everyone.

(1) the eyes don't have to grab the correct line from the target values in the left column and then follow this line to the adequate context column.

Posted in

A solution to xScope and PS CS5

If you're using xScope and Photoshop CS5, there's a good chance you've come across this annoying disappearing behavior "bug" detailed here by the Iconfactory team.

Good fortune got me into an apps and windows configuration where I could magically get the xScope tools to work as intended : a Safari window opened with "Top Sites" selected sitting under the PS doc you want to inspect. Somehow, Top Sites bugs the Photoshop call to OSX sending the PS doc behind all apps. It can either be a new Safari window or a new tab; but it can't be a blank window, it has to display Top Sites. You're then free to grab, move and adjust rulers, loupe and frames as it should be.

It's not ideal, as you have to get your apps in the proper order with repeated alt+tabs judo moves, but at least it's a solution we can work with until this odd behavior gets fixed. Hope this helps and restores sanity in your workflow.