Skip to content

Commit

Permalink
Docs, tweaks and clean up.
Browse files Browse the repository at this point in the history
  • Loading branch information
@LettError
LettError committed Nov 3, 2023
1 parent ef2bf61 commit 21e9c72
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 46 deletions.
101 changes: 56 additions & 45 deletions DesignspaceEditor2.roboFontExt/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ <h2 id="axes">Axes Tab <a href="#toc">↑</a></h3>
<img alt="screenshot of DSE2 axes tab" src="screenshot_mutatorsans_axestab.png">


<h3>Axes Tab Buttons</h3>
<h3>Axes Buttons</h3>

Quick buttons for easy axes. Obviously you can edit these values here.
<ul>
Expand All @@ -189,7 +189,7 @@ <h3>Axes Tab Buttons</h3>
<li><strong>+</strong> add a new axis: add a new axis with any name.</li>
<li><strong>—</strong> delete the selected axis. <strong>Note: no undo!</strong></li>
</ul>
<h3>Axes Tab Columns</h3>
<h3>Axes Columns</h3>

<table>
<tr>
Expand Down Expand Up @@ -264,19 +264,20 @@ <h3>Axes Tab Columns</h3>

<h3>Axis Map editor syntax</h3>

<div><pre><code class="language-none"># user space value
<div>
<pre><code class="language-none"># user space value
# (numbers exposed to the user in a UI)
# maps to
# designspace value
# designspace value
# (the internal values used to position sources and instances in the designspace)
50 &gt; 10
100 &gt; 20
125 &gt; 66
150 &gt; 990

# Please note: in these examples, lines starting with # are comments.
# The comments are not saved in the designspace.
</code></pre></div>
# The comments are not saved in the designspace.</code></pre>
</div>

<ul>
<li>
Expand Down Expand Up @@ -324,7 +325,8 @@ <h3>Axis Label editor syntax</h3>

# Please note: in these examples, lines starting with # are comments.
# The comments are not saved in the designspace.
</code></pre></div>
</code></pre>
</div>

<ul>
<li>
Expand All @@ -344,7 +346,6 @@ <h2 id="sources">Sources Tab <a href="#toc">↑</a></h3>

<img alt="screenshot of DSE2 sources tab" src="screenshot_mutatorsans_sourcestab.jpg">

<p>This tab shows the source UFOs for this designspace.</p>

<h3>Sources Buttons</h3>

Expand Down Expand Up @@ -413,28 +414,33 @@ <h3>Sources Columns</h3>
</tr>
<tr>
<td>🌐</td>
<td>indicates if there are localised names for this source. Click the <img src="toolbar_25_25_info.circle.fill.svg"> for the editor.</td>
<td>indicates if there are localised names for this source. Click the <img src="toolbar_25_25_info.circle.fill.svg"> for the <b>Localised Family Name editor </b>.</td>
</tr>
<tr>
<td>🔕</td>
<td>indicates if there are muted glyphs in this source. Click the <img src="toolbar_25_25_info.circle.fill.svg"> for the editor.</td>
<td>indicates if there are muted glyphs in this source. Click the <img src="toolbar_25_25_info.circle.fill.svg"> for the <b>Muted Glyph editor</b>.</td>
</tr>
<tr>
<td>column for each axis</td>
<td>Axis values, <strong>in designspace coordinates.</strong><br>If you have discrete axes, make sure this value matches one of the values of the axis. Make sure it is between axis minimum and axis maximum. No anisotropy.</td>
<td>
Axis values for sources are <strong>in designspace coordinates.</strong>
<br>
If you have discrete axes, make sure this value matches one of the values of the axis. Make sure it is between axis minimum and axis maximum. No anisotropy.</td>
</tr>
</table>

<h3>Localised Family Name syntax</h3>
<h3>Localised Family Name editor syntax</h3>

<div><pre><code class="language-none"># starts with a ? &lt;language tag&gt; &lt;localised string&gt;
<div><pre><code class="language-none"># localised name starts with a ? &lt;language tag&gt; &lt;localised string&gt;
? fr &#39;Montserrat&#39;
? ja &#39;モンセラート&#39;</code></pre></div>
? ja &#39;モンセラート&#39;</code></pre>
</div>

<h3>Muted Glyph syntax</h3>
<h3>Muted Glyph editor syntax</h3>

<div><pre><code class="language-none"># a space separated list of glyph names
a b c d</code></pre></div>
a b c d</code></pre>
</div>



Expand Down Expand Up @@ -484,6 +490,9 @@ <h3>Instances Menus</h3>
<li>
<b>Set Preview to Selection</b>: If you have a Location Preview window open, it will show this location.
</li>
<li>
<b>New instance inbetween</b>: with two instances selected in the same discrete location, this creates a new instance between the two.
</li>
</ul>
</p>

Expand Down Expand Up @@ -516,7 +525,7 @@ <h3>Instances Columns</h3>
</tr>
<tr>
<td>column for each axis</td>
<td>Axis values, <strong>in userspace coordinates</strong>. Anisotropic values separated by space (see below)</td>
<td>Axis values can be in <strong>userspace</strong> or <strong>design coordinates</strong>. Anisotropic values separated by space (see below)</td>
</tr>
</table>

Expand All @@ -526,7 +535,7 @@ <h3>About userspace and designspace locations</h3>

<ul>
<li>
From DesignSpace 5 on instances can be placed with userspace values.
Instances can have axis values in <b>userspace</b> coordinates.
</li>
<li>
Control-click on an instance to get the pop up menu with some options.
Expand All @@ -540,13 +549,20 @@ <h3>About userspace and designspace locations</h3>
</ul>

<h3>About anisotropic instances</h3>
<ul>
<li>
The axis columns accepts two values separated by a space to indicate an anisotropic location. For instance: <code>900 800</code> means: <em>horizontal interpolation at value <code>900</code> and vertical interpolation at value <code>800</code></em>.</li>

<li><b>Please note: anisotropic locations are not supported in Variable Fonts.</b> Tools that generate fonts from designspaces may ignore the second value, or ignore the instance. It is a useful tool during exploration and design and so designspaces can store them.</li>
<li>MutatorMath can calculate anisotropic instances. See UFOOperator</li>
<li>Note: it is not clear what to expect of interactions between an axis map and an anisotropic location. The authors advise to experiment with anisotropy <strong>before</strong> defining axis maps for anisotropic instance locations.</li>
<ul>
<li>
The axis columns will two values separated by a space to indicate an anisotropic location. For instance: <code>900 800</code> means: <em>horizontal interpolation at value <code>900</code> and vertical interpolation at value <code>800</code></em>.
</li>
<li>
<b>Please note: anisotropic locations are not supported in Variable Fonts.</b> Tools that generate fonts from designspaces may ignore the second value, or ignore the entire instance. Anisotropy is a useful tool during exploration and design and so designspaces can store them.
</li>
<li>
MutatorMath can calculate anisotropic instances. See UFOOperator
</li>
<li>
Note: it is not clear what to expect of interactions between an axis map and an anisotropic location. The authors advise to experiment with anisotropy <strong>before</strong> defining axis maps for anisotropic instance locations.
</li>
</ul>


Expand All @@ -557,7 +573,7 @@ <h2 id="rules">Rules Tab <a href="#toc">↑</a></h3>

<img alt="screenshot of DSE2 rules tab" src="screenshot_mutatorsans_rulestab.jpg">

<p>The rules tab is an editor for defining rules and condition sets. Tools may interpret these into <code>rvrn</code> features.</p>
<p class="caption">The rules tab is an editor for defining rules and condition sets. Tools may interpret these into <code>rvrn</code> features.</p>

<h3>Rules syntax</h3>

Expand All @@ -579,7 +595,8 @@ <h3>Rules syntax</h3>

# Please note: in these examples, lines starting with # are comments.
# The comments are not saved in the designspace.
</code></pre></div>
</code></pre>
</div>


<p><img class="bigicon" src="toolbar_500_500_icon_location_labels.png" alt="DSE2 location labels icon"></p>
Expand Down Expand Up @@ -611,7 +628,8 @@ <h3>Location Labels syntax</h3>

# Please note: in these examples, lines starting with # are comments.
# The comments are not saved in the designspace.
</code></pre></div>
</code></pre>
</div>

<p><img class="bigicon" src="toolbar_500_500_icon_variable_fonts.png" alt="DSE2 variable fonts icon"></p>

Expand Down Expand Up @@ -658,7 +676,8 @@ <h3>Variable Fonts syntax</h3>

# Please note: in these examples, lines starting with # are comments.
# The comments are not saved in the designspace.
</code></pre></div>
</code></pre>
</div>


<p><img class="bigicon" src="toolbar_500_500_icon_problems.png" alt="DSE2 problems icon"></p>
Expand Down Expand Up @@ -730,7 +749,7 @@ <h3 id="designspace-notification-subscriber">Receiving and responding to notific

This is a demo of Subscriber receiving designspace notifications.

<code><pre>
<pre><code>
from mojo.subscriber import Subscriber, registerRoboFontSubscriber

class DesignspaceEditorSubscriber(Subscriber):
Expand All @@ -750,8 +769,7 @@ <h3 id="designspace-notification-subscriber">Receiving and responding to notific
print("rules did chagne for:", info["designspace"])

registerRoboFontSubscriber(DesignspaceEditorSubscriber)
</pre>
</code>
</code></pre>

<ul>
<li>
Expand Down Expand Up @@ -1178,32 +1196,25 @@ <h2 id="designspace-scripting">Scripting with the current designspace<a href="#t
<h3>Calculating a glyph</h3>
The example below calculates a single glyph at the default location. It returns a mathGlyph.

<code>
<pre>d = CurrentDesignspace()
<pre><code>d = CurrentDesignspace()
loc = d.newDefaultLocation()
g = d.makeOneGlyph("A", location=loc)
</pre>
</code>
g = d.makeOneGlyph("A", location=loc)</code></pre>

You can use <code>AllDesignspaces()</code> to get a list of all open designspace documents. Optionally you can pass a font object with <code>usingFont</code> to get only the designspaces that use that font.

<code>
<pre>import os
<pre><code>import os
d = AllDesignspaces()
for i, doc in enumerate(AllDesignspaces()):
print(f"{i}: {os.path.basename(doc.path)}")
f = CurrentFont()
for doc in AllDesignspaces(usingFont=f):
print(f"\nOnly using {os.path.basename(f.path)}:", f"{os.path.basename(doc.path)}")
</pre>
print(f"\nOnly using {os.path.basename(f.path)}:", f"{os.path.basename(doc.path)}")</code></pre>

<pre>
0: Sans_wdth.designspace
<pre><code>0: Sans_wdth.designspace
1: Experimental_serif.designspace

Only using Test-Light.ufo: Experimental_serif.designspace
</pre>
</code>
Only using Test-Light.ufo: Experimental_serif.designspace</code></pre>



<h3>Calculating kerning and info</h3>
Expand Down
5 changes: 4 additions & 1 deletion DesignspaceEditor2.roboFontExt/html/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,10 @@ body {
margin-right: auto;
}
.bigicon{
margin-top: 60pt;
margin-top: 80pt;
}
.caption{
font-size:10pt;
}
body .pl-c {
color: #969896;
Expand Down

0 comments on commit 21e9c72

Please sign in to comment.