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.
Max Hallinan7,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?
Nick PettitTreehouse 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 Hallinan7,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.