<h2>Stereo Panner User Interface</h2>
-<img src="/images/stereo-panner-annotated.png" alt=""/>
+<figure class="left">
+ <img src="/images/stereo-panner.png" alt="The Stereo Panner">
+ <figcaption>
+ The Stereo Panner
+ </figcaption>
+</figure>
+
<p>
The <dfn>panner user interface</dfn> consists of three elements, divided between
the top and bottom half. Click and/or drag in the top half to
a pair of numbers that will be familiar to most audio engineers.
</p>
-<table>
+<table class="nodl">
<tr><th>Position</th><th>L/R</th><th>English</th></tr>
<tr><td>0</td><td>L=50% R=50%</td><td>signal image is midway between
left and right speakers</td></tr>
<h3>Examples In Use</h3>
-<table>
+<table class="nodl">
<tr><th>Appearance</th><th>Settings</th></tr>
<tr><td><img src="/images/stereo-panner.png"></td><td>Width=100%,
L=50 R=50</td></tr>
grab the L/R indicators in order to drag.</em>
</p>
-<dl class="faq">
+<table class="dl">
-<dt>Reset to defaults</dt>
-<dd>Click <kbd class="mod3 mouse">right</kbd></dd>
+<tr><th>Reset to defaults</th>
+<td>Click <kbd class="mod3 mouse">right</kbd></td></tr>
-<dt>Change to hard left</dt>
-<dd>Double click <kbd class="mod2 mouse">right</kbd> in the upper left half
- of the panner</dd>
+<tr><th>Change to hard left</th>
+<td>Double click <kbd class="mod2 mouse">right</kbd> in the upper left half
+ of the panner</td></tr>
-<dt>Change to a hard right</dt>
-<dd>Double click <kbd class="mod2 mouse">right</kbd> in the upper right half
- of the panner</dd>
+<tr><th>Change to a hard right</th>
+<td>Double click <kbd class="mod2 mouse">right</kbd> in the upper right half
+ of the panner</td></tr>
-<dt>Move position as far left as possible, given width</dt>
-<dd>Double click <kbd class="mouse">right</kbd> in the upper left half of the
- panner</dd>
+<tr><th>Move position as far left as possible, given width</th>
+<td>Double click <kbd class="mouse">right</kbd> in the upper left half of the
+ panner</td></tr>
-<dt>Move position as far right as possible, given width</dt>
-<dd>Double click <kbd class="mouse">right</kbd> in the upper right half of the
- panner</dd>
+<tr><th>Move position as far right as possible, given width</th>
+<td>Double click <kbd class="mouse">right</kbd> in the upper right half of the
+ panner</td></tr>
-<dt>Set the position to center</dt>
-<dd>Click <kbd class="mouse">right</kbd> in the upper middle of the panner</dd>
+<tr><th>Set the position to center</th>
+<td>Click <kbd class="mouse">right</kbd> in the upper middle of the panner</td></tr>
-<dt>Reset to maximum possible width</dt>
-<dd>Double click <kbd class="mouse">right</kbd> on the lower left side</dd>
+<tr><th>Reset to maximum possible width</th>
+<td>Double click <kbd class="mouse">right</kbd> on the lower left side</td></tr>
-<dt>Invert (flip channel assignments)</dt>
-<dd>Double click <kbd class="mouse">right</kbd> on the lower right side</dd>
+<tr><th>Invert (flip channel assignments)</th>
+<td>Double click <kbd class="mouse">right</kbd> on the lower right side</td></tr>
-<dt>Set width to 0°</dt>
-<dd>Double click <kbd class="mouse">right</kbd> in the lower middle</dd>
-</dl>
+<tr><th>Set width to 0°</th>
+<td>Double click <kbd class="mouse">right</kbd> in the lower middle</td></tr>
+</table>
<h4>Keyboard bindings</h4>
keybindings are available to operate on that panner:
</p>
-<dl>
- <dt><kbd>↑</kbd> / <kbd class="mod1">↑</kbd></dt>
- <dd>increase width by 1° / 5°</dd>
- <dt><kbd>↓</kbd> / <kbd class="mod1">↓</kbd></dt>
- <dd>decrease width by 1° / 5°</dd>
- <dt><kbd>←</kbd> / <kbd class="mod1">←</kbd></dt>
- <dd>move position 1° / 5° to the left</dd>
- <dt><kbd>→</kbd> / <kbd class="mod1">→</kbd></dt>
- <dd>move position 1° / 5° to the right</dd>
- <dt><kbd>0</kbd></dt>
- <dd>reset position to center</dd>
- <dt><kbd class="mod2">↑</kbd></dt>
- <dd>reset width to full (100%)</dd>
-</dl>
+<table class="dl">
+ <tr><th><kbd>↑</kbd> / <kbd class="mod1">↑</kbd></th>
+ <td>increase width by 1° / 5°</td></tr>
+ <tr><th><kbd>↓</kbd> / <kbd class="mod1">↓</kbd></th>
+ <td>decrease width by 1° / 5°</td></tr>
+ <tr><th><kbd>←</kbd> / <kbd class="mod1">←</kbd></th>
+ <td>move position 1° / 5° to the left</td></tr>
+ <tr><th><kbd>→</kbd> / <kbd class="mod1">→</kbd></th>
+ <td>move position 1° / 5° to the right</td></tr>
+ <tr><th><kbd>0</kbd></th>
+ <td>reset position to center</td></tr>
+ <tr><th><kbd class="mod2">↑</kbd></th>
+ <td>reset width to full (100%)</td></tr>
+</table>
<h4>Using the scroll wheel/touch scroll</h4>
wheel may be used as follows:
</p>
-<dl>
- <dt><kbd class="mouse">⇐</kbd> / <kbd class="mod1 mouse">⇐</kbd></dt>
- <dd>increase width by 1° / 5°</dd>
- <dt><kbd class="mouse">⇒</kbd> / <kbd class="mod1 mouse">⇒</kbd></dt>
- <dd>decrease width by 1° / 5°</dd>
- <dt><kbd class="mouse">⇑</kbd> / <kbd class="mod1 mouse">⇑</kbd></dt>
- <dd>move position 1° / 5° to the left</dd>
- <dt><kbd class="mouse">⇓</kbd> / <kbd class="mod1 mouse">⇓</kbd></dt>
- <dd>move position 1° / 5°to the right</dd>
-</dl>
+<table class="dl">
+ <tr><th><kbd class="mouse">⇐</kbd> / <kbd class="mod1 mouse">⇐</kbd></th>
+ <td>increase width by 1° / 5°</td></tr>
+ <tr><th><kbd class="mouse">⇒</kbd> / <kbd class="mod1 mouse">⇒</kbd></th>
+ <td>decrease width by 1° / 5°</td></tr>
+ <tr><th><kbd class="mouse">⇑</kbd> / <kbd class="mod1 mouse">⇑</kbd></th>
+ <td>move position 1° / 5° to the left</td></tr>
+ <tr><th><kbd class="mouse">⇓</kbd> / <kbd class="mod1 mouse">⇓</kbd></th>
+ <td>move position 1° / 5°to the right</td></tr>
+</table>
<h2><a name="caveat"></a>Stereo panning caveats</h2>
carefully for artefacts if you manipulate unknown stereo signals—many
orchestra sample libraries for example do contain time-delay components.
</p>
-