Updated English i18n file

- added "What is it?" section - fixed some syntax corrections ---> see 089742a / DOC - Howto-use.md improvements
Asqatasun · Feb 26, 2018 · 50f4f74 · 50f4f74
1 parent b93117d
commit 50f4f74
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 38 deletions.
diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8.properties
@@ -9,7 +9,7 @@ result.title.colors=colors
 result.title.foregroundColor=text
 result.title.backgroundColor=background
 result.title.minRation=min ratio
-form.fillInFields=Please fill in the following fields :
+form.fillInFields=Please fill in the following fields:
 form.description=Contrast-Finder finds correct color contrasts for web accessibility
 form.help=Color in hexadecimal, RGB or with CSS color keywords. <br> \
           Example: <code>#FFFFFF</code>, <code>rgb(255,255,255)</code> or <code>white</code>
@@ -22,7 +22,7 @@ form.ratio=Minimum ratio
 form.contrastOld=Old contrast
 form.contrastNew=New contrast
 form.validate=Find valid colors
-form.validContrast=Valid Contrast :
+form.validContrast=Valid Contrast:
 form.validContrastDesc=The chosen colors are already good
 ##### For [form.resultNumber]
 ##### ---> Do not translate "choice", it is an internal ID
@@ -65,8 +65,24 @@ footer.poweredBy=Powered by
 footer.availableUnder=available under
 footer.link-twitter=Follow Contrast-Finder on Twitter
 footer.link-git=Contributing to Contrast-Finder on GitHub
-home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
-<h3>Text color / Foreground</h3> \
+home.noResultTxt=<h2 id="what-is-contrast-finder">What is <em>Contrast Finder</em>?</h2> \
+<p>  <em>Contrast-Finder</em> is a tool which computes the contrast between \
+     two colors (background, foreground) and checks if the contrast is valid. \
+     When the contrast is not valid, the main target is to suggest some correct colors contrasts. \
+</p> \
+<p> <strong>Contrast-Finder</strong> is designed to be used by webdesigners, web developers \
+    or web accessibility professionals to improve the readability of HTML pages and websites. \
+</p> \
+<h2 id="user-help-contrast-finder">Help / How to use this tool?</h2> \
+<p> The <strong>Contrast-Finder</strong> interface is a form with five mandatory fields.  </p> \
+<ul> \
+    <li> <a href="#user-help_text-color">Text color</a> </li> \
+    <li> <a href="#user-help_background-color">Background color</a> </li> \
+    <li> <a href="#user-help_minimum-ratio">Minimum ratio</a> </li> \
+    <li> <a href="#user-help_color-to-edit">Color to edit</a> </li> \
+    <li> <a href="#user-help_gimme-algorithms">Gimme</a> </li> \
+</ul> \
+<h3 id="user-help_text-color">Text color / Foreground</h3> \
 <p> \
     This is the <strong>color</strong> of the <strong>text</strong>. \
     You can fill in this field with <em>color keyword</em>, an <em>hexadecimal</em> value, \
@@ -91,18 +107,18 @@ home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
     You can also use a short syntax like <code>255,255,255</code>, \
     which be interpreted as <code>rgb(255,255,255)</code>.  \
 </p> \
-<h3>Background color</h3> \
+<h3 id="user-help_background-color">Background color</h3> \
 <p> \
     This is the color of the <strong>background</strong>. <br>\
-    This field works like the text color field.\
+    This field works just like the text color field.\
 </p>\
-<h3>Minimum <em>ratio</em></h3>\
+<h3 id="user-help_minimum-ratio">Minimum <em>ratio</em></h3>\
 <p> Three possible values <strong>3</strong>, <strong>4.5</strong> and <strong>7</strong>. </p>\
 <p> How to choose a ratio? It depends on the following elements: </p>\
 <ul> \
     <li> Level of accessibility wanted: <strong>AA</strong> or <strong>AAA</strong>. </li> \
     <li> Size of the text. </li> \
-    <li> Is the text bold or not. </li> \
+    <li> Is the text bold or not? </li> \
 </ul> \
 <h4> Level <em>AA</em> </h4> \
 <p> Two elements (size and bold) gives four combinations: </p> \
@@ -113,10 +129,10 @@ home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
     <li> Text bold + text size &gt;  <code>14px</code>: ratio = <strong>3</strong> </li> \
 </ul> \
 <h4> Level <em>AAA</em> </h4> \
-<p> For level <strong>AAA</strong> the logic is the same one, only the ratio increases in the the following way: </p> \
+<p> For level <strong>AAA</strong> the logic is the same, only the ratio increases in the the following way: </p> \
 <ul> \
-    <li> <strong>4.5</strong> ratio become <strong>7</strong> </li> \
-    <li> <strong>3</strong> ratio become <strong>4.5</strong> </li> \
+    <li> <strong>4.5</strong> ratio becomes <strong>7</strong> </li> \
+    <li> <strong>3</strong> ratio becomes <strong>4.5</strong> </li> \
 </ul>  \
 <h4> Text size understanding </h4> \
 <ul> \
@@ -129,15 +145,16 @@ home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
   <a href="https://www.w3.org/TR/WCAG20/#larger-scaledef">defintion of large-scale text from WCAG</a>.  </p> \
 <h4> All details about the contrast ratio  </h4> \
 <ul>\
-<li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">WCAG 2.0 success criteria 1.4.3</a> (Level AA)</li>\
-<li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast7">WCAG 2.0 success criteria 1.4.6</a> (Level AAA)</li>\
-<li><a href="https://www.w3.org/TR/WCAG20/#contrast-ratiodef">WCAG 2.0 Glossary - Contrast Ratio</a></li>\
-<li><a href="https://www.w3.org/TR/WCAG20/relative-luminance.xml">WCAG 2.0 - MathML version of the relative luminance definition</a></li>\
+    <li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">WCAG 2.0 success criteria 1.4.3</a> (Level AA)</li> \
+    <li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast7">WCAG 2.0 success criteria 1.4.6</a> (Level AAA)</li> \
+    <li><a href="https://www.w3.org/TR/WCAG20/#contrast-ratiodef">WCAG 2.0 Glossary - Contrast Ratio</a></li> \
+    <li><a href="https://www.w3.org/TR/WCAG20/relative-luminance.xml">WCAG 2.0 - MathML version of the relative luminance definition</a></li> \
 </ul>\
-<h3>Color to edit </h3> \
-<p> It is either the foreground or the background. Default is foreground.</p> \
-<p> The color you choose will be modified until we find a valid color. The other color won't change. </p> \
-<h3>The algorithms</h3>\
+<h3 id="user-help_color-to-edit">Color to edit </h3> \
+<p> It is either the text or background color. Default is text color.</p> \
+<p> The color you choose will be modified until we find a valid color. \
+    The other color won't change. </p> \
+<h3 id="user-help_gimme-algorithms">Gimme / The algorithms</h3>\
 <h4>“Valid colors and very close to initial color”</h4> \
 <p>\
     This is the default algorithm. \

diff --git a/webapp/src/main/resources/i18n/contrast-finder_utf8_en.properties b/webapp/src/main/resources/i18n/contrast-finder_utf8_en.properties
@@ -9,7 +9,7 @@ result.title.colors=colors
 result.title.foregroundColor=text
 result.title.backgroundColor=background
 result.title.minRation=min ratio
-form.fillInFields=Please fill in the following fields :
+form.fillInFields=Please fill in the following fields:
 form.description=Contrast-Finder finds correct color contrasts for web accessibility
 form.help=Color in hexadecimal, RGB or with CSS color keywords. <br> \
           Example: <code>#FFFFFF</code>, <code>rgb(255,255,255)</code> or <code>white</code>
@@ -22,7 +22,7 @@ form.ratio=Minimum ratio
 form.contrastOld=Old contrast
 form.contrastNew=New contrast
 form.validate=Find valid colors
-form.validContrast=Valid Contrast :
+form.validContrast=Valid Contrast:
 form.validContrastDesc=The chosen colors are already good
 ##### For [form.resultNumber]
 ##### ---> Do not translate "choice", it is an internal ID
@@ -65,8 +65,24 @@ footer.poweredBy=Powered by
 footer.availableUnder=available under
 footer.link-twitter=Follow Contrast-Finder on Twitter
 footer.link-git=Contributing to Contrast-Finder on GitHub
-home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
-<h3>Text color / Foreground</h3> \
+home.noResultTxt=<h2 id="what-is-contrast-finder">What is <em>Contrast Finder</em>?</h2> \
+<p>  <em>Contrast-Finder</em> is a tool which computes the contrast between \
+     two colors (background, foreground) and checks if the contrast is valid. \
+     When the contrast is not valid, the main target is to suggest some correct colors contrasts. \
+</p> \
+<p> <strong>Contrast-Finder</strong> is designed to be used by webdesigners, web developers \
+    or web accessibility professionals to improve the readability of HTML pages and websites. \
+</p> \
+<h2 id="user-help-contrast-finder">Help / How to use this tool?</h2> \
+<p> The <strong>Contrast-Finder</strong> interface is a form with five mandatory fields.  </p> \
+<ul> \
+    <li> <a href="#user-help_text-color">Text color</a> </li> \
+    <li> <a href="#user-help_background-color">Background color</a> </li> \
+    <li> <a href="#user-help_minimum-ratio">Minimum ratio</a> </li> \
+    <li> <a href="#user-help_color-to-edit">Color to edit</a> </li> \
+    <li> <a href="#user-help_gimme-algorithms">Gimme</a> </li> \
+</ul> \
+<h3 id="user-help_text-color">Text color / Foreground</h3> \
 <p> \
     This is the <strong>color</strong> of the <strong>text</strong>. \
     You can fill in this field with <em>color keyword</em>, an <em>hexadecimal</em> value, \
@@ -91,18 +107,18 @@ home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
     You can also use a short syntax like <code>255,255,255</code>, \
     which be interpreted as <code>rgb(255,255,255)</code>.  \
 </p> \
-<h3>Background color</h3> \
+<h3 id="user-help_background-color">Background color</h3> \
 <p> \
     This is the color of the <strong>background</strong>. <br>\
-    This field works like the text color field.\
+    This field works just like the text color field.\
 </p>\
-<h3>Minimum <em>ratio</em></h3>\
+<h3 id="user-help_minimum-ratio">Minimum <em>ratio</em></h3>\
 <p> Three possible values <strong>3</strong>, <strong>4.5</strong> and <strong>7</strong>. </p>\
 <p> How to choose a ratio? It depends on the following elements: </p>\
 <ul> \
     <li> Level of accessibility wanted: <strong>AA</strong> or <strong>AAA</strong>. </li> \
     <li> Size of the text. </li> \
-    <li> Is the text bold or not. </li> \
+    <li> Is the text bold or not? </li> \
 </ul> \
 <h4> Level <em>AA</em> </h4> \
 <p> Two elements (size and bold) gives four combinations: </p> \
@@ -113,10 +129,10 @@ home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
     <li> Text bold + text size &gt;  <code>14px</code>: ratio = <strong>3</strong> </li> \
 </ul> \
 <h4> Level <em>AAA</em> </h4> \
-<p> For level <strong>AAA</strong> the logic is the same one, only the ratio increases in the the following way: </p> \
+<p> For level <strong>AAA</strong> the logic is the same, only the ratio increases in the the following way: </p> \
 <ul> \
-    <li> <strong>4.5</strong> ratio become <strong>7</strong> </li> \
-    <li> <strong>3</strong> ratio become <strong>4.5</strong> </li> \
+    <li> <strong>4.5</strong> ratio becomes <strong>7</strong> </li> \
+    <li> <strong>3</strong> ratio becomes <strong>4.5</strong> </li> \
 </ul>  \
 <h4> Text size understanding </h4> \
 <ul> \
@@ -129,15 +145,16 @@ home.noResultTxt=<h2 id="user-help-contrast-finder">Help</h2> \
   <a href="https://www.w3.org/TR/WCAG20/#larger-scaledef">defintion of large-scale text from WCAG</a>.  </p> \
 <h4> All details about the contrast ratio  </h4> \
 <ul>\
-<li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">WCAG 2.0 success criteria 1.4.3</a> (Level AA)</li>\
-<li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast7">WCAG 2.0 success criteria 1.4.6</a> (Level AAA)</li>\
-<li><a href="https://www.w3.org/TR/WCAG20/#contrast-ratiodef">WCAG 2.0 Glossary - Contrast Ratio</a></li>\
-<li><a href="https://www.w3.org/TR/WCAG20/relative-luminance.xml">WCAG 2.0 - MathML version of the relative luminance definition</a></li>\
+    <li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast">WCAG 2.0 success criteria 1.4.3</a> (Level AA)</li> \
+    <li><a href="https://www.w3.org/TR/WCAG20/#visual-audio-contrast7">WCAG 2.0 success criteria 1.4.6</a> (Level AAA)</li> \
+    <li><a href="https://www.w3.org/TR/WCAG20/#contrast-ratiodef">WCAG 2.0 Glossary - Contrast Ratio</a></li> \
+    <li><a href="https://www.w3.org/TR/WCAG20/relative-luminance.xml">WCAG 2.0 - MathML version of the relative luminance definition</a></li> \
 </ul>\
-<h3>Color to edit </h3> \
-<p> It is either the foreground or the background. Default is foreground.</p> \
-<p> The color you choose will be modified until we find a valid color. The other color won't change. </p> \
-<h3>The algorithms</h3>\
+<h3 id="user-help_color-to-edit">Color to edit </h3> \
+<p> It is either the text or background color. Default is text color.</p> \
+<p> The color you choose will be modified until we find a valid color. \
+    The other color won't change. </p> \
+<h3 id="user-help_gimme-algorithms">Gimme / The algorithms</h3>\
 <h4>“Valid colors and very close to initial color”</h4> \
 <p>\
     This is the default algorithm. \