www/server/staging/standards gnu-website-guidel...

[Therese Godefroy]

CVSROOT:        /webcvs/www
Module name:    www
Changes by:     Therese Godefroy <th_g> 21/02/24 16:41:28

Modified files:
        server/staging/standards: gnu-website-guidelines.html 

Log message:
        Minor fixes, mostly in Use of Graphics.

CVSWeb URLs:
http://web.cvs.savannah.gnu.org/viewcvs/www/server/staging/standards/gnu-website-guidelines.html?cvsroot=www&r1=1.22&r2=1.23

Patches:
Index: gnu-website-guidelines.html
===================================================================
RCS file: /webcvs/www/www/server/staging/standards/gnu-website-guidelines.html,v
retrieving revision 1.22
retrieving revision 1.23
diff -u -b -r1.22 -r1.23
--- gnu-website-guidelines.html 23 Feb 2021 17:06:49 -0000      1.22
+++ gnu-website-guidelines.html 24 Feb 2021 21:41:27 -0000      1.23
@@ -287,8 +287,7 @@
 </pre>
 
 Please avoid moving the old <code>id</code> to a translatable string.
-Translators will thank you!
-</li>
+Translators will thank you!</li>
 
 <li>We encourage FTP sites to use one directory for each package. This
 directory should contain all versions of the package as well as all
@@ -439,7 +438,7 @@
 visible on the first page when viewing it with a text browser.  A
 menu bar of one or two horizontal lines might accomplish your
 purpose as well.  Providing a &ldquo;skip link&rdquo; to the main text
-is another option (see the top of this page for an example).</li>
+is another option (see the table of contents above for an example).</li>
 </ul>
 
 
@@ -649,11 +648,11 @@
 alpha channels; the former is not widely supported, and the latter are
 not fully supported by some older browsers).</li>
 
-<li>Always have a textual alternative for in-line images, to ensure
-indexability by search engines and accessibility.  For instance:
+<li><p>Always have a textual alternative for in-line images, to ensure
+indexability by search engines and accessibility.  For instance:</p>
 
 <div style="float: left; text-align: center; border: 1px dotted;
-            padding: 0.5em; margin: .7em 1em .7em 0">
+            padding: 0.5em; margin: .4em 1.5em .4em 0">
     <p>Loaded in graphic browser:<br />
     <img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
           title="BRIEF TEXT"
@@ -676,12 +675,12 @@
       alt="&amp;nbsp;[DESCRIPTIVE TEXT]&amp;nbsp;"&gt;
 </pre>
 
-We add the non-breaking spaces (&amp;nbsp;) and square brackets to
+<p>We add the non-breaking spaces (&amp;nbsp;) and square brackets to
 separate the DESCRIPTIVE TEXT from adjacent text, and help the user
 realize that this is a stand-in for an image.  The point of using
 non-breaking spaces rather than normal ones is to make sure they find
 their way to the translatable strings that are extracted by the
-PO4A/Gettext tools.
+PO4A/Gettext tools.</p>
 <div style="clear: both"></div>
 </li>
 
@@ -696,7 +695,7 @@
 <img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
       title="GNU stamp"
       alt="&nbsp;[Stamp with an abstract GNU head]&nbsp;"
-      style="width: 10em; height: auto; float: right; margin: .7em 0 .7em 1em"
+     style="width: 10em; height: auto; float: right; margin: .5em 0 .5em 1.5em"
       width="77px"
       height="77px" />
 
@@ -704,15 +703,15 @@
 &lt;img src="/graphics/gnu-post/Alternative-GNU-stamp.png"
       title="GNU stamp"
       alt="&amp;nbsp;[Stamp with an abstract GNU head]&amp;nbsp;"
-      style="width: 10em; height: auto; float: right; margin: .5em 0 .5em 1em"
+     style="width: 10em; height: auto; float: right; margin: .5em 0 .5em 1.5em"
       width="77px"
       height="77px" /&gt;
 </pre>
 
-This way, the page will look the same if the reader increases or
+<p>This way, the page will look the same if the reader increases or
 decreases font size.<br />Specifying both <code>width</code> and
 <code>height</code> will reserve the space required for the image during
-the page loading phase, preventing incremental layout reflows.</li>
+the page loading phase, preventing incremental layout reflows.</p></li>
 
 <li>If you are adding a small floating image to a page that uses
 <code>layout.css</code> (the stylesheet for <a
@@ -722,13 +721,12 @@
 the floating direction is reversed if the page is translated into an RTL
 language.</li>
 
-<li>If the image you are adding is 12em wide or more, and the page is
+<li><p>If the image you are adding is 12em wide or more, and the page is
 templated, you may find it convenient to use one of the responsive
 <code>pict</code> classes that are defined in the <code>IMAGES</code> section 
of
 the <code>layout.css</code> stylesheet. You can adjust
 the width in a style attribute if none of the predefined ones fits your needs;
-for instance:
-<div style="clear: both"></div>
+for instance:</p>
 
 <div class="pict wide" style="width: 14em">
     <img src="/graphics/gnu-post/GNU-stamp.png"
@@ -744,11 +742,11 @@
 &lt;/div&gt;
 </pre>
 
-Please note that the container (<code>div</code> in this case) is necessary for
+<p>Please note that the container (<code>div</code> in this case) is necessary 
for
 retrocompatibility with some browsers which cannot apply <code>max-width</code>
 to images; in addition, be aware that a nested <code>table</code> may not
 inherit <code>max-width</code> on all web browsers (i.e., always test for
-compatibility when you need to put a table beside a picture).
+compatibility when you need to put a table beside a picture).</p>
 <div style="clear: both"></div>
 </li>
 
@@ -1291,7 +1289,7 @@
 
 <p class="unprintable">Updated:
 <!-- timestamp start -->
-$Date: 2021/02/23 17:06:49 $
+$Date: 2021/02/24 21:41:27 $
 <!-- timestamp end --></p>
 </div>
 </div><!-- for class="inner", starts in the banner include -->