Mhurd has uploaded a new change for review. https://gerrit.wikimedia.org/r/190647
Change subject: Fix for layout regressions from glyph font consolidation. ...................................................................... Fix for layout regressions from glyph font consolidation. Made all glyphs in the font rest on the baseline and be properly horizonally centered. Previously, there were baseline offsets in the font *and* in the app code. Now offsets are controlled by the app code only. Removed the font/svg scripts as they were out of date and are maintained at: https://github.com/montehurd/FontToSvgsToFont Change-Id: Ibd8f78f6b30858889483958d6ed0cf859a1746e4 --- M wikipedia/Fonts/WikiFont-Glyphs.ttf D wikipedia/Fonts/makeFontFromSvgs.py D wikipedia/Fonts/makeSvgsFromFont.py M wikipedia/View Controllers/Navigation/Bottom/BottomMenuViewController.m M wikipedia/View Controllers/Navigation/Top/TopMenuViewController.m M wikipedia/View Controllers/RecentSearches/RecentSearchCell.m M wikipedia/View Controllers/RecentSearches/RecentSearchesViewController.m 7 files changed, 19 insertions(+), 328 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/apps/ios/wikipedia refs/changes/47/190647/1 diff --git a/wikipedia/Fonts/WikiFont-Glyphs.ttf b/wikipedia/Fonts/WikiFont-Glyphs.ttf old mode 100644 new mode 100755 index 1671ec2..ae58277 --- a/wikipedia/Fonts/WikiFont-Glyphs.ttf +++ b/wikipedia/Fonts/WikiFont-Glyphs.ttf Binary files differ diff --git a/wikipedia/Fonts/makeFontFromSvgs.py b/wikipedia/Fonts/makeFontFromSvgs.py deleted file mode 100755 index 7dca50a..0000000 --- a/wikipedia/Fonts/makeFontFromSvgs.py +++ /dev/null @@ -1,246 +0,0 @@ -#!/usr/local/bin/fontforge - -# Created by Monte Hurd on 9/1/14. -# Copyright (c) 2014 Wikimedia Foundation. Provided under MIT-style license; please copy and modify! -# -# Makes "./font.ttf" from svg files found in "./svgs/". -# Svg's must be named according to following convention: -# "UNICODE_CHAR GLYPH_NAME LEFT_BEARING RIGHT_BEARING BASELINE_OFFSET.svg" -# -# Example: "e950 MY_GLYPH 80 100 150.svg" -# This will be mapped to the font character e950 with glyph -# name "MyGlyph" and left bearing (padding) of 80, right -# bearing of 100 and will sit 150 above the baseline. -# -# Note: running the "makeSvgsFromFont.py" script will generate -# such an svg (named according to the convention) for each -# glyph found in font.ttf. It will also generate a font.json file. -# -# Run this script with command: -# fontforge -script makeFontFromSvgs.py -# -# References: -# http://fontforge.org/python.html -# http://tex.stackexchange.com/questions/22487/create-a-symbol-font-from-svg-symbols -# http://fontforge.org/scripting.html -# http://stderr.org/doc/fontforge/html/scripting-alpha.html#GlyphInfo - -import fontforge -import glob -import json - -# Create font object. -font = fontforge.font() - -# Apply font settings from font.json -config = json.loads(open('./font.json').read()) -font.fontname = config["fontname"] -font.fullname = config["fullname"] -font.familyname = config["familyname"] -font.weight = config["weight"] -font.version = config["version"] -font.encoding = config["encoding"] -font.copyright = config["copyright"] - -# This is the name used when generating the font file. -fileName = "font" - -# Folders! -svgFolder = "./svgs/" -outputFolder = "./" - -# Build array of glyph info dictionaries. -print "\nStarted importing glyphs into " + fileName -glyphDictionaries = [] -for fullName in glob.glob(svgFolder + '*.svg'): - fullName = fullName[len(svgFolder):] - words = fullName.split() - if (len(words) == 5): - glyphDictionary = {} - glyphDictionary["fullName"] = fullName - glyphDictionary["unicodeChar"] = words[0] - glyphDictionary["name"] = words[1] - glyphDictionary["bearingLeft"] = words[2] - glyphDictionary["bearingRight"] = words[3] - glyphDictionary["baselineOffset"] = words[4][:-4] - glyphDictionaries.append(glyphDictionary) - -# Sort it! -glyphDictionaries.sort(key=lambda x: x['name']) - -# Add glyph for each dictionary entry to font object. -for glyphDictionary in glyphDictionaries: - # Put new glyphs in the Private Use Area. - glyph = font.createChar(int("0x{}".format(glyphDictionary["unicodeChar"]),0), glyphDictionary["name"]) - - print "\tImporting \"" + glyphDictionary["fullName"] + "\"" - # Import svg data into the glyph. - glyph.importOutlines(svgFolder + glyphDictionary["fullName"]) - - # Make the glyph rest on the baseline + offset from file name. - ymin = glyph.boundingBox()[1] - glyph.transform([1, 0, 0, 1, 0, -ymin + int(glyphDictionary["baselineOffset"])]) - - # Set glyph side bearings with values from file name. - glyph.left_side_bearing = int(glyphDictionary["bearingLeft"]) - glyph.right_side_bearing = int(glyphDictionary["bearingRight"]) - -# Run various fontforge methods. -#font.canonicalContours() -font.round() # Needed to make simplify more reliable. -font.simplify() -font.removeOverlap() -font.round() -font.autoHint() - -# Generate actual font files. -#font.generate(outputFolder + fileName + ".pfb", flags=["tfm", "afm"]) # type1 with tfm/afm -#font.generate(outputFolder + fileName + ".otf") # opentype -font.generate(outputFolder + fileName + ".ttf") # truetype -print "Finished generating " + outputFolder + fileName + ".ttf" - -# Build css file. -cssFileContentsHeader = """ -@font-face { - font-family: '%s'; - /* src: url('%s.eot'); */ /* IE9 Compat Modes */ - src: url('%s.ttf') format('truetype'); /* Safari, Android, iOS */ - - /* url('%s.eot?#iefix') format('embedded-opentype'), */ /* IE6-IE8 */ - /* url('%s.woff') format('woff'), */ /* Modern Browsers */ - /* url('%s.svg#8088f7bbbdba5c9832b27edb3dfcdf09') format('svg'); */ /* Legacy iOS */ -} -.glyph { - display: inline-block; - height: 2.0em; - width: 2.0em; - text-align:center; - font-family: '%s'; - -webkit-font-smoothing: antialiased; - font-size: inherit; - font-style: normal; - font-weight: normal; - line-height: 2.0em; - overflow: visible; -} -.glyph[dir='rtl'] { - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); - -webkit-transform: scale(-1, 1); - -moz-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - -o-transform: scale(-1, 1); - transform: scale(-1, 1); -} -""" - -cssFileContentsHeader = cssFileContentsHeader % (font.familyname, fileName, fileName, fileName, fileName, fileName, font.familyname) - -file = open(outputFolder + "font.css", "w") -file.write(cssFileContentsHeader) -for glyphDictionary in glyphDictionaries: - cssClassForGlyph = """ - .%s:before { - content:"\%s"; - } - """ - cssClassForGlyph = cssClassForGlyph % (glyphDictionary["name"], glyphDictionary["unicodeChar"]) - file.write(cssClassForGlyph) - -file.close() - -# Build html file. -htmlFileContentsHeader = """ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>%s minimal code</title> - <link rel="stylesheet" href="font.css"> - <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> - <meta http-equiv="Pragma" content="no-cache" /> - <meta http-equiv="Expires" content="0" /> -</head> -<style> - body { - margin: 2%% 15%% 2%% 15%%; - color: #555; - font-family: sans-serif; - font-size: 2.0em; - } - - hr { color: grey; } - - div { - display: block; - color: #777; - border-bottom: 1px solid #eee; - margin: 0.5em 0 0.5em 0; - } - div:hover { - border-bottom-color: #cef; - } - span { - color: #111; - } -</style> -<body> -""" - -htmlFileContentsHeader = htmlFileContentsHeader % (fileName) - -file = open(outputFolder + "font.html", "w") -file.write(htmlFileContentsHeader) - -file.write("<h1>Glyphs</h1>") - -# Grid of glyphs for top of html file. -counter = 0 -for glyphDictionary in glyphDictionaries: - divForGlyph = """ - <span class="glyph %s"></span> - """ - divForGlyph = divForGlyph % (glyphDictionary["name"]) - file.write(divForGlyph) - counter += 1 - if (counter % 8) == 0: - file.write("<br>") - - - -settingsHTML = """ -<h6> -Reminder: when you've generated a new font, you may need to close your browser and re-open this file before you will see your changes! -</h6> - -<h1>Settings</h1> -<div>Font name = %s</div> -<div>Full name = %s</div> -<div>Family name = %s</div> -<div>Weight = %s</div> -<div>Version = %s</div> -<div>Encoding = %s</div> -<div>Copyright = %s</div> -""" % (font.fontname, font.fullname, font.familyname, font.weight, font.version, font.encoding, font.copyright) - -file.write(settingsHTML) - - - -file.write("<h1>Glyph Names</h1>") - -# List of glyphs with names beneath grid. -for glyphDictionary in glyphDictionaries: - divForGlyph = """ - <div><span class="glyph %s"></span> %s</div> - """ - divForGlyph = divForGlyph % (glyphDictionary["name"], glyphDictionary["name"]) - file.write(divForGlyph) - -file.write("\n</body>\n</html>") - -file.close() -font.close() - -print "Finished generating font.html and font.css files\n" - - diff --git a/wikipedia/Fonts/makeSvgsFromFont.py b/wikipedia/Fonts/makeSvgsFromFont.py deleted file mode 100755 index 2f43a5e..0000000 --- a/wikipedia/Fonts/makeSvgsFromFont.py +++ /dev/null @@ -1,63 +0,0 @@ -#!/usr/local/bin/fontforge - -# Created by Monte Hurd on 9/1/14. -# Copyright (c) 2014 Wikimedia Foundation. Provided under MIT-style license; please copy and modify! -# -# Extracts svg for each glyph in "./font.ttf" to "./svgs/" folder. -# Also extracts font settings to "./font.json" file. - -# The svgs can then be edited (or added/removed) and the -# "makeFontFromSvgs.py" script can be run to rebuild the -# font from the svgs. - -# See "makeFontFromSvgs.py" for svg file naming convention. - -# Invoke with command: -# fontforge -script makeSvgsFromFont.py -# - -import fontforge -import json -import os - -# Ensure the svgs folder exists. -svgFolder = "./svgs/" -try: - os.makedirs(svgFolder) -except OSError: - if os.path.exists(svgFolder): - pass - else: - raise - -# Open the font file. -font = fontforge.open("font.ttf") -print font.fontname - -# Export font glyphs to svgs. -print "\nExporting svgs:" -for g in font.glyphs(): - if g.unicode != -1: - svgPath = "%s%04X %s %d %d %d.svg" % (svgFolder, g.unicode, g.glyphname, g.left_side_bearing, g.right_side_bearing, g.boundingBox()[1]) - print "\t%s" % (svgPath) - g.export(svgPath) - -# Export font settings to json. -fontInfo = { - "fontname": font.fontname, - "fullname": font.fullname, - "familyname": font.familyname, - "weight": font.weight, - "version": font.version, - "encoding": font.encoding, - "copyright": font.copyright -} - -# Write json data. -file = open("./font.json", "w") -file.write(json.dumps(fontInfo, indent=4, sort_keys=True)) - -# Done! -font.close() -print "Finished exporting.\n" - diff --git a/wikipedia/View Controllers/Navigation/Bottom/BottomMenuViewController.m b/wikipedia/View Controllers/Navigation/Bottom/BottomMenuViewController.m index cf84a08..e16d380 100644 --- a/wikipedia/View Controllers/Navigation/Bottom/BottomMenuViewController.m +++ b/wikipedia/View Controllers/Navigation/Bottom/BottomMenuViewController.m @@ -69,14 +69,14 @@ [self.backButton.label setWikiText: isRTL ? WIKIGLYPH_FORWARD : WIKIGLYPH_BACKWARD color: buttonColor size: MENU_BOTTOM_GLYPH_FONT_SIZE - baselineOffset: 0]; + baselineOffset: 1.5f]; self.backButton.accessibilityLabel = MWLocalizedString(@"menu-back-accessibility-label", nil); self.backButton.tag = BOTTOM_MENU_BUTTON_PREVIOUS; [self.forwardButton.label setWikiText: isRTL ? WIKIGLYPH_BACKWARD : WIKIGLYPH_FORWARD color: buttonColor size: MENU_BOTTOM_GLYPH_FONT_SIZE - baselineOffset: 0 + baselineOffset: 1.5f ]; self.forwardButton.accessibilityLabel = MWLocalizedString(@"menu-forward-accessibility-label", nil); self.forwardButton.tag = BOTTOM_MENU_BUTTON_NEXT; @@ -85,7 +85,7 @@ [self.rightButton.label setWikiText: WIKIGLYPH_SHARE color: buttonColor size: MENU_BOTTOM_GLYPH_FONT_SIZE - baselineOffset: 0 + baselineOffset: 1.5f ]; self.rightButton.tag = BOTTOM_MENU_BUTTON_SHARE; self.rightButton.accessibilityLabel = MWLocalizedString(@"menu-share-accessibility-label", nil); @@ -93,7 +93,7 @@ [self.saveButton.label setWikiText: WIKIGLYPH_HEART_OUTLINE color: buttonColor size: MENU_BOTTOM_GLYPH_FONT_SIZE - baselineOffset: 0 + baselineOffset: 1.5f ]; self.saveButton.tag = BOTTOM_MENU_BUTTON_SAVE; self.saveButton.accessibilityLabel = MWLocalizedString(@"share-menu-save-page", nil); @@ -414,7 +414,7 @@ [self.saveButton.label setWikiText: saveIconString color: saveIconColor size: MENU_BOTTOM_GLYPH_FONT_SIZE - baselineOffset: 0]; + baselineOffset: 1.5f]; self.funnel = nil; } diff --git a/wikipedia/View Controllers/Navigation/Top/TopMenuViewController.m b/wikipedia/View Controllers/Navigation/Top/TopMenuViewController.m index df251b7..731de08 100644 --- a/wikipedia/View Controllers/Navigation/Top/TopMenuViewController.m +++ b/wikipedia/View Controllers/Navigation/Top/TopMenuViewController.m @@ -226,11 +226,11 @@ self.textFieldContainer.textField.rightView = clearButton; [self updateClearButtonVisibility]; - WikiGlyphButton *(^getWikiGlyphButton)(NSString *, NSString *accessLabel, NavBarItemTag, CGFloat) = - ^WikiGlyphButton *(NSString *character, NSString *accessLabel, NavBarItemTag tag, CGFloat size) { + WikiGlyphButton *(^getWikiGlyphButton)(NSString *, NSString *accessLabel, NavBarItemTag, CGFloat, CGFloat) = + ^WikiGlyphButton *(NSString *character, NSString *accessLabel, NavBarItemTag tag, CGFloat size, CGFloat baselineOffset) { WikiGlyphButton *button = [[WikiGlyphButton alloc] init]; - [button.label setWikiText:character color:[UIColor blackColor] size:size baselineOffset:0]; + [button.label setWikiText:character color:[UIColor blackColor] size:size baselineOffset:baselineOffset]; button.translatesAutoresizingMaskIntoConstraints = NO; [button addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget: self @@ -247,15 +247,15 @@ BOOL isRTL = [WikipediaAppUtils isDeviceLanguageRTL]; NSString *caret = !isRTL ? WIKIGLYPH_CARET_LEFT: WIKIGLYPH_FORWARD; - self.buttonX = getWikiGlyphButton(WIKIGLYPH_X, MWLocalizedString(@"menu-close-accessibility-label", nil), NAVBAR_BUTTON_X, size); - self.buttonArrowLeft = getWikiGlyphButton(caret, MWLocalizedString(@"menu-back-accessibility-label", nil), NAVBAR_BUTTON_ARROW_LEFT, size); - self.buttonArrowRight = getWikiGlyphButton(caret, MWLocalizedString(@"menu-forward-accessibility-label", nil), NAVBAR_BUTTON_ARROW_RIGHT, size); - self.buttonW = getWikiGlyphButton(WIKIGLYPH_W, MWLocalizedString(@"menu-w-accessibility-label", nil), NAVBAR_BUTTON_LOGO_W, size); - self.buttonTOC = getWikiGlyphButton(WIKIGLYPH_TOC_COLLAPSED, MWLocalizedString(@"menu-toc-accessibility-label", nil), NAVBAR_BUTTON_TOC, size); - self.buttonMagnify = getWikiGlyphButton(WIKIGLYPH_MAGNIFY, MWLocalizedString(@"menu-search-accessibility-label", nil), NAVBAR_BUTTON_MAGNIFY, size); - self.buttonBlank = getWikiGlyphButton(@"", @"", NAVBAR_BUTTON_BLANK, size); - self.buttonCancel = getWikiGlyphButton(@"", MWLocalizedString(@"menu-cancel-accessibility-label", nil), NAVBAR_BUTTON_CANCEL, size); - self.buttonTrash = getWikiGlyphButton(WIKIGLYPH_TRASH, MWLocalizedString(@"menu-trash-accessibility-label", nil), NAVBAR_BUTTON_TRASH, size); + self.buttonX = getWikiGlyphButton(WIKIGLYPH_X, MWLocalizedString(@"menu-close-accessibility-label", nil), NAVBAR_BUTTON_X, size, 2.0f); + self.buttonArrowLeft = getWikiGlyphButton(caret, MWLocalizedString(@"menu-back-accessibility-label", nil), NAVBAR_BUTTON_ARROW_LEFT, size, 2.0f); + self.buttonArrowRight = getWikiGlyphButton(caret, MWLocalizedString(@"menu-forward-accessibility-label", nil), NAVBAR_BUTTON_ARROW_RIGHT, size, 2.0f); + self.buttonW = getWikiGlyphButton(WIKIGLYPH_W, MWLocalizedString(@"menu-w-accessibility-label", nil), NAVBAR_BUTTON_LOGO_W, size, 2.0f); + self.buttonTOC = getWikiGlyphButton(WIKIGLYPH_TOC_COLLAPSED, MWLocalizedString(@"menu-toc-accessibility-label", nil), NAVBAR_BUTTON_TOC, size, 2.0f); + self.buttonMagnify = getWikiGlyphButton(WIKIGLYPH_MAGNIFY, MWLocalizedString(@"menu-search-accessibility-label", nil), NAVBAR_BUTTON_MAGNIFY, size, 1.0f); + self.buttonBlank = getWikiGlyphButton(@"", @"", NAVBAR_BUTTON_BLANK, size, 0.0f); + self.buttonCancel = getWikiGlyphButton(@"", MWLocalizedString(@"menu-cancel-accessibility-label", nil), NAVBAR_BUTTON_CANCEL, size, 2.0f); + self.buttonTrash = getWikiGlyphButton(WIKIGLYPH_TRASH, MWLocalizedString(@"menu-trash-accessibility-label", nil), NAVBAR_BUTTON_TRASH, size, 2.0f); if (isRTL) { self.buttonTOC.transform = CGAffineTransformScale(CGAffineTransformIdentity, -1.0, 1.0); diff --git a/wikipedia/View Controllers/RecentSearches/RecentSearchCell.m b/wikipedia/View Controllers/RecentSearches/RecentSearchCell.m index 4bc50c9..55ccdeb 100644 --- a/wikipedia/View Controllers/RecentSearches/RecentSearchCell.m +++ b/wikipedia/View Controllers/RecentSearches/RecentSearchCell.m @@ -55,7 +55,7 @@ attributes: @{ NSFontAttributeName: [UIFont wmf_glyphFontOfSize:ICON_SIZE], NSForegroundColorAttributeName : MAGNIFY_ICON_COLOR, - NSBaselineOffsetAttributeName: @0 + NSBaselineOffsetAttributeName: @1 }]; } diff --git a/wikipedia/View Controllers/RecentSearches/RecentSearchesViewController.m b/wikipedia/View Controllers/RecentSearches/RecentSearchesViewController.m index 2cb9ef7..20fd146 100644 --- a/wikipedia/View Controllers/RecentSearches/RecentSearchesViewController.m +++ b/wikipedia/View Controllers/RecentSearches/RecentSearchesViewController.m @@ -78,7 +78,7 @@ self.trashButton.backgroundColor = [UIColor clearColor]; [self.trashButton.label setWikiText: WIKIGLYPH_TRASH color:TRASH_COLOR size: TRASH_FONT_SIZE - baselineOffset: 0]; + baselineOffset: 1]; self.trashButton.accessibilityLabel = MWLocalizedString(@"menu-trash-accessibility-label", nil); self.trashButton.accessibilityTraits = UIAccessibilityTraitButton; -- To view, visit https://gerrit.wikimedia.org/r/190647 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ibd8f78f6b30858889483958d6ed0cf859a1746e4 Gerrit-PatchSet: 1 Gerrit-Project: apps/ios/wikipedia Gerrit-Branch: master Gerrit-Owner: Mhurd <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
