diff doc/main_window_image_pane.html @ 1160:2562e0bc89a1

Mark keyboard keys with a span and make them look like a key through css style.

--- a/doc/main_window_image_pane.html	Wed Nov 19 21:36:02 2008 +0000
+++ b/doc/main_window_image_pane.html	Wed Nov 19 22:42:20 2008 +0000
@@ -56,7 +56,7 @@
   <p>When the image size is larger than the image pane, the visible region can be changed with the keyboard or mouse. The keyboard can also be used to adjust the orientation of the image.</p>
 
   <h3>Keyboard</h3>
-  <p>Use the arrow keys to pan the image in the desired direction, to increase the panning speed hold down the [Shift] key while pressing an arrow key.<br />Press [Ctrl] and an arrow key to move to the respective edge of the image. The image can only be panned with the keyboard when the image has the focus, indicated by a dotted line surrounding the image pane.</p>
+  <p>Use the Arrows to pan the image in the desired direction, to increase the panning speed hold down the <span class="key">Shift</span> key while pressing an Arrow.<br />Press <span class="key">Ctrl</span> and an Arrow to move to the respective edge of the image. The image can only be panned with the keyboard when the image has the focus, indicated by a dotted line surrounding the image pane.</p>
 
   <div class="shortcuts">
     <table width="80%" border="1" cellpadding="2" cellspacing="0">
@@ -163,7 +163,7 @@
       </tr>
       <tr>
         <td>
-          <p>[Shift] + R</p>
+          <p><span class="key">Shift</span> + <span class="key">R</span></p>
 	</td>
 
         <td>
@@ -176,7 +176,7 @@
       </tr>
       <tr>
         <td>
-          <p>[Shift] + M</p>
+          <p><span class="key">Shift</span> + <span class="key">M</span></p>
 	</td>
 
         <td>
@@ -189,7 +189,7 @@
       </tr>
       <tr>
         <td>
-          <p>[Shift] + F</p>
+          <p><span class="key">Shift</span> + <span class="key">F</span></p>
 	</td>
 
         <td>
@@ -206,12 +206,12 @@
   <p class="note"><span class="note_label">Note:</span> The rotation, mirror, and flip functions will not change the image file on disk.</p>
 
   <h3>Mouse</h3>
-  <p>Press the primary mouse button on the image and hold it, then move the mouse to pan the image in the desired direction. Releasing the mouse button will stop the panning operation. The mouse wheel can also be used to scroll the image when holding down the [Shift] key <a href="#bottomnote1" class="bottomnote">(*)</a>.</p>
+  <p>Press the primary mouse button on the image and hold it, then move the mouse to pan the image in the desired direction. Releasing the mouse button will stop the panning operation. The mouse wheel can also be used to scroll the image when holding down the <span class="key">Shift</span> key <a href="#bottomnote1" class="bottomnote">(*)</a>.</p>
 
-  <p>To scale the image size hold down the [Ctrl] key and scroll the mouse wheel up to zoom in, or down to zoom out.</p>
+  <p>To scale the image size hold down the <span class="key">Ctrl</span> key and scroll the mouse wheel up to zoom in, or down to zoom out.</p>
 
   <h4>Smooth Scroll</h4>
-  <p>To start the smooth scroll function hold down the [Shift] key and click the primary mouse button. An icon will appear at the location of the mouse pointer, the mouse can then be positioned to pan the image. The image will pan in the direction of the mouse pointer relative to the icon. The pan speed will increase in proportion to the distance that the pointer is from the center of the icon. To end the smooth scroll function click the primary mouse button within the image pane.</p>
+  <p>To start the smooth scroll function hold down the <span class="key">Shift</span> key and click the primary mouse button. An icon will appear at the location of the mouse pointer, the mouse can then be positioned to pan the image. The image will pan in the direction of the mouse pointer relative to the icon. The pan speed will increase in proportion to the distance that the pointer is from the center of the icon. To end the smooth scroll function click the primary mouse button within the image pane.</p>
 
   <h2>Navigation</h2>
 
@@ -244,7 +244,7 @@
   <p>Using View &gt; Split item from the main menu, image pane can be splitted in up to four panes, this allows to display images side by side. You may use drag'n drop to change images in each pane.</p>
   
   <p>Connected zoom is possible through the View &gt; Connected zoom menu. Zoom is then applied to all displayed images.</p>
-  <p>Connected scrolling is also possible using [Shift] and first mouse button.</p>
+  <p>Connected scrolling is also possible using <span class="key">Shift</span> and first mouse button.</p>