typography

Font size in pixels

旧街凉风 提交于 2019-11-27 02:43:26
On an iPhone how do I calculate the size of a character in pixels for a given point size? Point sizes are defined as 1/72 of an inch . That is, a 72-point font is approximately 1 inch from the lowest descent to the highest ascent. So the maximum height of a glyph in a 72pt font is about 1 inch. Apple's iphone tech specs page claims that the iPhone currently has a resolution of 163 pixels per inch. So 72 points is 163 pixels, or about 2.2639 pixels per point. Just remember that every glyph varies in height and width, so this is a very rough estimate of size. Generally, the distance between

Force Non-Monospace Font into Fixed Width Using CSS

旧街凉风 提交于 2019-11-27 01:17:06
Is there any way to force a font to be monospaced using CSS? By this I mean, using a non-monospace font, can you force the browser to render each character at a fixed width? If this is for aligning digits in tables where some fonts (with traditional typography) render them by default with variable width (e.g. Segoe UI on Windows), you should look into CSS properties for: font-variant-numeric: tabular-nums; (this disables the proportional-nums default value for the numeric-spacing variant supported at least by OpenType fonts, and possibly by other font formats supported by the text renderer of

Poor anti-aliasing of text drawn on Canvas

落爺英雄遲暮 提交于 2019-11-26 23:16:48
问题 I'm drawing text on Canvas, and am disappointed with the quality of antialiasing. As far as I've been able to determine, browsers don't do subpixel antialising of text on Canvas. Is this accurate? This is particularly noticeable on iPhone and Android, where the resulting text isn't as crisp as text rendered by other DOM elements. Any suggestions for high quality text out put on Canvas? Joubert 回答1: My answer came from this link, maybe it will help someone else. http://www.html5rocks.com/en

Algorithm to implement a word cloud like Wordle

ε祈祈猫儿з 提交于 2019-11-26 18:02:39
Context Take a look at Wordle: http://www.wordle.net/ It's much better looking than any other word cloud generators I've seen Note: the source is not available - read the FAQ: http://www.wordle.net/faq#code My Questions Is there an algorithm available that does what Wordle does? If no, what are some alternatives that produces similar kinds of output? Why I'm asking just curious want to learn I'm the creator of Wordle. Here's how Wordle actually works: Count the words, throw away boring words, and sort by the count, descending. Keep the top N words for some N. Assign each word a font size

Widow/Orphan Control with JavaScript?

心不动则不痛 提交于 2019-11-26 17:08:29
问题 It can be library-dependent or -agnostic. I just want to know if a script exists that will analyze the page (or maybe certain nodes that it has been given) and... "protect" against widows and orphans in the text. What does "protect" mean? I don't know. I considered seeing if I could come up with one myself, but part of the problem is I'm not even sure how I would go about doing it. Clarification : This would be for the screen version of the site, not print. 回答1: I believe you're describing

Font size in pixels

≡放荡痞女 提交于 2019-11-26 12:35:29
问题 On an iPhone how do I calculate the size of a character in pixels for a given point size? 回答1: Point sizes are defined as 1/72 of an inch. That is, a 72-point font is approximately 1 inch from the lowest descent to the highest ascent. So the maximum height of a glyph in a 72pt font is about 1 inch. Apple's iphone tech specs page claims that the iPhone currently has a resolution of 163 pixels per inch. So 72 points is 163 pixels, or about 2.2639 pixels per point. Just remember that every glyph

Force Non-Monospace Font into Fixed Width Using CSS

别来无恙 提交于 2019-11-26 09:39:02
问题 Is there any way to force a font to be monospaced using CSS? By this I mean, using a non-monospace font, can you force the browser to render each character at a fixed width? 回答1: If this is for aligning digits in tables where some fonts (with traditional typography) render them by default with variable width (e.g. Segoe UI on Windows), you should look into CSS properties for: font-variant-numeric: tabular-nums; (this disables the proportional-nums default value for the numeric-spacing variant