{"id":599,"date":"2011-08-26T18:20:48","date_gmt":"2011-08-26T18:20:48","guid":{"rendered":"http:\/\/www.mockuptiger.com\/which-font-works-best-with-our-wireframes"},"modified":"2011-08-26T18:20:48","modified_gmt":"2011-08-26T18:20:48","slug":"which-font-works-best-with-our-wireframes","status":"publish","type":"post","link":"https:\/\/www.mockuptiger.com\/which-font-works-best-with-our-wireframes","title":{"rendered":"Which font works best with our wireframes?"},"content":{"rendered":"

The font rendering is not uniform for HTML5 Canvas string display.<\/p>\n

What does it mean?<\/p>\n

Chrome and Firefox have inconsistent behaviors when it comes to display text.<\/p>\n

For e.g when you display a rectangle at position 10,10 and width=50 and height=50 then both the browsers does it exactly you tell them.<\/p>\n

But when you tell them draw the text “Hello” at 10,10 and the font-size is 14 then the results are so different.<\/p>\n

Chrome might show at 10,7 and Firefox might show at 10,12.<\/p>\n

There is always a difference of few pixels up or down and this varied a lot if the font size changed and worse, when you choose a different Font-family.<\/p>\n

This problem became more apparent when MockupTiger allowed multiple Font faces and particularly for showing the underlines and the strikethrough styling.<\/p>\n

How to Change Fonts<\/strong><\/p>\n

Click on your User name at the top, Select “Personal Settings”.<\/p>\n

\"Image\"<\/p>\n

How did we fix the issue of inconsistency accross browsers?<\/strong><\/p>\n

We had the choice to limit to just one font face, i.e Arial in our case but that seemed too restricted. So we applied a brute force method.<\/p>\n

Now, technically this is what happens.<\/p>\n

When you change the font or font size, the UI actually writes a dummy text somewhere hidden from the user to a hidden canvas. Does some “Black Majick Imagery” brute force calculations, calculate the top pixel location, actual height of the font in pixels etc. It builds a custom font metrics that is then used for rendering the text.<\/p>\n

We have not tested with any other fonts other than the ones listed here.<\/p>\n

But if you want to test it with other fonts here is what you can do.<\/p>\n

How to add new Fonts<\/strong><\/p>\n

1. In your downloaded version, go to the “system” directory<\/p>\n

(e.g mockuptiger\/tiger\/base\/system)<\/p>\n

2. create a copy of the file property_definition.php<\/p>\n

3.Edit the property_definition.php file and find the line that says<\/p>\n

$property[‘personal’][‘font_name’]<\/strong><\/p>\n

4. \"Image\"<\/p>\n

5. In the array, add a new entry at the bottom<\/p>\n

Helvetica:Helvetica<\/p>\n

NOTE: There needs to be “:” in between, one is the display name and the other is actual font name.<\/p>\n

\"Image\"<\/p>\n

6. Save the file and then refresh your MockupTiger URL. The new font will be available in your menu.<\/p>\n

The font you add should be part of your installed fonts.<\/p>\n","protected":false},"excerpt":{"rendered":"

The font rendering is not uniform for HTML5 Canvas string display. What does it mean? Chrome and Firefox have inconsistent behaviors when it comes to display text. For e.g when you display a rectangle at position 10,10 and width=50 and height=50 then both the browsers does it exactly you tell them. But when you tell … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/posts\/599"}],"collection":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/comments?post=599"}],"version-history":[{"count":0,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/posts\/599\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/media?parent=599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/categories?post=599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mockuptiger.com\/wp-json\/wp\/v2\/tags?post=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}