CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Guidelines for Writing System Support: Technical Details: Smart Rendering: Part 1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="UNESCO,Guidelines,WSI,WSIs,writing system,writing systems,font,smart,rendering"> <link rel="stylesheet" href="/cms/assets/misc/css/default.css" type="text/css"> <link rel="stylesheet" href="/cms/sites/nrsi/themes/default/_css/default.css" type="text/css"> <style type="text/css">  </style>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-FVXRGR2Q9V"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-FVXRGR2Q9V'); </script> <title>Guidelines for Writing System Support: Technical Details: Smart Rendering: Part 1</title> </head> <body style="padding:0; margin:0"> <style> .archive_notice { /* box-shadow: black 0pt 4pt 20px -8px inset; */ display: block; background-color: orange; font-size: 12pt; font-style: normal; font-weight: lighter; line-height: 100%; padding: 5pt; text-align: center; width: auto; } form { display: none } .webform::before { content: "Forms are disabled on this static version of the site."; display: block; width: fit-content; } </style> <div class="archive_notice"> This is an archive of the original scripts.sil.org site, preserved as a historical reference. Some of the content is outdated. Please consult our other sites for more current information: <a href="https://software.sil.org">software.sil.org</a>, <a href="https://scriptsource.org">ScriptSource</a>, <a href="https://silnrsi.github.io/FDBP/">FDBP</a>, and <a href="https://silnrsi.github.io/silfontdev/">silfontdev</a> </div> <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td style="background: #0068a6; padding-left:20; padding-top:10; white-space:nowrap;" width="110" valign="top"> <p><a href="http://www.sil.org/">  <img src="/cms/sites/nrsi/themes/default/_media/SIL_Logo_TM_Blue_2014.png" width="85" height="95" border="0" alt=""> </a><br><br></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dhome%26site_id%3Dnrsi.html">Home</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dcontactus%26site_id%3Dnrsi.html">Contact Us</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dgeneral%26site_id%3Dnrsi.html">General</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dbabel%26site_id%3Dnrsi.html">Initiative B@bel</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dwsi_guidelines%26site_id%3Dnrsi.html">WSI Guidelines</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dencoding%26site_id%3Dnrsi.html">Encoding</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dencodingprinciples%26site_id%3Dnrsi.html">Principles</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dunicode%26site_id%3Dnrsi.html">Unicode</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dunicodetraining%26site_id%3Dnrsi.html">Training</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dunicodetutorials%26site_id%3Dnrsi.html">Tutorials</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dunicodepua%26site_id%3Dnrsi.html">PUA</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dconversion%26site_id%3Dnrsi.html">Conversion</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dencconvres%26site_id%3Dnrsi.html">Resources</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dconversionutilities%26site_id%3Dnrsi.html">Utilities</a></p> <p class="Cat4"><a class="Cat4" href="/cms/scripts/page.php%3Fid%3Dteckit%26site_id%3Dnrsi.html">TECkit</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dconversionmaps%26site_id%3Dnrsi.html">Maps</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dencodingresources%26site_id%3Dnrsi.html">Resources</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dinput%26site_id%3Dnrsi.html">Input</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dinputprinciples%26site_id%3Dnrsi.html">Principles</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dinpututilities%26site_id%3Dnrsi.html">Utilities</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dinputtutorials%26site_id%3Dnrsi.html">Tutorials</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dinputresources%26site_id%3Dnrsi.html">Resources</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dtypedesign%26site_id%3Dnrsi.html">Type Design</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dtypedesignprinciples%26site_id%3Dnrsi.html">Principles</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dfontdesigntools%26site_id%3Dnrsi.html">Design Tools</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dfontformats%26site_id%3Dnrsi.html">Formats</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Dtypedesignresources%26site_id%3Dnrsi.html">Resources</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dfontdownloads%26site_id%3Dnrsi.html">Font Downloads</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dfontdownloadsgentium%26site_id%3Dnrsi.html">Gentium</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dfontdownloadsdoulos%26site_id%3Dnrsi.html">Doulos</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dfontdownloadsipa%26site_id%3Dnrsi.html">IPA</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Drendering%26site_id%3Dnrsi.html">Rendering</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Drenderingprinciples%26site_id%3Dnrsi.html">Principles</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Drenderingtechnologies%26site_id%3Dnrsi.html">Technologies</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Drenderingopentype%26site_id%3Dnrsi.html">OpenType</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Drenderinggraphite%26site_id%3Dnrsi.html">Graphite</a></p> <p class="Cat2"><a class="Cat2" href="/cms/scripts/page.php%3Fid%3Drenderingresources%26site_id%3Dnrsi.html">Resources</a></p> <p class="Cat3"><a class="Cat3" href="/cms/scripts/page.php%3Fid%3Dfontfaq%26site_id%3Dnrsi.html">Font FAQ</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dlinks%26site_id%3Dnrsi.html">Links</a></p> <p class="Cat1"><a class="Cat1" href="/cms/scripts/page.php%3Fid%3Dglossary%26site_id%3Dnrsi.html">Glossary</a></p> <br> </td> <td valign="top" style="padding:0" xwidth="650"> <div style="background: #6699CC url(/cms/sites/nrsi/themes/default/_media/home_banner_gradient.gif) no-repeat right; padding:0 0 0 25; height:36px; margin:0; color:#FFFFFF;"> <p style="font-family:Times New Roman; font-size:25px; color:#FFFFFF; padding:10 0 0 0; margin:0 0 0 0">Computers & Writing Systems</p> </div> <div style="padding:0 0 0 0; background-color:#000000; color:#FFFFFF"> <table width='100%'> <tr> <td style="padding: 0 0 0 25px"><a class="GlobalNavLink" href="http://www.sil.org/">SIL HOME</a> | <a class="GlobalNavLink" href="https://software.sil.org/products/">SIL SOFTWARE</a> | <a class="GlobalNavLink" href="/support.html">SUPPORT</a> | <a class="GlobalNavLink" href="https://www.givedirect.org/donate/?cid=13536">DONATE</a> | <a class="GlobalNavLink" href="/privacy-policy.html">PRIVACY POLICY</a> </td> <td align='right' width='20%'> <script async src="https://cse.google.com/cse.js?cx=0760bf09a6bff4b0c"></script><style>.gsc-control-cse {padding: 0.6em; min-width: 10em; width: 18em; max-width: 20em} form.gsc-search-box {display: unset;}</style><div class="gcse-search"></div> </td> </tr> </table> </div> <div style="padding:0 25 25 25"> <p class='CategoryPath'>You are here: <a class='CategoryPath' href='/cms/scripts/page.php%3Fid%3Dgeneral%26site_id%3Dnrsi.html'>General</a> > <a class='CategoryPath' href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines%26site_id%3Dnrsi.html'>WSI Guidelines</a><br> Short URL: <a href='/wsi_guidelines_sec_9_1.html'>https://scripts.sil.org/WSI_Guidelines_Sec_9_1</a></p>   <h1>Guidelines for Writing System Support: Technical Details: Smart Rendering: Part 1 </h1> <p> <span class='author_date_hits'>Martin Hosken, Victor Gaultney, 2003-09-05</span></p><div class='Sidebar'><p><span class='Runin'>UNESCO project Initiative B@bel</span></p> <p>A complete index of all SIL's contributions to UNESCO‘s project Initiative B@bel can be found <a href='/cms/scripts/page.php%3Fid%3Dbabel%26site_id%3Dnrsi.html'>here</a>.</p> </div><p></p> <div class='Sidebar'><p><span class='Runin'>Guidelines Table of Contents</span></p> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_1%26site_id%3Dnrsi.html'>Section 1: Components of a Writing System Implementation</a></p> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_2%26site_id%3Dnrsi.html'>Section 2: The Process of WSI Development</a></p> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_3%26site_id%3Dnrsi.html'>Section 3: Roles and Actors</a></p> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_4%26site_id%3Dnrsi.html'>Section 4: Keys to Success</a></p> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_5_1%26site_id%3Dnrsi.html'>Section 5: Technical Details: Characters, Codepoints, Glyphs</a></p> <ul class='dListUnordered'> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_5_1%26site_id%3Dnrsi.html'>Part 1: Characters</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_5_2%26site_id%3Dnrsi.html'>Part 2: Codepoints and Glyphs</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_5_3%26site_id%3Dnrsi.html'>Part 3: Keystrokes and Codepoints</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_5_4%26site_id%3Dnrsi.html'>Part 4: Further Reading</a></li> </ul> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_6_1%26site_id%3Dnrsi.html'>Section 6: Technical Details: Encoding and Unicode</a></p> <ul class='dListUnordered'> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_6_1%26site_id%3Dnrsi.html'>Part 1: An Introduction to Encodings</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_6_2%26site_id%3Dnrsi.html'>Part 2: An Introduction to Unicode</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_6_3%26site_id%3Dnrsi.html'>Part 3: Adding New Characters and Scripts to Unicode</a></li> </ul> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_7%26site_id%3Dnrsi.html'>Section 7: Technical Details: Data Entry and Editing</a></p> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_8%26site_id%3Dnrsi.html'>Section 8: Technical Details: Glyph Design</a></p> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_9_1%26site_id%3Dnrsi.html'>Section 9: Technical Details: Smart Rendering</a></p> <ul class='dListUnordered'> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_9_1%26site_id%3Dnrsi.html'>Part 1: The Rendering Process</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_9_2%26site_id%3Dnrsi.html'>Part 2: Glyph Processing — Dumb Fonts</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_9_3%26site_id%3Dnrsi.html'>Part 3: Glyph Processing — Smart Fonts</a></li> <li><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_9_4%26site_id%3Dnrsi.html'>Part 4: User Interaction</a></li> </ul> <p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_glossary%26site_id%3Dnrsi.html'>Glossary</a></p> </div><p></p> <p class='TOCTitle'>Contents</p> <div class='TOC'> <ol> <li class='TOC2'><a href='#5814b548'>9.1   The Rendering Process</a> <ol> <li class='TOC3'><a href='#40bdf37a'>9.1.1   Glyph identification</a></li> <li class='TOC3'><a href='#66b70e52'>9.1.2   Glyph processing</a></li> <li class='TOC3'><a href='#0b137d17'>9.1.3   Glyph rendering</a></li> <li class='TOC3'><a href='#841d26df'>9.1.4   User interaction</a></li> </ol> </li> </ol> </div> <p></p> <p>For most of the history of computing the relationship between encoding and rendering has been relatively simple. Each codepoint has a glyph associated with it, and using whichever rendering technology is available, that glyph will be displayed on the output media. But with the advent of Unicode, and the need to be able to use an encoding which is linguistically motivated rather than visually motivated, the rendering process has become more complicated. In this section we will examine the rendering process from the viewpoint of modern rendering requirements. </p> <div class='Note'><p class='Note_heading'>Note</p><p><a href='/cms/scripts/page.php%3Fid%3Dwsi_guidelines_sec_5_1%26site_id%3Dnrsi.html'>Technical Details: Characters, Codepoints, Glyphs</a> should be read before this section.</p> </div><a name='5814b548'></a> <h2>9.1   The Rendering Process</h2> <p>The basic process is that an encoded string of characters, stored in the computer, is converted to a glyph string. This glyph string is then processed in some way to arrive at a sequence of positioned glyphs which are then rendered to the output media. </p> <p>Rendering is an ambiguous word, and we will use the term <span class='KeyTerm'>glyph rendering</span> to describe the process of making the electronic equivalent of marks on a page, and <span class='KeyTerm'>rendering</span> to describe the whole process as shown below.</p> <p></p> <div class='mediacontainer'> <img src='/cms/scripts/../sites/nrsi/media/IWS_ch6a.png' height='317' width='201'> <p class='Caption' style='width: 201'>Figure1: Rendering process overview</p> </div> <br clear='left'> <br> <p></p> <p>This section will concentrate entirely on TrueType based fonts. But the concepts presented here can be easily applied to other technologies.</p> <a name='40bdf37a'></a> <h3>9.1.1   Glyph identification</h3> <p>The first step in the rendering process is to convert an encoded string to a string of glyph references. This conversion is a simple one-to-one correspondence. For every codepoint there is one corresponding glyph. Thus the number of glyphs in the glyph string will be the same as the number of codepoints in the encoded string. Each font contains a table (called the <span class='KeyTerm'>cmap</span>) that specifies the exact correspondence.</p> <a name='66b70e52'></a> <h3>9.1.2   Glyph processing</h3> <p>In the glyph processing phase the string of glyph references (also called glyph IDs) is converted to another string of glyph IDs. In the case of simple rendering (with ‘dumb’ fonts) this transformation is simple—there is no conversion. In more complex systems, sophisticated routines can transform this string. This can be useful for diacritic positioning, forming ligatures, and other linguistic transformations. It is also where glyph positioning is begun. This step contains the most flexibility for WSI developers, and will be explained in more detail after mentioning glyph rendering.</p> <a name='0b137d17'></a> <h3>9.1.3   Glyph rendering</h3> <p>At the end of the process is the actual action of putting marks on paper or displaying shapes on the screen. This involves taking the glyph outlines for each glyph and displaying them at the position indicated for that glyph. Therefore the renderer requires not only the glyph ID, but also the position of the glyph on the screen. The renderer also needs to know such things as how large to render the glyph, using what color and other stylistic information. </p> <a name='841d26df'></a> <h3>9.1.4   User interaction</h3> <p>Although not technically part of the rendering process, user interaction must be considered. In an editing environment, after the glyphs have been rendered, users need to be able to interact with the text as represented by the visual glyphs. This includes actions such as text selection and cursor movement.</p> <div class='Note'><p class='Note_heading'>Copyright notice</p><p>(c) Copyright 2003 UNESCO and SIL International Inc.</p> </div> <br><hr clear='all'><p>Note: the opinions expressed in submitted contributions below do not necessarily reflect the opinions of our website.</p><hr> <hr> <p><small>© 2003-2024 <a href='http://www.sil.org/' target='_blank'>SIL International</a>, all rights reserved, unless otherwise noted elsewhere on this page.<br> Provided by SIL's Writing Systems Technology team (formerly known as NRSI). Read our <a href="/privacy-policy.html">Privacy Policy</a>. <a href='/support.html'>Contact us here.</a></small></p> </div> </td> </table> </body> </html>