@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(http://fonts.googleapis.com/css?family=Diplomata);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic);
@font-face
{
font-family: sansation;
src: url(http://www.w3schools.com/cssref/sansation_light.woff);
}
input {
width: 50px;
}
.container, .controls {
border-style:dotted;
border-width:1px;
width: 49%;
height: 420px;
position: relative;
display: inline-block;
vertical-align: top;
overflow: scroll;
}
.controls {
width: 49%;
}
.box {
}
.a {
}
.b {
}
.c {
}
.resetall {
float:right;
}
div.test /* totally stole this from w3schools.com */
{
white-space:nowrap;
width:200px;
height: 6em;
overflow: hidden;
border:1px solid #000000;
}
Troy's Text Property Demo:<br>
<div class="container">
<p class="box a">A class 'a' paragraph.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis ipsum iaculis, gravida velit vitae, congue nunc.</p>
<p class="box b">A class 'b' paragraph. Sed at leo vel nulla aliquet sodales quis quis turpis. Mauris consectetur ligula nec nisl bibendum congue.</p>
<p class="box c">A class 'c' paragraph. Nam sagittis non tellus quis fermentum. Mauris aliquet, neque vitae aliquet dignissim, dolor arcu tempus tortor, vel convallis felis elit sit amet lectus.</p>
<p><span class="box a">A </span><span class="box b">mix </span><span class="box c">of </span><em class="box a">inline </em><span class="box b">elements, </span><span class="box c">including </span><span class="box a">span, </span><em class="box b">em, </em><span class="box c">and </span><strong class="box a">strong, </strong><span class="box b">with </span><span class="box c">all </span><span class="box a">three </span><span class="box b">classes. </span><strong class="box c">Nunc </strong><span class="box a">in </span><span class="box b">pulvinar </span><em class="box c">arcu, </em><span class="box a">viverra tincidunt </span><strong class="box b">erat.</strong><span class="box c"> Quisque sed</span><span class="box a"> est </span><span class="box b">eget </span><span class="box c">neque </span><span class="box a">aliquet</span><span class="box b"> ultricies. </span></p>
<p class="box a b c">ThisIsAGiantLongStringMeantToDemonstrateWordWrapThisParagraphIsClassABandC</p>
<p class="box a b c">Tab	Tab	Tab	Tab</p>
<div class="test box a b c" >Text overflow example.<br> White-space: nowrap;<br> Overflow: hidden;<br> blah blah blah blah blah blah blah blah<br> blahblahblahblahblahblahblahblahblahblahblahblah
</div>
<p><span class="box a b c">This paragraph shows off the difference that font-style makes. Set Font-Family to "Libre Baskerville" and then compare the different settings for "font-style". </span><em> Just for giggles, the quick brown fox jumped over the lazy dog</em><br>
<span class="box a">A Class A span</span><br>
<span class="box b">A Class B span</span><br>
<span class="box c">A Class C span</span><br>
</p>
<hr>
Use the "Open Sans" font family to see font weights in action, weights 300, 400, 600, 700, and 800 are available.<br>
Use the "Libre Baskerville" font family to see the difference font-style makes.
</div>
<div class="controls">Class to apply styling:
<select id="classSelect">
<option value=".box">All</option>
<option value=".a">A</option>
<option value=".b">B</option>
<option value=".c">C</option>
</select>
<button class="resetall" onclick="clearAll()">Reset All</button>
<br>Set Visibility:
<select onChange="changeStyle(this, 'visibility')">
<option default value="">Reset</option>
<option value="hidden">Hidden</option>
<option value="visible">Visible</option>
</select>
<br>Set Text Color:
<select onChange="changeStyle(this, 'color')">
<option default value="">Reset</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="fuchsia">Fuchsia</option>
<option value="antiquewhite">Antique White</option>
<option value="black">Black</option>
</select>
<br>Set Font Family:
<select onChange="changeStyle(this, 'fontFamily')">
<option default value="">Reset</option>
<option value="sans-serif">Sans-serif</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="impact">Impact</option>
<option value="cursive">Cursive</option>
<option value="Ubuntu Mono">Ubuntu Mono</option>
<option value="Diplomata">Diplomata</option>
<option value="sansation">@font-face Sansation.woff</option>
<option value="Open Sans">Open Sans (font-weight)</option>
<option value="Libre Baskerville">Libre Baskerville (style)</option>
</select>
<br>Set Text Decoration:
<select onChange="changeStyle(this, 'textDecoration')">
<option default value="">Reset</option>
<option value="underline">Underline</option>
<option value="overline">Overline</option>
<option value="line-through">Line-through</option>
<option value="underline dotted navy">Navy dotted underline (FF)</option>
<option value="purple double overline">Purple double overline (FF)</option>
<option value="red solid line-through">Red solid line-through (FF)</option>
</select>
<br>Set Font Stretch (FF9, IE9):
<select onChange="changeStyle(this, 'fontStretch')">
<option default value="">Reset</option>
<option value="ultra-condensed">Ultra-condensed</option>
<option value="extra-condensed">Extra-condensed</option>
<option value="condensed">condensed</option>
<option value="semi-condensed">Semi-condensed</option>
<option value="normal">Normal</option>
<option value="semi-expanded">Semi-expanded</option>
<option value="expanded">Expanded</option>
<option value="extra-expanded">Extra-expanded</option>
<option value="ultra-expanded">Ultra-expanded</option>
</select>
<br>Set Font kerning:
<select onChange="changeStyle(this, 'fontKerning')">
<option default value="">Reset</option>
<option value="auto">Auto</option>
<option value="normal">Normal</option>
<option value="none">None</option>
</select>
<br>Set Font variant:
<select onChange="changeStyle(this, 'fontVariant')">
<option default value="">Reset</option>
<option value="normal">Normal</option>
<option value="small-caps">Small-caps</option>
</select>
<br>Set Text Alignment:
<select onChange="changeStyle(this, 'textAlign')">
<option default value="">Reset</option>
<option value="left">Left</option>
<option value="right">Right</option>
<option value="center">Center</option>
<option value="justify">Justify</option>
</select>
<br>Set Word Wrap:
<select onChange="changeStyle(this, 'wordWrap')">
<option default value="">Reset</option>
<option value="break-word">Break-word</option>
<option value="normal">Normal</option>
</select>
<br>Set White Space:
<select onChange="changeStyle(this, 'whiteSpace')">
<option default value="">Reset</option>
<option value="normal">Normal</option>
<option value="pre">Pre</option>
<option value="nowrap">Nowrap</option>
<option value="pre-wrap">Pre-wrap</option>
<option value="pre-line">Pre-line</option>
</select>
<br>Set Text Overflow:
<select onChange="changeStyle(this, 'textOverflow')">
<option default value="">Reset</option>
<option value="clip">Clip</option>
<option value="ellipsis">Ellipsis</option>
</select>
<br>Set Text Transform:
<select onChange="changeStyle(this, 'textTransform')">
<option default value="">Reset</option>
<option value="uppercase">Uppercase</option>
<option value="lowercase">Lowercase</option>
<option value="capitalize">Capitalize</option>
<option value="full-width">Full-width</option>
</select>
<br>Set Word-break:
<select onChange="changeStyle(this, 'wordBreak')">
<option default value="">Reset</option>
<option value="break-all">Break-all</option>
<option value="normal">Normal</option>
<option value="keep-all">Keep-all (FF, IE)</option>
</select>
<br>Set Hyphens (low browser support):
<select onChange="changeStyle(this, 'hyphens')">
<option default value="">Reset</option>
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
<br>Set Font Style (use Libre Baskerville):
<select onChange="changeStyle(this, 'fontStyle')">
<option default value="">Reset</option>
<option value="normal">Normal</option>
<option value="italic">Italic</option>
<option value="oblique">Oblique</option>
</select>
<br>Set Font Weight:
<select onChange="changeStyle(this, 'fontWeight')">
<option default value="">Reset</option>
<option value="bold">Bold</option>
<option value="bolder">Bolder</option>
<option value="normal">Normal</option>
<option value="lighter">Lighter</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="800">800</option>
<option value="900">900</option>
</select>
<br>Set Font Size:
<input type="range" value="0" min="7" max="40" onChange="changeStyle(this, 'fontSize', 'px')" />
<button onclick="{changeStyle(this, 'fontSize'); this.previousSibling.value=0;}">Reset</button>
<br>Set text-indent:
<input type="range" value="0" min="0" max="10" onChange="changeStyle(this, 'textIndent', 'em')" />
<button onclick="{changeStyle(this, 'textIndent'); this.previousSibling.value=0;}">Reset</button>
<br>Set letter-spacing:
<input type="range" value="0" min="-3" max="10" onChange="changeStyle(this, 'letterSpacing', 'px')" />
<button onclick="{changeStyle(this, 'letterSpacing'); this.previousSibling.value=0;}">Reset</button>
<br>Set word-spacing:
<input type="range" value="0" min="-3" max="15" onChange="changeStyle(this, 'wordSpacing', 'px')" />
<button onclick="{changeStyle(this, 'wordSpacing'); this.previousSibling.value=0;}">Reset</button>
<br>Set tab-size:
<input type="range" value="8" min="0" max="15" onChange="changeStyle(this, 'tabSize', '')" />
<button onclick="{changeStyle(this, 'tabSize'); this.previousSibling.value=0;}">Reset</button>
<hr>Text Shadow:
<br>Set Shadow Xoffset:
<input id="tsx" type="range" value="0" min="0" max="15" onChange="changeBoxShadow('','text')" />
<br>Set Shadow Yoffset:
<input id="tsy" type="range" value="0" min="0" max="15" onChange="changeBoxShadow('','text')" />
<br>Set Shadow Blur Size:
<input id="tblur" type="range" value="0" min="0" max="15" onChange="changeBoxShadow('','text')" />
<br>Set Shadow Color:
<select id="tcolor" onChange="changeBoxShadow('','text')">
<option default value="">Reset</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="cyan">Cyan</option>
<option value="fuchsia">Fuchsia</option>
<option value="antiquewhite">Antique White</option>
<option value="black">Black</option>
</select><br>
<button onclick="{document.getElementById('tsx').value=0; document.getElementById('tsy').value=0; document.getElementById('tblur').value=0;
document.getElementById('tcolor').options[0].selected='selected';
changeBoxShadow('clear','text');}">Reset</button>
</div>
<br>Class A Style: "<span id="classStyleA"></span>"
<br>Class B Style: "<span id="classStyleB"></span>"
<br>Class C Style: "<span id="classStyleC"></span>"
<br>Current String: "<span id="currentString"></span>"
// by Troy Whorten Feb 26, 2014
// forked by Troy Whorten Mar 13, 2014
function changeBoxShadow(clear, text) {
//get the class to apply the style change to
var styleClassSel = document.getElementById("classSelect");
var styleClass = styleClassSel[styleClassSel.selectedIndex].value;
var ssting="";
//get all the boxes of the selected class
var boxes = document.querySelectorAll(styleClass);
if(!text)
{
sx = "bsx";
sy = "bsy";
sb = "bsblur";
sc = "bscolor";
prop = "boxShadow";
}
else
{
sx = "tsx";
sy = "tsy";
sb = "tblur";
sc = "tcolor";
prop = "textShadow";
}
//get values
var xoff = document.getElementById(sx).value;
var yoff = document.getElementById(sy).value;
var blur = document.getElementById(sb).value;
var color = document.getElementById(sc).options[document.getElementById(sc).selectedIndex].value;
if(!clear && color == "")
color = "black";
if(!clear)
sstring = xoff + "px " + yoff + "px " + blur + "px " + color;
else
sstring = "";
for (var i = 0; i < boxes.length; i++) {
string = "boxes[i].style."+ prop +" ='" + sstring + "'";
document.getElementById("currentString").innerHTML = string;
eval(string);
}
}
function changeStyle(el, prop, unit, trans) {
//get the class to apply the style change to
var styleClassSel = document.getElementById("classSelect");
var styleClass = styleClassSel[styleClassSel.selectedIndex].value;
var style;
var string;
//get the value of the style that changed
if (el.tagName == "SELECT") style = el[el.selectedIndex].value;
else style = el.value;
//if style is undefined, make it blank
if (!style) style = "";
//if unit is undefined, make it blank
if (!unit) unit = "";
//get all the boxes of the selected class
var boxes = document.querySelectorAll(styleClass);
//apply the style change for non-transforms
if (!trans) for (var i = 0; i < boxes.length; i++) {
string = "boxes[i].style." + prop + "='" + style + unit + "'";
document.getElementById("currentString").innerHTML = string;
eval(string);
}
//apply transform styling
if (trans) for (var i = 0; i < boxes.length; i++) {
var transText;
var curTrans;
if (trans == "clear") trans = "";
// browser feature detection
if (boxes[i].style.Transform === "" || boxes[i].style.Transform) {
curTrans = boxes[i].style.Transform.toLowerCase();
string = "boxes[i].style.transform";
}
if (boxes[i].style.webkitTransform === "" || boxes[i].style.webkitTransform) {
curTrans = boxes[i].style.webkitTransform.toLowerCase();
string = "boxes[i].style.webkitTransform";
}
if (boxes[i].style.oTransform === "" || boxes[i].style.oTransform) {
curTrans = boxes[i].style.oTransform.toLowerCase();
string = "boxes[i].style.oTransform";
}
var inString = curTrans.search(prop.toLowerCase());
//alert("inString = " + inString);
// if we find this transformation, find the end, cut it out
if (inString != -1) {
var cutEnd = curTrans.substr(inString).search(/[)]/i);
transText = curTrans.substr(0, inString) + curTrans.substr(inString + cutEnd + 1);
} else transText = curTrans;
//append prop to transformation string if trans isn't empty
if (trans) transText = transText + " " + trans;
string = string + '="' + transText + '"';
document.getElementById("currentString").innerHTML = string;
eval(string);
}
// display the applied styling in the appropriate span
var abox = document.querySelector(".a");
var bbox = document.querySelector(".b");
var cbox = document.querySelector(".c");
document.getElementById("classStyleA").innerHTML = abox.style.cssText;
document.getElementById("classStyleB").innerHTML = bbox.style.cssText;
document.getElementById("classStyleC").innerHTML = cbox.style.cssText;
}
function clearAll() {
var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
string = 'boxes[i].setAttribute("style","")';
document.getElementById("currentString").innerHTML = string;
eval(string);
}
// display the applied styling in the appropriate span
var abox = document.querySelector(".a");
var bbox = document.querySelector(".b");
var cbox = document.querySelector(".c");
document.getElementById("classStyleA").innerHTML = abox.style.cssText;
document.getElementById("classStyleB").innerHTML = bbox.style.cssText;
document.getElementById("classStyleC").innerHTML = cbox.style.cssText;
}