<!DOCTYPE html>
<html>
<head>
    <title>Noto Warang Citi</title>

    <meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=UTF-8" />

       <script type="text/javascript">

         function sliderChange() {
            var slider = document.getElementById("fontSizeSlider");
            var sizeInput = document.getElementById("fontSizeInput");
            sizeInput.value = slider.value;
            sizeInput.oninput();
         }

         function changeSize() {
              var selector = document.getElementById('fontSizeInput');
              var selectedSize = selector.value + "px";
              samples = document.getElementsByClassName("sample");
              for (var i = 0; i < samples.length; i++) {
                samples[i].style.fontSize = selectedSize;
            }
        }

        function printPrep() {
            var header = document.getElementById("header");
            header.style.display = "none";
            window.print();
            header.style.display = "block";
         }

        function init(reset) {
            var sizeInput = document.getElementById("fontSizeInput");
            var fontSizeSlider = document.getElementById("fontSizeSlider");
            fontSizeSlider.value = 48;
            sizeInput.value = 48;
            sizeInput.oninput();
        }
    </script>

</head>

<style>

#header {
		top:0;
		left:0;
		position: fixed;
		margin: 0px;
		width: 100%;
		background: #fff;
	}

/*#wrapper {*/
    /*white-space: pre;*/
/*}*/

#fontSizeInput {
    width: 40px;
}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;

    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(30%);

    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;

    /*required for proper track sizing in FF*/
    width: 400px;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 400px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: red;
    margin-top: -4px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 400px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: red;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

rt, rp {font-size: 20%;} /* = Webkit value */


@font-face {
	font-family: "Noto Sans Warang Citi";
	src: url("fonts/NotoSansWarangCiti-Regular.otf");
	font-weight: 400;
	font-style: normal;
}

ruby {
    ruby-position:under;
    ruby-align: center;
}

.desc {
    font-family: "Noto Sans", sans-serif;
    font-size: 48px;
    line-height: inherit;
}

.sample
{
	font-family: "Noto Sans Warang Citi", "Noto Sans", sans-serif;
	font-size: 48px;
	line-height: 160%;
	font-weight: 400;
	font-variant-ligatures: discretionary-ligatures;
	moz-font-feature-settings: "dlig";
	webkit-font-feature-settings: "dlig";
	font-feature-settings: "dlig";
}
</style>

<body onload="init()">
    <div id="header" style="
	padding-top:8px;
	z-index:150;
	color: #E4E4E4;
	">
    <span>
    <input id="fontSizeSlider" type="range" name="amountRange" min="6" max="600" value="48" oninput="sliderChange()" />
    <input id="fontSizeInput" type="number" name="amountInput" min="6" max="600" value="48" oninput="changeSize()" />
        <button onclick="printPrep()">Print</button>

        </span>
    </div>

<div id="wrapper">
<br><br>

<span class="sample" contenteditable="true" onselect="textSelected()">
Noto Sans Warang Citi Kerning
<br><br>
𑢡‍𑣀𑢢‍𑣀𑢣‍𑣀𑢤‍𑣀𑢥‍𑣀𑢦‍𑣀𑢧‍𑣀𑢨‍𑣀𑢩‍𑣀<br>
𑢪‍𑣀𑢫‍𑣀𑢬‍𑣀𑢭‍𑣀𑢮‍𑣀𑢯‍𑣀𑢰‍𑣀𑢱‍𑣀𑢲‍𑣀𑢳‍𑣀𑢴‍𑣀𑢵‍𑣀𑢶‍𑣀𑢷‍𑣀𑢸‍𑣀𑢹‍𑣀𑢺‍𑣀𑢻‍𑣀𑢼‍𑣀𑢽‍𑣀𑢾‍𑣀𑢿‍𑣀<br>
𑣁‍𑣀𑣂‍𑣀𑣃‍𑣀𑣄‍𑣀𑣅‍𑣀𑣆‍𑣀𑣇‍𑣀𑣈‍𑣀𑣉‍𑣀<br>
𑣊‍𑣀𑣋‍𑣀𑣌‍𑣀𑣍‍𑣀𑣎‍𑣀𑣏‍𑣀𑣐‍𑣀𑣑‍𑣀𑣒‍𑣀𑣓‍𑣀𑣔‍𑣀𑣕‍𑣀𑣖‍𑣀𑣗‍𑣀𑣘‍𑣀𑣙‍𑣀𑣚‍𑣀𑣛‍𑣀𑣜‍𑣀𑣝‍𑣀𑣞‍𑣀𑣟‍𑣀<br>
<br>
𑢪‍𑣔𑢫‍𑣔𑢬‍𑣔𑢭‍𑣔𑢮‍𑣔𑢯‍𑣔𑢰‍𑣔𑢱‍𑣔𑢲‍𑣔𑢳‍𑣔𑢴‍𑣔𑢵‍𑣔𑢶‍𑣔𑢷‍𑣔𑢸‍𑣔𑢹‍𑣔𑢺‍𑣔𑢻‍𑣔𑢼‍𑣔𑢽‍𑣔𑢾‍𑣔𑢿‍𑣔<br>
𑣊‍𑣔𑣋‍𑣔𑣌‍𑣔𑣍‍𑣔𑣎‍𑣔𑣏‍𑣔𑣐‍𑣔𑣑‍𑣔𑣒‍𑣔𑣓‍𑣔𑣔‍𑣔𑣕‍𑣔𑣖‍𑣔𑣗‍𑣔𑣘‍𑣔𑣙‍𑣔𑣚‍𑣔𑣛‍𑣔𑣜‍𑣔𑣝‍𑣔𑣞‍𑣔𑣟‍𑣔<br>
<br>
𑢪‍𑣘𑢫‍𑣘𑢬‍𑣘𑢭‍𑣘𑢮‍𑣘𑢯‍𑣘𑢰‍𑣘𑢱‍𑣘𑢲‍𑣘𑢳‍𑣘𑢴‍𑣘𑢵‍𑣘𑢶‍𑣘𑢷‍𑣘𑢸‍𑣘𑢹‍𑣘𑢺‍𑣘𑢻‍𑣘𑢼‍𑣘𑢽‍𑣘𑢾‍𑣘𑢿‍𑣘<br>
𑣊‍𑣘𑣋‍𑣘𑣌‍𑣘𑣍‍𑣘𑣎‍𑣘𑣏‍𑣘𑣐‍𑣘𑣑‍𑣘𑣒‍𑣘𑣓‍𑣘𑣔‍𑣘𑣕‍𑣘𑣖‍𑣘𑣗‍𑣘𑣘‍𑣘𑣙‍𑣘𑣚‍𑣘𑣛‍𑣘𑣜‍𑣘𑣝‍𑣘𑣞‍𑣘𑣟‍𑣘<br>
𑢪‍𑣚𑢫‍𑣚𑢬‍𑣚𑢭‍𑣚𑢮‍𑣚𑢯‍𑣚𑢰‍𑣚𑢱‍𑣚𑢲‍𑣚𑢳‍𑣚𑢴‍𑣚𑢵‍𑣚𑢶‍𑣚𑢷‍𑣚𑢸‍𑣚𑢹‍𑣚𑢺‍𑣚𑢻‍𑣚𑢼‍𑣚𑢽‍𑣚𑢾‍𑣚𑢿‍𑣚<br>
𑣊‍𑣚𑣋‍𑣚𑣌‍𑣚𑣍‍𑣚𑣎‍𑣚𑣏‍𑣚𑣐‍𑣚𑣑‍𑣚𑣒‍𑣚𑣓‍𑣚𑣔‍𑣚𑣕‍𑣚𑣖‍𑣚𑣗‍𑣚𑣘‍𑣚𑣙‍𑣚𑣚‍𑣚𑣛‍𑣚𑣜‍𑣚𑣝‍𑣚𑣞‍𑣚𑣟‍𑣚<br>
𑢪‍𑣒𑢫‍𑣒𑢬‍𑣒𑢭‍𑣒𑢮‍𑣒𑢯‍𑣒𑢰‍𑣒𑢱‍𑣒𑢲‍𑣒𑢳‍𑣒𑢴‍𑣒𑢵‍𑣒𑢶‍𑣒𑢷‍𑣒𑢸‍𑣒𑢹‍𑣒𑢺‍𑣒𑢻‍𑣒𑢼‍𑣒𑢽‍𑣒𑢾‍𑣒𑢿‍𑣒<br>
𑣊‍𑣒𑣋‍𑣒𑣌‍𑣒𑣍‍𑣒𑣎‍𑣒𑣏‍𑣒𑣐‍𑣒𑣑‍𑣒𑣒‍𑣒𑣓‍𑣒𑣔‍𑣒𑣕‍𑣒𑣖‍𑣒𑣗‍𑣒𑣘‍𑣒𑣙‍𑣒𑣚‍𑣒𑣛‍𑣒𑣜‍𑣒𑣝‍𑣒𑣞‍𑣒𑣟‍𑣒<br>
𑢪‍𑣜𑢫‍𑣜𑢬‍𑣜𑢭‍𑣜𑢮‍𑣜𑢯‍𑣜𑢰‍𑣜𑢱‍𑣜𑢲‍𑣜𑢳‍𑣜𑢴‍𑣜𑢵‍𑣜𑢶‍𑣜𑢷‍𑣜𑢸‍𑣜𑢹‍𑣜𑢺‍𑣜𑢻‍𑣜𑢼‍𑣜𑢽‍𑣜𑢾‍𑣜𑢿‍𑣜<br>

𑣊‍𑣜𑣋‍𑣜𑣌‍𑣜𑣍‍𑣜𑣎‍𑣜𑣏‍𑣜𑣐‍𑣜𑣑‍𑣜𑣒‍𑣜𑣓‍𑣜𑣔‍𑣜𑣕‍𑣜𑣖‍𑣜𑣗‍𑣜𑣘‍𑣜𑣙‍𑣜𑣚‍𑣜𑣛‍𑣜𑣜‍𑣜𑣝‍𑣜𑣞‍𑣜𑣟‍𑣜<br>
<br>
<br>
</span>
</div>
</body>
</html>
