| "+checkUI("_GP.projectsettings.showkeyboardtipsicon")+" |
| |||||||||||||||||||||||||
|
| ||||||||||||||||||||||||
| "+checkUI("_GP.projectsettings.showkeyboardtipsicon")+" |
| |||||||||||||||||||||||||
|
| ||||||||||||||||||||||||
| ',b||(c+=' | '),c+=' | ',c+=' | ',a||b||(c+=' | '),b||(c+=' | '),c+=' | ',c+=" |
| ',b+=a[c].begin+" through "+a[c].end+" ",b+=" | ",b+='',b+=" | ";b+="
',c+="Only import Latin charactersThis includes Latin and Latin Extended Unicode ranges(0x0020 - 0x024F). ",c+=" | ||||||
',c+='Import a custom range of charactersA nice overview of character ranges can be found atWikipedia\'s Unicode Block page.
',c+=" | ||||||
',c+="Import all the charactersDon't say we did't try to warn you.",c+=" |
| ",b+=' '+b+" "),b}function addToUsedIn(a,b){var c=_GP.linkedshapes[a].usedin;c.push(""+b),c.sort(function(a,b){return a-b})}function removeFromUsedIn(a,b){var c=_GP.linkedshapes[a].usedin,d=c.indexOf(""+b);-1!==d&&c.splice(d,1)}function Path(a){if(this.objtype="path",this.pathpoints=!1,a.pathpoints&&a.pathpoints.length){this.pathpoints=[];for(var b=0;b"+makeGlyphrStudioLogo({width:376,fill:_UI.colors.accent_55})+" "+_UI.thisGlyphrStudioVersion+"
This Glyphr ProjectThe currently opened project was created with: "+_GP.projectsettings.version+" "+make_ContributeHTML()+" LicenseGlyphr Studio is licensed under a GNU General Public License. "; getEditDocument().getElementById("mainwrapper").innerHTML=a}function make_ContributeHTML(){var a=" Contribute!If you think Glyphr Studio is pretty cool, there are two huge ways you can make it better!
Export Font';a+=' ",getEditDocument().getElementById("mainwrapper").innerHTML=a}function loadPage_firstrun(){var a="
',a+='
drag and drop to load a fileGlyphr Project File (.txt) SVG Font File (.svg) "+makeErrorMessageBox()+" Start a new Glyphr ProjectProject name:Try loading another .svg or .txt file...",document.getElementById("droptarget").innerHTML=d,document.getElementById("firstruntableright").style.backgroundColor=_UI.colors.offwhite),debug(" reader.onload - END\n")}}(b),c.readAsText(b)}function handleMessage(a){_UI.droppedFileContent=a.data,ioSVG_importSVGfont(!1)}function handleDragOver(a){a.stopPropagation(),a.preventDefault(),a.dataTransfer.dropEffect="move",document.getElementById("firstruntableright").style.backgroundColor=_UI.colors.accent_95,document.getElementById("droptarget").innerHTML="Drop it!"}function handleDragLeave(a){a.stopPropagation(),a.preventDefault(),document.getElementById("firstruntableright").style.backgroundColor=_UI.colors.offwhite,document.getElementById("droptarget").innerHTML="Glyphr Project File (.txt) SVG Font File (.svg)"}function importGlyphrProjectFromText(a){var b=JSON.parse(a),c=b.projectsettings.versionnum,d=b.projectsettings.version;if(d){c||(c="0.3.0"),c=c.split(".");var e=1*c[0],f=1*c[1];0===e?(3===f&&(b=migrateFromBetaThreeToFour(b),f=4),4===f&&(b=migrateFromBetaFourToFive(b),f=5),5===f&&hydrateGlyphrProject(b),f>5&&(document.getElementById("droptarget").innerHTML="drop file here...",alert("Your Glyphr Project was created with a later version of Glyphr Studio. This version of Glyphr Studio cannot open project files created in the future O_o (whoa). Please go to glyphrstudio.com to get the latest release."))):(document.getElementById("droptarget").innerHTML="drop file here...",alert("Your Glyphr Project was created with a later version of Glyphr Studio. This version of Glyphr Studio cannot open project files created in the future O_o (whoa). Please go to glyphrstudio.com to get the latest release."))}else document.getElementById("droptarget").innerHTML="drop file here...",alert("File does not appear to be a Glyphr Project. No version information was found. Please try a different file...")}function migrateFromBetaFourToFive(a){for(var b,c=0;c ";c+=" ",getEditDocument().getElementById("mainwrapper").innerHTML=c,updateCustomRangeTable()}function updateAscender(a){var b=_GP.projectsettings;b.ascent=Math.max(0,Math.min(b.upm,round(a))),document.getElementById("metric-des").value=b.ascent-b.upm}function loadPage_help(){var a="Font Name",c+="",c+=" Character Proportions",c+="Key Metrics
",c+=" Default Side BearingsSide Bearings are the amount of blank space that is added to the left or right of characters when they are displayed. This metric can be set individually per character, but will default to this value if not set.
",c+=" Grids and Guides",c+="Grid System",c+="Defining a grid system to use while editing characters in this font makes stuff a whole lot easier. This number is the number of vertical and horizontal divisions to use, it should divide evenly into the Units per Em.
",c+=" OvershootRound letters usually extend a little above the x height line and below the baseline. A light guideline will show this overshoot distance.
",c+=" Character RangesCharacter ranges are based on the Unicode Standard, which assigns a hexadecimal number to all possible characters in a font. ",c+="Standard Character Ranges "+helpUI(unicodeInputHelp())+"The most common character sets are built into Glyphr Studio, and can be toggled with the checkboxes below.",c+="
Custom Character Ranges "+helpUI(unicodeInputHelp())+"Additional character ranges above 0x024F can be included here. A nice overview of character ranges can be found at Wikipedia's Unicode Block page.Custom character ranges are inclusive, must be unique (non-overlapping), must be greater than 0x024F and less than 0xFFFF.
",c+=" Font MetadataThese properties are based on the CSS @font-face standard. More information can be found at the W3C's Fonts Page and their CSS @font-face Page.",c+="
Help";a+=" ",getEditDocument().getElementById("mainwrapper").innerHTML=a
Peruse the document, but if you have any other questions, you can email mail@glyphrstudio.com, and we'd be happy to help out. Have a new feature idea? Or a suggestion about how to make a current feature better? Help us out by voting for new features or suggesting improvements. Jump to a section Common Character Editing Pages: Editing: Shape Editing Edit Canvas Tools Keyboard Shortcuts Panels: Character Shape Path Point Linked Shape Instance Edit History Guides Pages: Ligatures Page Kerning Page Test Drive Page Font Settings Page Project Settings Page Import SVG Page Export Font Page About Page Navigation and LayoutThe Glyphr Studio work space has three vertical areas: from left to right, the Navigation Bar, the Panel, and the Main Content area. Selecting an icon in the Navigation Bar will update the Panel and the Main Content areas. Pressing the Glyphr Studio logo in the upper left part of the Navigation Bar displays all the main pages in the Panel, allowing you to navigate around Glyphr Studio. Some of the pages have additional Navigation Bar icons - like Attributes, Layers, and Character Selection - that are specific to character editing, or other activities. The bottom-most icon in the Navigation Bar is a save icon - it does not actually navigate anywhere, but instead is just an omnipresent shortcut to save your Glyphr Project. When there are changes that have not been saved, the save icon becomes slightly highlighted, and a diamond icon ❖ will be added to the browser title. back to topCommon Character Editing PagesCharacter Edit, Ligatures, and Linked Shapes pages have many shape editing controls in common. Linked Shapes are single outlines that can be inserted into many characters of a font. Updating the Linked Shape will also update all the Linked Shape instances. Characters and Ligatures in your font can have many shapes (both linked and not), so there is an added concept of Layers on the Character Edit and Ligatures pages. Linked Shapes are individual shapes that can be added to many Characters or Ligatures. Any time the Linked Shape is edited, all the Characters or Ligatures that use that Linked Shape are updated. There are many individual letter forms that are shared across characters in a single font - for example the round o form of the letters b,d,g,o,p,q. Linked Shapes were designed to make it easy to keep similar letter forms consistent across a font. Creating new Linked Shapes, and adding a Linked Shape to a character can be done through the Actions list in the Attributes Panel. The Linked Shapes page is very similar to the Character Edit page. Each Linked Shape is just a single Shape, so there are no shape layers, or add shape buttons. The Linked Shapes page also displays all the shapes that use the current Linked Shape - they are displayed as a thumbnail in the lower left, and update as the Linked Shape is edited. Clicking on one of these thumbnails will navigate to the Character Edit or Ligature page for that character. back to topShape EditingShape editing concepts can be found on the Character Edit, Ligatures, and Linked Shapes pages. Shape and Path attributes, along with metadata, can be edited either in the Attributes Panel, or interactively using the Edit Canvas in the Content Area. Many of these attributes can be locked by selecting the small lock icon to the left of the attribute value. This will stop this attribute from accidentally being changed, and in most cases, will limit what can be done on the Edit Canvas. Unless otherwise noted, most attributes are in Em units. back to topEdit Canvas ToolsIn the Upper Left hand side of the Edit Canvas there are 12 tools. The currently selected tool has a blue background. The tools, from top to bottom, are:
Keyboard Shortcuts"+makeKeyboardShortcutsTable()+" back to topAttributes Panel - Character(Character Edit and Ligatures Pages) When no shape is selected, the Attributes Panel shows attributes for the currently selected Character. Bulk-transform character shapes If there are more than one shape in the character, there are position and dimension controls that will change all the shapes in the character.
Width Metrics These metrics are used for exporting a font file
Attributes Panel - Shape(Character Edit, Ligatures, and Linked Shape Pages)
Attributes Panel - Path Point(Character Edit, Ligatures, and Linked Shape Pages)
Attributes Panel - Linked Shape Instance(Linked Shape Page)
Edit History Panel(Character Edit, Ligatures, Linked Shapes, and Kerning Pages) This panel shows a list of edits that are available to undo. There is a small description of the action, along with a timestamp, and these actions are grouped by Character name. Pressing the 'Undo' button, or Ctrl+z will reverse edits that are listed here. Character Edit, Ligatures, and Linked Shapes pages all have separate undo lists. The Edit History Panel will only show edits that have taken place on that particular page, not across Glyphr Studio as a whole. back to topGuides Panel(Character Edit, Ligatures, Linked Shapes, and Kerning Pages) The Guides Panel shows many options for viewing and specifying grids and guides. In general, each guide line is displayed with the following properties (from left to right):
Options These toggles show and hide some global aspects of the grid and guides. System Guides These guides reflect key metrics of the font. Their values cannot be edited from the Guides Panel - to edit their values, go to the Font Properties page. Custom Guides These guides are defined by you, and can be in any location you specify. back to topLigatures PageLigatures are when two or more characters get combined into one glyph. Generically, when you define a ligature, two or more characters are specified, and instead of showing those characters when a user is typing, those characters get replaced with a single new character. Some common lowercase ligatures involve combining the crossbars of characters like f and t, forming ligatures like ff and ſt. A common uppercase ligature is combining the characters A and E into the ligature Æ. Ligatures can also be used for any other sequence replacement, for example fractions: the three characters 1 and / and 4 could be turned into the ligature ¼. Creating a new ligature is as easy as specifying two or more characters to combine. Designing the resulting character uses exactly the same tools and processes as designing regular characters on the Character Edit page. back to topKerning PageKerning allows you to adjust the distance between two specific characters, or two sets of characters. Many characters look odd if they appear together using default spacing - for example, A and V. The space between these two characters is usually reduced with kerning so they 'fit' better together. The left or right side of the kern pair can also be a group of letters. For instance, you may decide to kern the letter A on the left with V, W, and Y on the right. This effectively creates three individual kern pairs: AV, AW, and AY. The Kerning Pairs attributes panel shows a list of all the existing kern pairs. The blue rectangle on the left of each line shows which one is currently selected. Specific kern values can be entered in the input on the right of each line, or by clicking and dragging on the edit canvas itself. There is a 'x' button on the far right of each line to delete that kern pair. back to topTest Drive PageThe Test Drive page is where your font can be tried out in real time. Typing in the upper textbox will display that same text in your font face in the lower box. In the Attributes Panel, there is a list of Pangram buttons that will populate the upper textbox with sentences that contain all the letters of the alphabet. Similarly, there are buttons that will populate the upper textbox with certain character sets. The Options area lets you change how your font is drawn to the lower box, including options for Font Size, Line Spacing, and Character Spacing. The 'Generate PNG File' button will launch a new tab with an image of whatever is displayed in the lower box. Right-click the image to save the PNG file. back to topFont Settings PageFont Name will be used when exporting your font. Character Proportions deal with global attributes that affect your font. Glyphr Studio uses the properties in the Font Settings section to display and edit shapes:
Grids and Guides
Character Ranges
Font Metadata is a set of information that describes your font in various ways, and specifies some extra options - like underline and strikethrough attributes. These attributes are exported with your SVG font. back to topProject Settings PageThis information does not necessarily have a direct effect on the Font itself, but is used to help with designing your font. This information is saved when a Glyphr Project is saved, and will be imported when a saved project is loaded.
Import SVG PageImportingThere are many pieces of design software that allow you to create SVG outlines. For example, Adobe Illustrator, or its open-source equivalent Inkscape. However you create the vector outlines of your characters, you can import them via SVG on this page. This page is for importing individual outlines to specific characters. Importing whole SVG fonts can be done from the initial Open Project page. Importing outlines happens one character at a time, and could be accomplished thusly:
Notes about SVGSVG is a huge language that is capable of defining a much larger set of graphic design concepts than are needed for font glyph design. As a result, Glyphr Studio ignores much of the SVG code that gets imported. What Glyphr Studio imports:
What Glyphr Studio ignores:
Things to keep in mind:
Export Font PageFor Beta 5, Glyphr Studio can export an SVG font straight from your browser. In Beta 6, Glyphr Studio will be able to export Open Type files (.otf), and possibly some other formats. Luckily, there are some free services online that will allow you to convert a SVG Font to whatever format you'd like. So, for now, export a SVG Font and convert it to a 'real' font elsewhere. We're working on making this more streamlined in the future. TTX support was deprecated in Beta 4, and removed in Beta 5 - if you super <3 Glyphr Studio plus TTX, you'll have to stick with Beta 4. Them's the breaks. back to topAbout PageDisplays various information about the currently loaded Glyphr Project, and the current Glyphr Studio being used. Glyphr Projects created with different versions of Glyphr Studio may not play nicely together. Please consider making a contribution to the Glyphr Studio effort. Glyphr Studio is, and will always, be totally free... but it does take some cash money to keep it going. If you are a lovely individual who has already contributed, thank you! You are awesome! ",a+=" | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||