Add italic correction
Summary: Add margin to the right of characters that have italic correction. Test Plan: Look at `f'` and `C'` before and after. Note that they both now look good at small font sizes (like 17pt). Reviewers: alpert Reviewed By: alpert Differential Revision: http://phabricator.khanacademy.org/D3534
This commit is contained in:
parent
ab1b2d6fdc
commit
9fc357b8a1
12
buildTree.js
12
buildTree.js
|
@ -442,7 +442,17 @@ var makeText = function(value, style) {
|
|||
var metrics = fontMetrics.getCharacterMetrics(value, style);
|
||||
|
||||
if (metrics) {
|
||||
return new domTree.textNode(value, metrics.height, metrics.depth);
|
||||
var textNode = new domTree.textNode(value, metrics.height,
|
||||
metrics.depth);
|
||||
if (metrics.italicCorrection > 0) {
|
||||
var span = makeSpan([], [textNode]);
|
||||
|
||||
span.style["margin-right"] = metrics.italicCorrection + "em";
|
||||
|
||||
return span;
|
||||
} else {
|
||||
return textNode;
|
||||
}
|
||||
} else {
|
||||
console && console.warn("No character metrics for '" + value +
|
||||
"' in style '" + style + "'");
|
||||
|
|
197
fontMetrics.js
197
fontMetrics.js
|
@ -66,6 +66,115 @@ var metrics = {
|
|||
// This map is generated by metrics/metric_parse.py
|
||||
var metricMap = {
|
||||
"roman": {
|
||||
"italicCorrection": {
|
||||
"\u2218": 0.0,
|
||||
"\u03a5": 0.0,
|
||||
"$": 0.0,
|
||||
"\u03a9": 0.0,
|
||||
"(": 0.0,
|
||||
",": 0.0,
|
||||
"0": 0.0,
|
||||
"4": 0.0,
|
||||
"8": 0.0,
|
||||
"<": 0.0,
|
||||
"@": 0.0,
|
||||
"D": 0.0,
|
||||
"H": 0.0,
|
||||
"L": 0.0,
|
||||
"P": 0.0,
|
||||
"T": 0.0,
|
||||
"\u00d7": 0.0,
|
||||
"X": 0.0,
|
||||
"\u2264": 0.0,
|
||||
"`": 0.0,
|
||||
"d": 0.0,
|
||||
"h": 0.0,
|
||||
"l": 0.0,
|
||||
"p": 0.0,
|
||||
"t": 0.0,
|
||||
"\u00f7": 0.0,
|
||||
"x": 0.0,
|
||||
"|": 0.0,
|
||||
"\u2192": 0.0,
|
||||
"\u2217": 0.0,
|
||||
"\u039e": 0.0,
|
||||
"\u00a0": 0.0,
|
||||
"\u03a6": 0.0,
|
||||
"+": 0.0,
|
||||
"/": 0.0,
|
||||
"3": 0.0,
|
||||
"7": 0.0,
|
||||
";": 0.0,
|
||||
"?": 0.0,
|
||||
"C": 0.0,
|
||||
"G": 0.0,
|
||||
"K": 0.0,
|
||||
"O": 0.0,
|
||||
"S": 0.0,
|
||||
"W": 0.0,
|
||||
"[": 0.0,
|
||||
"c": 0.0,
|
||||
"g": 0.0,
|
||||
"\u2032": 0.0,
|
||||
"k": 0.0,
|
||||
"o": 0.0,
|
||||
"s": 0.0,
|
||||
"w": 0.0,
|
||||
"\u0393": 0.0,
|
||||
"\u2212": 0.0,
|
||||
"\u039b": 0.0,
|
||||
"\u221e": 0.0,
|
||||
"\u03a3": 0.0,
|
||||
"\"": 0.0,
|
||||
".": 0.0,
|
||||
"\u00b1": 0.0,
|
||||
"2": 0.0,
|
||||
"6": 0.0,
|
||||
":": 0.0,
|
||||
">": 0.0,
|
||||
"B": 0.0,
|
||||
"\u22c5": 0.0,
|
||||
"F": 0.0,
|
||||
"J": 0.0,
|
||||
"N": 0.0,
|
||||
"R": 0.0,
|
||||
"V": 0.0,
|
||||
"\u2265": 0.0,
|
||||
"Z": 0.0,
|
||||
"b": 0.0,
|
||||
"f": 0.052,
|
||||
"j": 0.0,
|
||||
"n": 0.0,
|
||||
"r": 0.0,
|
||||
"v": 0.0,
|
||||
"z": 0.0,
|
||||
"\u2190": 0.0,
|
||||
"\u0394": 0.0,
|
||||
"\u0398": 0.0,
|
||||
"!": 0.0,
|
||||
"\u03a0": 0.0,
|
||||
")": 0.0,
|
||||
"\u03a8": 0.0,
|
||||
"1": 0.0,
|
||||
"5": 0.0,
|
||||
"9": 0.0,
|
||||
"=": 0.0,
|
||||
"A": 0.0,
|
||||
"E": 0.0,
|
||||
"I": 0.0,
|
||||
"M": 0.0,
|
||||
"Q": 0.0,
|
||||
"U": 0.0,
|
||||
"Y": 0.0,
|
||||
"]": 0.0,
|
||||
"a": 0.0,
|
||||
"e": 0.0,
|
||||
"i": 0.0,
|
||||
"m": 0.0,
|
||||
"q": 0.0,
|
||||
"u": 0.0,
|
||||
"y": 0.0
|
||||
},
|
||||
"depth": {
|
||||
"\u2218": 0.0,
|
||||
"\u03a5": 0.0,
|
||||
|
@ -286,14 +395,98 @@ var metricMap = {
|
|||
}
|
||||
},
|
||||
"slanted": {
|
||||
"italicCorrection": {},
|
||||
"depth": {},
|
||||
"height": {}
|
||||
},
|
||||
"bold": {
|
||||
"italicCorrection": {},
|
||||
"depth": {},
|
||||
"height": {}
|
||||
},
|
||||
"italic": {
|
||||
"italicCorrection": {
|
||||
"A": 0.0,
|
||||
"V": 0.186,
|
||||
"C": 0.046,
|
||||
"B": 0.0,
|
||||
"x": 0.0,
|
||||
"E": 0.026,
|
||||
"D": 0.0,
|
||||
"q": 0.006,
|
||||
"G": 0.0,
|
||||
"F": 0.106,
|
||||
"\u03b1": 0.0,
|
||||
"I": 0.058,
|
||||
"\u03b3": 0.026,
|
||||
"\u03b2": 0.01,
|
||||
"\u03b5": 0.0,
|
||||
"\u03b4": 0.008,
|
||||
"\u03b7": 0.0,
|
||||
"\u03b6": 0.037,
|
||||
"\u03b9": 0.0,
|
||||
"\u03b8": 0.0,
|
||||
"\u03bb": 0.0,
|
||||
"\u03ba": 0.0,
|
||||
"\u03bd": 0.031,
|
||||
"\u03bc": 0.0,
|
||||
"\u03be": 0.009,
|
||||
"\u03c1": 0.0,
|
||||
"\u03c0": 0.0,
|
||||
"\u03c3": 0.0,
|
||||
"\u03c2": 0.047,
|
||||
"\u03c5": 0.0,
|
||||
"\u03c4": 0.074,
|
||||
"\u03c7": 0.0,
|
||||
"\u03c6": 0.0,
|
||||
"\u03c9": 0.0,
|
||||
"\u03c8": 0.0,
|
||||
"K": 0.04,
|
||||
"J": 0.079,
|
||||
"M": 0.074,
|
||||
"L": 0.0,
|
||||
"O": 0.0,
|
||||
"N": 0.078,
|
||||
"\u03d1": 0.0,
|
||||
"P": 0.112,
|
||||
"S": 0.032,
|
||||
"R": 0.0,
|
||||
"\u03d5": 0.0,
|
||||
"T": 0.12,
|
||||
"W": 0.104,
|
||||
"\u03d6": 0.0,
|
||||
"Y": 0.182,
|
||||
"X": 0.023,
|
||||
"w": 0.0,
|
||||
"Z": 0.041,
|
||||
"a": 0.0,
|
||||
"Q": 0.0,
|
||||
"c": 0.0,
|
||||
"b": 0.0,
|
||||
"e": 0.0,
|
||||
"d": 0.0,
|
||||
"g": 0.0,
|
||||
"f": 0.063,
|
||||
"i": 0.0,
|
||||
"h": 0.0,
|
||||
"k": 0.0,
|
||||
"j": 0.0,
|
||||
"m": 0.0,
|
||||
"l": 0.0,
|
||||
"o": 0.0,
|
||||
"n": 0.0,
|
||||
"\u03f1": 0.0,
|
||||
"p": 0.0,
|
||||
"s": 0.0,
|
||||
"r": 0.0,
|
||||
"u": 0.0,
|
||||
"t": 0.0,
|
||||
"H": 0.05,
|
||||
"v": 0.0,
|
||||
"y": 0.0,
|
||||
"U": 0.078,
|
||||
"z": 0.002
|
||||
},
|
||||
"depth": {
|
||||
"A": 0.0,
|
||||
"V": 0.022,
|
||||
|
@ -460,6 +653,7 @@ var metricMap = {
|
|||
}
|
||||
},
|
||||
"typewriter": {
|
||||
"italicCorrection": {},
|
||||
"depth": {},
|
||||
"height": {}
|
||||
}
|
||||
|
@ -469,7 +663,8 @@ var getCharacterMetrics = function(character, style) {
|
|||
if (character in metricMap[style].height) {
|
||||
return {
|
||||
height: metricMap[style].height[character],
|
||||
depth: metricMap[style].depth[character]
|
||||
depth: metricMap[style].depth[character],
|
||||
italicCorrection: metricMap[style].italicCorrection[character]
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
|
|
|
@ -43,10 +43,11 @@ def read_pl(pl_file):
|
|||
|
||||
|
||||
class Metric:
|
||||
def __init__(self, char, height, depth):
|
||||
def __init__(self, char, height, depth, italic_correction):
|
||||
self.char = char
|
||||
self.height = float(height) / 1000
|
||||
self.depth = float(depth) / 1000
|
||||
self.italic_correction = float(italic_correction) / 1000
|
||||
|
||||
def __repr__(self):
|
||||
return "Char {0} ({1:.3f}+{2:.3f})".format(
|
||||
|
@ -281,6 +282,7 @@ def read_metrics(pl_file, metrics):
|
|||
|
||||
char_height = 0
|
||||
char_depth = 0
|
||||
italic_correction = 0
|
||||
|
||||
for metric in elem[3:]:
|
||||
if metric[0] == "comment":
|
||||
|
@ -289,9 +291,12 @@ def read_metrics(pl_file, metrics):
|
|||
char_height = int(metric[2])
|
||||
elif metric[0] == "CHARDP":
|
||||
char_depth = int(metric[2])
|
||||
elif metric[0] == "CHARIC":
|
||||
italic_correction = int(metric[2])
|
||||
|
||||
metrics[map_style].append(
|
||||
Metric(map_char, char_height, char_depth))
|
||||
Metric(map_char, char_height, char_depth,
|
||||
italic_correction))
|
||||
|
||||
|
||||
def print_metrics(metrics):
|
||||
|
@ -303,6 +308,9 @@ def print_metrics(metrics):
|
|||
"depth": {
|
||||
metric.char: metric.depth for metric in metric_list
|
||||
},
|
||||
"italicCorrection": {
|
||||
metric.char: metric.italic_correction for metric in metric_list
|
||||
},
|
||||
} for style, metric_list in metrics.iteritems()
|
||||
}
|
||||
|
||||
|
@ -323,6 +331,6 @@ if __name__ == "__main__":
|
|||
for metric_file in file_map:
|
||||
read_metrics(metric_file, metrics)
|
||||
|
||||
metrics["roman"].append(Metric(u'\u00a0', 0, 0))
|
||||
metrics["roman"].append(Metric(u'\u00a0', 0, 0, 0))
|
||||
|
||||
print_metrics(metrics)
|
||||
|
|
Loading…
Reference in New Issue
Block a user