Difference between revisions of "Text Spacing Favlet"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with "<html> Increase text spacing to test WCAG 2.1 Text Spacing SC. <div style="padding-bottom:1em;"> <a href="javascript:(function(){ var element=document.createElement('script...")
 
m
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>
+
Note: It is recommended to use the Stylus extension for Firefox or Chrome to test this to make sure this favlet is not blocked by certain page policies.  Install Stylus (not the stylish extension) and then left click or activate the toolbar icon.  Choose manage styles and then choose New Style.  The CSS below can be put into Stylus - name and then save the style.  then the style should be activate.  You can check or uncheck the style from running by clicking/activating the Stylus icon on the toolbar and checking the stylus to have active for the page.
 +
 
 +
<pre>
 +
* {
 +
  line-height: 1.5 !important;
 +
}
 +
p {
 +
  margin-bottom: 2em !important;
 +
}
 +
* {
 +
  letter-spacing: 0.12em !important;
 +
}
 +
* {
 +
  word-spacing: 0.16em !important;
 +
}
 +
</pre>
 
Increase text spacing to test WCAG 2.1 Text Spacing SC.
 
Increase text spacing to test WCAG 2.1 Text Spacing SC.
  
 +
(See [[Install a Favlet]] for instructions on how to add this Favlet to your browser).
 +
 +
<html>
 
<div style="padding-bottom:1em;">
 
<div style="padding-bottom:1em;">
 
   <a href="javascript:(function(){ var element=document.createElement('script'); element.setAttribute('src','https://mraccess77.github.io/favlets/textSpacing.js'); document.body.appendChild(element); } ) ();"> Text Spacing Favlet </a>
 
   <a href="javascript:(function(){ var element=document.createElement('script'); element.setAttribute('src','https://mraccess77.github.io/favlets/textSpacing.js'); document.body.appendChild(element); } ) ();"> Text Spacing Favlet </a>
 
</div>
 
</div>
 +
 +
Code below is provided to demonstrate what is being changed.  Favlet actually runs latest JavaScript from github site.
 
<iframe style="width:100%;" src="https://mraccess77.github.io/favlets/textSpacing.js">
 
<iframe style="width:100%;" src="https://mraccess77.github.io/favlets/textSpacing.js">
 
</iframe>
 
</iframe>

Latest revision as of 16:57, 10 December 2019

Note: It is recommended to use the Stylus extension for Firefox or Chrome to test this to make sure this favlet is not blocked by certain page policies. Install Stylus (not the stylish extension) and then left click or activate the toolbar icon. Choose manage styles and then choose New Style. The CSS below can be put into Stylus - name and then save the style. then the style should be activate. You can check or uncheck the style from running by clicking/activating the Stylus icon on the toolbar and checking the stylus to have active for the page.

* {
   line-height: 1.5 !important;
 }
 p {
   margin-bottom: 2em !important;
 }
 * {
   letter-spacing: 0.12em !important;
 }
 * {
   word-spacing: 0.16em !important;
 }

Increase text spacing to test WCAG 2.1 Text Spacing SC.

(See Install a Favlet for instructions on how to add this Favlet to your browser).

Text Spacing Favlet

Code below is provided to demonstrate what is being changed. Favlet actually runs latest JavaScript from github site.