Merge pull request #71 from googlefonts/issue-70-infos-background-images

Add infos about background images

_reference/canvas/context-menu.md

@@ -111,6 +111,11 @@ The context menu gives access to functions specific to the current selection.
 <td>decompose selected components</td>
 <td>⇧ ⌘ D</td>
 </tr>
+<tr>
+<td>Un/lock Background Images</td>
+<td>lock or unlock all background images (by default all images are locked)</td>
+<td></td>
+</tr>
 <tr class='table-group-divider'>
 <td>Select Previous Source</td>
 <td>switch location to previous source</td>
@@ -121,6 +126,41 @@ The context menu gives access to functions specific to the current selection.
 <td>switch location to next source</td>
 <td>⌘ ↓</td>
 </tr>
+<tr>
+<td>Select Previous Glyph</td>
+<td>go to previous glyph of glyph search selection</td>
+<td>⌘ ←</td>
+</tr>
+<tr>
+<td>Select Next Glyph</td>
+<td>go to next glyph of glyph search selection</td>
+<td>⌘ →</td>
+</tr>
+<tr>
+<td>Find glyphs that use "this-glyph-name"</td>
+<td>gives you a dialog with glyphs that use the selected glyph as a component</td>
+<td></td>
+</tr>
+<tr class='table-group-divider'>
+<td>Replace selected glyph on canvas</td>
+<td>replace the selected glyph with a different glyph on canvas</td>
+<td></td>
+</tr>
+<tr>
+<td>Remove selected glyph on canvas</td>
+<td>remove the selected glyph on canvas</td>
+<td></td>
+</tr>
+<tr>
+<td>Add glyph before selected glyph</td>
+<td>add a new glyph before the selected glyph</td>
+<td></td>
+</tr>
+<tr>
+<td>Add glyph after selected glyph</td>
+<td>add a new glyph after the selected glyph</td>
+<td></td>
+</tr>
 </table>
 
 

_reference/canvas/glyph-editor/anchors.md

@@ -55,11 +55,11 @@ order     : 211
 
 #### Show/hide anchor names
 1. go to [Glyph editor appearance](/reference/menu/view/glyph-editor-appearance)
-2. click checkbox **Anchor names**
+2. click **Anchor names**
 
 #### Show/hide anchor coordinates
 1. go to [Glyph editor appearance](/reference/menu/view/glyph-editor-appearance)
-2. click checkbox **Coordinates**
+2. click **Coordinates**
 3. select anchor(s)
 
 Actions

_reference/canvas/glyph-editor/background-image.md

@@ -0,0 +1,66 @@
+---
+title     : Background Image
+layout    : default
+permalink : /reference/canvas/glyph-editor/background-image
+draft     : true
+order     : 212
+---
+
+<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="{{ site.url }}/reference">Reference</a></li>
+    <li class="breadcrumb-item"><a href="{{ site.url }}/reference/canvas">Canvas</a></li>
+    <li class="breadcrumb-item"><a href="{{ site.url }}/reference/canvas/glyph-editor">Glyph editor</a></li>
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+  </ol>
+</nav>
+
+*Background images* have a certain transformation and may have an opacity specified. They are used usually to trace a design at the beginning of a new project.
+{: .lead }
+
+<div class="alert alert-primary mt-3" role="alert" markdown='1'>
+#### Pro tips
+{: .alert-heading}
+- editing properties like opacity or transformation works with **multi-source-editing**
+- **unlock** or **lock** the background image via the context menu (they are locked by default)
+- the image file or data can be in PNG or JPEG format
+{: .mb-0 }
+</div>
+
+![]({{ site.url }}/images/background-image.png){: .img-fluid }
+
+#### Add background image (can be added to a glyph in three ways):
+- Paste image data
+- Drop an image file onto the canvas
+- Choose an image file from the user's hard drive, with the **Glyph** -> **Add background image...** menu.
+
+#### Un/Lock background image
+1. **unlock** or **lock** the background image via the context menu
+
+![]({{ site.url }}/images/background-image-unlock.png){: .img-fluid }
+
+#### Edit background image
+1. **unlock** background image
+2. select the image (the glyph needs to be in edit mode, and at a selected source, not at an interpolation)
+3. edit images properties like opacity or transformation
+    - via **Selection info** panel: opacity, color or transformation 
+![]({{ site.url }}/images/background-image-edit-selection-info.gif){: .img-fluid }
+    - via **Transformation** panel: flip, align, etc
+![]({{ site.url }}/images/background-image-edit-transformation-panel.gif){: .img-fluid }
+    - via **Transform selection**: scale, rotate interactively with *Pointer tool* 
+![]({{ site.url }}/images/background-image-edit-transform-selection.gif){: .img-fluid }
+
+#### Delete background image
+1. select the image
+2. delete via keyboard or right click context-menu **delete selection**
+
+#### Show/hide background images
+1. go to [Glyph editor appearance](/reference/menu/view/glyph-editor-appearance)
+2. click **Background image**
+
+<div class="alert alert-warning" role="alert" markdown='1'>
+<i class="bi bi-exclamation-circle me-1"></i> Fontra's background image feature is mostly compatible with UFO background images, although it doesn't implement UFO's colorization feature yet. Fontra does allow the opacity of the image to be set.<br>
+Caveat: support for background images is limited to the .designspace/.ufo and .fontra backends. It is currently not supported in the rcjk backend.
+{: .mb-0 }
+</div>

_reference/menu/view/glyph-editor-appearance.md

@@ -41,6 +41,10 @@ Actions
 <td>the Units-per-em grid, when zoomed in</td>
 </tr>
 <tr>
+<td>Background image</td>
+<td>show image in the background (if present for a glyph)</td>
+</tr>
+<tr>
 <td>Line metrics</td>
 <td>glyph bounding box, vertical metrics and overshoots</td>
 </tr>

_reference/reference.md

@@ -18,6 +18,7 @@ theoretical knowledge · information-oriented · useful when working
   - [Context menu](canvas/context-menu)
   - [Glyph editor](canvas/glyph-editor)
     - [Anchors](canvas/glyph-editor/anchors)
+    - [Background Image](canvas/glyph-editor/background-image)
 - [Navigation](navigation)
   - [Keyboard shortcuts](navigation/keyboard-shortcuts)
 - [Tools](tools)
@@ -54,9 +55,9 @@ theoretical knowledge · information-oriented · useful when working
 {% comment %}
     - [Font Info](menu/font/font-info)
     - [Axes](menu/font/axes)
+    - [Cross-axes mapping](menu/font/cross-axes-mapping)
     - [Sources](menu/font/sources)
-  {% endcomment %}
-
+{% endcomment %}
 {% comment %}
 - [OT Features](#)
 {% endcomment %}