Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Max Hallinan
7,614 PointsCalculating 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
Treehouse TeacherPositioning 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
7,614 PointsHi 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
Treehouse TeacherHi 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
7,614 PointsHi 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
Treehouse TeacherHi Nosh Brinken,
You could just measure the pixels in Photoshop and then use absolute positioning, remove margin/padding/border, etc.