Merge pull request #57 from googlefonts/issue-47-infos-about-related-…

…glyphs-and-characters-panel

Adding infos about "Related glyphs & characters" panel

_reference/panels.md

@@ -22,7 +22,7 @@ Panels provide various tools to control Fontra's workspace and the font's design
 <table class="table table-hover mb-4">
 <tr>
 <th>icon</th>
-<th>tool</th>
+<th>panel</th>
 <th>description</th>
 <th>short key</th>
 </tr>
@@ -74,4 +74,10 @@ Panels provide various tools to control Fontra's workspace and the font's design
 <td>add/store notes for selected glyph</td>
 <td></td>
 </tr>
+<tr>
+<td><img height="30" src="{{ site.url }}/images/icons/binary-tree-2.svg"></td>
+<td><a href='related-glyphs-and-characters'>related glyphs and characters</a></td>
+<td>shows related glyphs and characters, based on selection and unicode infos</td>
+<td></td>
+</tr>
 </table>

_reference/panels/related-glyphs-and-characters.md

@@ -0,0 +1,58 @@
+---
+title     : Related Glyphs & Characters
+layout    : default
+permalink : /reference/panels/related-glyphs-and-characters
+draft     : true
+order     : 509
+---
+
+<nav aria-label="breadcrumb">
+  <ol class="breadcrumb small">
+    <li class="breadcrumb-item"><a href="{{ site.url }}">Index</a></li>
+    <li class="breadcrumb-item"><a href="../../../reference">Reference</a></li>
+    <li class="breadcrumb-item"><a href="../panels">Panels</a></li>
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+  </ol>
+</nav>
+
+<div class='row'>
+<div class='col-md' markdown='1'>
+![]({{ site.url }}/images/panel-related-glyphs-and-characters-dark.png){: .img-fluid .py-2 }
+</div>
+<div class='col-md' markdown='1'>
+If you select a glyph you get different relationships.
+
+Alternate glyphs
+: ^
+  - Looks for glyphs which have the same glyph name, but with a different extension.
+
+Glyphs using this glyph as a component
+: ^
+  - These are glyphs within this font which use the selected glyph as a component
+  - example: a -> aacute, abreve, aring, adieresis, ...
+
+Characters that decompose with this character
+: ^
+  - We look at unicode decomposition information
+  - Can a character be represented as a sequence of other characters?!
+
+Components used by this glyph
+: ^
+  - The components as defined in the font (based on glyph information) 
+  - example: onequarter -> one.numerator, four.numerator, fraction
+
+Character decomposition
+: ^
+  - Based on unicode information 
+  - example: onequarter -> one, four, fraction
+
+</div>
+</div>
+
+
+- - -
+
+*Related Glyphs & Characters Panel* introduction
+-------
+<video src="{{ site.url }}/videos/related-glyphs-and-characters.mp4" controls="controls" style="width: 100%; max-width: 600px">
+</video>

_reference/reference.md

@@ -36,6 +36,7 @@ theoretical knowledge · information-oriented · useful when working
   - [Glyph info](panels/glyph-info)
   - [Transformation](panels/transformations)
   - [Glyph note](panels/glyph-note)
+  - [Related Glyphs & Characters](panels/related-glyphs-and-characters)
 - [Menu bar](menu)
   - [Font](menu/font)
     - [Status definitions](menu/font/status-colors)

_tutorials/tutorials.md

@@ -70,3 +70,8 @@ with the help of *Align and distribute objects*
 -------
 <video src="{{ site.url }}/videos/glyph-notes.mp4" controls="controls" style="width: 100%; max-width: 600px">
 </video>
+
+**Related Glyphs & Characters Panel** introduction
+-------
+<video src="{{ site.url }}/videos/related-glyphs-and-characters.mp4" controls="controls" style="width: 100%; max-width: 600px">
+</video>