Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Max Hallinan
Max Hallinan
7,614 Points

Calculating position values

I recently coded a switch from a Dribbble shot. I used Photoshop to make all the measurements. The design included two icons. I used Font Awesome as an imperfect but close match for these icons. I am having trouble finding a way to accurately calculate the positioning values for the icons. I started by using guides and the rectangular marquee tool to get the size of the icons and the distance of the icons from the top and left edges of the switch. Then I used Illustrator to set the corresponding Font Awesome icons to the same pixel size and measure the distance between the edge of the characters and their bounding boxes. For each Font Awesome character, there is a few pixels of empty space between the edge of the character itself and the character's bounding box. My assumption was that this empty space would influence the top and left positioning of the icon, offsetting the icon by the amount of pixels between the character and the character's bounding box. So I accounted for this by subtracting those pixels from the top and left positioning values. But when I checked this in the browser, the icon was too low. It's fairly easy to vertically and horizontally center an icon using line-height and text-align but in the design the icon is not vertically or horizontally centered so I needed to specify the positioning properties. In the end, I positioned the icon by eye through trial and error. That method felt imprecise and unreliable. Does anyone know a better way of calculating the positioning values of a single icon or type character? Something equivalent to the box model?

2 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher

Positioning depends greatly on the context. Can you post a code example or maybe post your code onto CodePen? That would make it much easier to see exactly what you're talking about and a fix should be pretty quick. :)

Max Hallinan
Max Hallinan
7,614 Points

Hi Nick, thanks for your response. Here is the CodePen and here is the Dribbble shot. After posting this question, I took a screenshot of the CodePen, opened the screenshot in Photoshop, and laid the screenshot on top of the Dribbble shot with the opacity set to 25%. This enabled me to do a more precise comparison of the icon positioning but also revealed another confusing discrepancy. The green and red switch containers are one or two pixels larger than those in the Dribbble shot, even though my height and width values are derived from that shot. That may have something to do with my initial problem. Again, the icons used on my CodePen are not the same as those in the Dribbble shot. Because I intended to post this on CodePen, I had to use an icon font available on a free hosting service and Font Awesome was the closest match I found. Thanks for your help.

Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Nosh Brinken,

I'm sure if I overlaid your creation and the Dribbble shot in Photoshop I might see some differences, but at a glance, I honestly can't tell what's different. I think you should take a step back from this and stop trying to chase pixel perfection. A website will never look the same in every browser. :)

Max Hallinan
Max Hallinan
7,614 Points

Hi Nick,

Thanks for taking a look. The question I have isn't about the CodePen itself which is why I didn't initially post the link. My question is about the method I used to arrive at that CodePen's finished state. My method was entering different positioning values repeatedly until I got something that 'looked' right through trial and error. Then I compared that result to the design using a screenshot and Photoshop. This method feels amateurish to me. I was hoping someone had a more elegant/efficient method for positioning a type or icon font character when the position is irregular (i.e. not centered or left or right aligned). I think the problem I was having is that fonts are programmed to add empty space around each character so positioning type isn't as straightforward as measuring the distance between the edge of the character and the edge of the element. My question, more for the future than for that CodePen, is whether there's a better way to cope with that trickiness.

You are a busy guy and I don't mean to take up more of your time. As you said, the project itself is good enough and I'm not presently stuck. I posted this question more because I'm continually fascinated by the clever workarounds generated by seasoned front enders and thought there might be something of the sort floating around for this issue. Thanks again for your help!

Nick Pettit
Nick Pettit
Treehouse Teacher

Hi Nosh Brinken,

You could just measure the pixels in Photoshop and then use absolute positioning, remove margin/padding/border, etc.