CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/assets/css/just-the-docs-default.css"> <script src="/assets/js/vendor/lunr.min.js"></script> <script src="/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="/assets/images/favicon.ico" type="image/x-icon">  <title>Unit 11 | Graphite</title> <meta name="generator" content="Jekyll v4.3.2" /> <meta property="og:title" content="Unit 11" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Site for Graphite" /> <meta property="og:description" content="Site for Graphite" /> <link rel="canonical" href="https://silnrsi.github.io/graphite/tutorial/graide_tutorial11.html" /> <meta property="og:url" content="https://silnrsi.github.io/graphite/tutorial/graide_tutorial11.html" /> <meta property="og:site_name" content="Graphite" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Unit 11" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"Site for Graphite","headline":"Unit 11","url":"https://silnrsi.github.io/graphite/tutorial/graide_tutorial11.html"}</script>  </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol>  <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol>  <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header" role="banner"> <a href="/" class="site-title lh-tight"> Graphite </a> <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </a> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/" class="nav-list-link">Home</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="toggle items in About Graphite category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_about.html" class="nav-list-link">About Graphite</a><ul class="nav-list"><li class="nav-list-item "><a href="/graphite_aboutWhy.html" class="nav-list-link">Why was Graphite developed?</a></li><li class="nav-list-item "><button class="nav-list-expander btn-reset" aria-label="toggle items in Graphite and OpenType category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_aboutOT.html" class="nav-list-link">Graphite and OpenType</a><ul class="nav-list"><li class="nav-list-item "> <a href="/graphite_otcompare.html" class="nav-list-link">Comparison of OpenType and Graphite shaping speeds in a Nastaliq context</a> </li></ul></li><li class="nav-list-item "><a href="/graphite_techAbout.html" class="nav-list-link">Graphite technical overview</a></li></ul></li><li class="nav-list-item"><a href="/graphite_news.html" class="nav-list-link">News</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="toggle items in Using Graphite category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_appsParent.html" class="nav-list-link">Using Graphite</a><ul class="nav-list"><li class="nav-list-item "><a href="/graphite_apps.html" class="nav-list-link">Applications that support Graphite</a></li><li class="nav-list-item "><a href="/graphite_firefox.html" class="nav-list-link">Graphite and Firefox</a></li><li class="nav-list-item "><a href="/graphite_fontdemo.html" class="nav-list-link">Graphite Font Demo</a></li><li class="nav-list-item "><a href="/graphite_fonts.html" class="nav-list-link">Graphite-enabled Fonts</a></li></ul></li><li class="nav-list-item active"><button class="nav-list-expander btn-reset" aria-label="toggle items in Developers category" aria-pressed="true"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graphite_dev.html" class="nav-list-link">Developers</a><ul class="nav-list"><li class="nav-list-item "><a href="/graphite_devFont.html" class="nav-list-link">Font Development</a></li><li class="nav-list-item "><a href="/graide.html" class="nav-list-link">Graide</a></li><li class="nav-list-item active"><button class="nav-list-expander btn-reset" aria-label="toggle items in Graphite Tutorial category" aria-pressed="true"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/graide_tutorial.html" class="nav-list-link">Graphite Tutorial</a><ul class="nav-list"><li class="nav-list-item "> <a href="/tutorial/graide_tutorial1.html" class="nav-list-link">Unit 1</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial2.html" class="nav-list-link">Unit 2</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial3.html" class="nav-list-link">Unit 3</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial4.html" class="nav-list-link">Unit 4</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial5.html" class="nav-list-link">Unit 5</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial6.html" class="nav-list-link">Unit 6</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial7.html" class="nav-list-link">Unit 7</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial8.html" class="nav-list-link">Unit 8</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial8a.html" class="nav-list-link">Intermission</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial9.html" class="nav-list-link">Unit 9</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial10.html" class="nav-list-link">Unit 10</a> </li><li class="nav-list-item active"> <a href="/tutorial/graide_tutorial11.html" class="nav-list-link active">Unit 11</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial12.html" class="nav-list-link">Unit 12</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial13.html" class="nav-list-link">Unit 13</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial14.html" class="nav-list-link">Unit 14</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial15.html" class="nav-list-link">Unit 15</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial16.html" class="nav-list-link">Unit 16</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial17.html" class="nav-list-link">Unit 17</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial18.html" class="nav-list-link">Unit 18</a> </li><li class="nav-list-item "> <a href="/tutorial/graide_tutorial_end.html" class="nav-list-link">Conclusion</a> </li><li class="nav-list-item "> <a href="/tutorial/graphite_tut_solutions.html" class="nav-list-link">Solutions to Tutorial Exercises</a> </li></ul></li><li class="nav-list-item "><a href="/graphite_codeSnippets.html" class="nav-list-link">GDL Code Snippets</a></li><li class="nav-list-item "><a href="/graphite_devApp.html" class="nav-list-link">Adding Graphite to Your Application</a></li></ul></li><li class="nav-list-item"><a href="/graphite_download.html" class="nav-list-link">Download</a></li><li class="nav-list-item"><a href="/graphite_support.html" class="nav-list-link">Support</a></li><li class="nav-list-item"><a href="/graphite_contact.html" class="nav-list-link">Contact</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Graphite site" aria-label="Search Graphite site" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="https://github.com/silnrsi/graphite" class="site-button" > Repository </a> </li> </ul> </nav> </div> <div id="main-content-wrap" class="main-content-wrap"> <nav aria-label="Breadcrumb" class="breadcrumb-nav"> <ol class="breadcrumb-nav-list"> <li class="breadcrumb-nav-list-item"><a href="/graphite_dev.html">Developers</a></li> <li class="breadcrumb-nav-list-item"><a href="/graide_tutorial.html">Graphite Tutorial</a></li> <li class="breadcrumb-nav-list-item"><span>Unit 11</span></li> </ol> </nav> <div id="main-content" class="main-content"> <main> <div class="table-wrapper"><table class="tut-nav-bar"> <tbody> <tr> <td><a href="graide_tutorial10">◀ Unit 10: Positioning by shifting</a></td> <td><a href="../graide_tutorial#contents">▲ Contents</a></td> <td><a href="graide_tutorial12">Unit 12: Positioning by attachment ▶</a></td> </tr> </tbody> </table></div> <h1 id="unit-11-glyph-metrics"> <a href="#unit-11-glyph-metrics" class="anchor-heading" aria-labelledby="unit-11-glyph-metrics"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Unit 11: Glyph metrics </h1> <p><a href="graide_tutorial11#exercise-11">Exercises</a></p> <h2 id="discussion"> <a href="#discussion" class="anchor-heading" aria-labelledby="discussion"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Discussion </h2> <p>To position glyphs correctly, it is often necessary to make use of the glyph’s metrics from within the font. Glyph metrics are numeric values for standard measurements defined for each glyph within the TrueType font. The following metrics can be used in a GDL program:</p> <ul> <li><code class="language-plaintext highlighter-rouge">boundingbox.top</code> (<code class="language-plaintext highlighter-rouge">bb.top</code>)</li> <li><code class="language-plaintext highlighter-rouge">boundingbox.bottom</code> (<code class="language-plaintext highlighter-rouge">bb.bottom</code>)</li> <li><code class="language-plaintext highlighter-rouge">boundingbox.right</code> (<code class="language-plaintext highlighter-rouge">bb.right</code>)</li> <li><code class="language-plaintext highlighter-rouge">boundingbox.left</code> (<code class="language-plaintext highlighter-rouge">bb.left</code>)</li> <li><code class="language-plaintext highlighter-rouge">boundingbox.height</code> (<code class="language-plaintext highlighter-rouge">bb.height</code>)</li> <li><code class="language-plaintext highlighter-rouge">boundingbox.width</code> (<code class="language-plaintext highlighter-rouge">bb.width</code>)</li> <li><code class="language-plaintext highlighter-rouge">advanceheight</code> (<code class="language-plaintext highlighter-rouge">ah</code>)</li> <li><code class="language-plaintext highlighter-rouge">advancewidth</code> (<code class="language-plaintext highlighter-rouge">aw</code>)</li> <li><code class="language-plaintext highlighter-rouge">leftsidebearing</code> (<code class="language-plaintext highlighter-rouge">lsb</code>)</li> <li><code class="language-plaintext highlighter-rouge">rightsidebearing</code> (<code class="language-plaintext highlighter-rouge">rsb</code>)</li> <li><code class="language-plaintext highlighter-rouge">ascent</code></li> <li><code class="language-plaintext highlighter-rouge">descent</code></li> </ul> <p>Useful abbreviations (as defined in <strong>stddef.gdh</strong>) are shown in parenthesis. Note that <code class="language-plaintext highlighter-rouge">ascent</code> and <code class="language-plaintext highlighter-rouge">descent</code> are not metrics of an individual glyph but of the font as a whole.</p> <h2 id="exercise-11"> <a href="#exercise-11" class="anchor-heading" aria-labelledby="exercise-11"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Exercise 11 </h2> <p>Use shifting and/or kerning to position diacritics over lowercase vowels. The diacritics should be attached to the previous base character. Here are some diacritics to include:</p> <ul> <li>grave - U+0300 (glyph #250)</li> <li>acute - U+0301 (glyph #247)</li> <li>circumflex - U+0302 (glyph #253)</li> <li>tilde - U+0303 (glyph #267)</li> <li>macron - U+0304 (glyph #281)</li> <li>diaeresis - U+0308 (glyph #290)</li> <li>hacek - U+030C (glyph #264)</li> </ul> <p>What is required to position them correctly over base characters of widely different widths and heights (eg, m vs. l)?</p> <p>What is necessary to handle diacritics that have overstriking built in to their glyph metrics?</p> <p>What is necessary to render i and j correctly with diacritics? (Hint: other glyphs you may find useful include: dotless i [glyphid 194] and dotless j [glyphid 195]).</p> <p>Hint: instead of including numbers directly in the rules, define glyph attributes indicating the amounts by which to shift. You may also need to define a glyph attribute on the base characters as well as the diacritics being positioned. To access glyph attributes for a slot in the rule other than the one being shifted, use the following syntax:</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@slot-number.glyph-attr </code></pre></div></div> <p><a href="graphite_tut_solutions#exercise-11">Solution</a></p> <h3 id="exploring-graide-non-ascii-text-data"> <a href="#exploring-graide-non-ascii-text-data" class="anchor-heading" aria-labelledby="exploring-graide-non-ascii-text-data"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Exploring Graide: non-ASCII text data </h3> <p>If you do not have a keyboard installed that allows you to conveniently type diacritics or other non-ASCII characters, you can enter them into your Graide test data using Unicode codepoints. The syntax is</p> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>\u<USV> </code></pre></div></div> <p>For instance, to enter X + diaeresis, type the following as test data: <code class="language-plaintext highlighter-rouge">X\u0308</code>. (Do not leave any space after the X.)</p> <p>If you prefer to always see the Unicode codepoints for non-ASCII data, there is a flag in the Configuration properties dialog to indicate this. Open the section called <strong>User Interface</strong> and check the box labeled <strong>Display character entities</strong>.</p> <p class="image-tight"><img src="../assets/images/graide11_1_nonAsciiText.png" alt="Entering non-ASCII text data" /></p> <figcaption>Entering non-ASCII text data</figcaption> <h3 id="exploring-graide-glyph-and-slot-tabs-revisited"> <a href="#exploring-graide-glyph-and-slot-tabs-revisited" class="anchor-heading" aria-labelledby="exploring-graide-glyph-and-slot-tabs-revisited"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Exploring Graide: Glyph and Slot tabs revisited </h3> <p>Run the following data: <code class="language-plaintext highlighter-rouge">m\u0304 I\u0304</code>. Use the Glyph tab to compare the values of the glyph attributes for m and I. Use the Slot tab to compare the amounts by which the diacritic was shifted.</p> <div class="table-wrapper"><table class="tut-nav-bar"> <tbody> <tr> <td><a href="graide_tutorial10">◀ Unit 10: Positioning by shifting</a></td> <td><a href="../graide_tutorial#contents">▲ Contents</a></td> <td><a href="graide_tutorial12">Unit 12: Positioning by attachment ▶</a></td> </tr> </tbody> </table></div> </main> <hr> <footer> <p class="text-small text-grey-dk-100 mb-0">Copyright © 2012-2023 SIL International and released under the <a href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 license (CC-BY-SA)</a> unless noted otherwise.</p> </footer> </div> </div> <div class="search-overlay"></div> </div> </body> </html>