Merge pull request #46 from googlefonts/issue-42-knife-tool-infos

Add Knife tool infos

_reference/navigation/keyboard-shortcuts.md

@@ -23,11 +23,12 @@ order     : 301
 | `⌘` + `-` | `Ctrl` + `-` | **zoom out** |
 | `⌘` + `+` | `Ctrl` + `+` | **zoom in** |
 | `⌘` + `0` | `Ctrl` + `0` | **zoom fit** to selection |
-| `1` | `1` | switch tool to <a href='../../reference/tools/pointer'>**Pointer tool**</a>: <img height="20" src="{{ site.url }}/images/icons/pointer.svg"> |
-| `2` | `2` | switch tool to <a href='../../reference/tools/pen'>**Pen tool**</a>: <img height="20" src="{{ site.url }}/images/icons/pointeradd.svg"> |
-| `3` | `3` | switch tool to <a href='../../reference/tools/shapes'>**Shape tool**</a>: <img height="20" src="{{ site.url }}/images/icons/square-plus-2.svg"> |
-| `4` | `4` | switch tool to <a href='../../reference/tools/ruler'>**Power ruler tool**</a>: <img height="20" src="{{ site.url }}/images/icons/ruler.svg"> |
-| `5` | `5` | switch tool to <a href='../../reference/tools/hand'>**Hand tool**</a>: <img height="20" src="{{ site.url }}/images/icons/hand.svg"> |
+| `1` | `1` | switch tool to <a href='{{ site.url }}/reference/tools/pointer'>**Pointer tool**</a>: <img height="20" src="{{ site.url }}/images/icons/pointer.svg"> |
+| `2` | `2` | switch tool to <a href='{{ site.url }}/reference/tools/pen'>**Pen tool**</a>: <img height="20" src="{{ site.url }}/images/icons/pointeradd.svg"> |
+| `3` | `3` | switch tool to <a href='{{ site.url }}/reference/tools/knife'>**Knife tool**</a>: <img height="20" src="{{ site.url }}/images/icons/slice.svg"> |
+| `4` | `4` | switch tool to <a href='{{ site.url }}/reference/tools/shapes'>**Shape tool**</a>: <img height="20" src="{{ site.url }}/images/icons/square-plus-2.svg"> |
+| `5` | `5` | switch tool to <a href='{{ site.url }}/reference/tools/ruler'>**Power ruler tool**</a>: <img height="20" src="{{ site.url }}/images/icons/ruler.svg"> |
+| `6` | `6` | switch tool to <a href='{{ site.url }}/reference/tools/hand'>**Hand tool**</a>: <img height="20" src="{{ site.url }}/images/icons/hand.svg"> |
 | `⌘` + `a` | `Ctrl` + `a` | select **all** points + components, second time: include anchors + third time: only anchors |
 | `⇧` + `⌘` + `a` | `⇧` + `Ctrl` + `a` | select **none** |
 | `⌘` + `c` | `Ctrl` + `c` | **copy** selection or glyph |

_reference/reference.md

@@ -23,6 +23,7 @@ theoretical knowledge · information-oriented · useful when working
 - [Tools](tools)
   - [Pointer](tools/pointer)
   - [Pen](tools/pen)
+  - [Knife](tools/knife)
   - [Shape tool](tools/shapes)
   - [Ruler](tools/ruler)
   - [Hand](tools/hand)

_reference/tools.md

@@ -39,21 +39,27 @@ Interactive tools allow you to edit and measure glyphs with live visual feedback
 <td>2</td>
 </tr>
 <tr>
+<td><img height="30" src="{{ site.url }}/images/icons/slice.svg"></td>
+<td><a href='knife'>knife tool</a></td>
+<td>slice contours</td>
+<td>3</td>
+</tr>
+<tr>
 <td><img height="30" src="{{ site.url }}/images/icons/square-plus-2.svg"></td>
 <td><a href='shapes'>shape tool</a></td>
 <td>draw bezier rectangle or ellipse</td>
-<td>3</td>
+<td>4</td>
 </tr>
 <tr>
 <td><img height="30" src="{{ site.url }}/images/icons/ruler.svg"></td>
 <td><a href='ruler'>ruler tool</a></td>
 <td>measure contour distances interactively</td>
-<td>4</td>
+<td>5</td>
 </tr>
 <tr>
 <td><img height="30" src="{{ site.url }}/images/icons/hand.svg"></td>
 <td><a href='hand'>hand tool</a></td>
 <td>move around the canvas</td>
-<td>5 or space</td>
+<td>6 or space</td>
 </tr>
 </table>

_reference/tools/knife.md

@@ -0,0 +1,65 @@
+---
+title     : Knife tool
+layout    : default
+permalink : /reference/tools/knife
+draft     : true
+order     : 403
+---
+
+<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="../tools/">Tools</a></li>
+    <li class="breadcrumb-item active" aria-current="page">{{ page.title }}</li>
+  </ol>
+</nav>
+
+The *Knife tool* <img height="20" src="{{ site.url }}/images/icons/slice.svg"> allows you to slice contours (multi source editing works as well).
+Click the icon in the toolbar, or use the short cuts below. 
+{: .lead }
+
+<table class='table table-hover'>
+<tr>
+<th width='35%'>short cut</th>
+<th width='65%'>description</th>
+</tr>
+<tr>
+<td>3</td>
+<td>Select tool</td>
+</tr>
+
+</table>
+
+Actions
+-------
+
+<table class='table table-hover'>
+<tr>
+<th width='35%'>action</th>
+<th width='65%'>description</th>
+</tr>
+<tr>
+<td>click + drag</td>
+<td>Show intersection points</td>
+</tr>
+<tr>
+<td>click + drag + release</td>
+<td>Slice</td>
+</tr>
+<tr>
+<td>⇧ + click + drag</td>
+<td>Show intersection points with angle constrained to multiples of 45°.</td>
+</tr>
+<tr>
+<td>⇧ + click + drag + release</td>
+<td>Slice with angle constrained to multiples of 45°.</td>
+</tr>
+</table>
+
+*Knife Tool* introduction
+-------
+<video src="{{ site.url }}/videos/knife-tool.mp4" controls="controls" style="width: 100%; max-width: 600px">
+</video>
+
+

_reference/tools/ruler.md

@@ -3,7 +3,7 @@ title     : Ruler
 layout    : default
 permalink : /reference/tools/ruler
 draft     : true
-order     : 404
+order     : 405
 ---
 
 <nav aria-label="breadcrumb">

_reference/tools/shapes.md

@@ -3,7 +3,7 @@ title     : Shape tool
 layout    : default
 permalink : /reference/tools/shapes
 draft     : true
-order     : 403
+order     : 404
 ---
 
 <nav aria-label="breadcrumb">