ee71de833c
* Used table instead of list * Font and size selection * Display language codes Change-Id: Ic3f7ef1bd1d1e5ff5b6fa7f6d8a8b9b7bf878068
102 lines
2.5 KiB
HTML
102 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Autonym font Example</title>
|
|
<meta name="description" content="" />
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
|
<script src="../lib/jquery.uls/src/jquery.uls.data.js"></script>
|
|
<script src="../lib/jquery.uls/src/jquery.uls.data.utils.js"></script>
|
|
<style>
|
|
|
|
@font-face {
|
|
font-family: 'Autonym';
|
|
src: url('../data/fontrepo/fonts/Autonym/Autonym.eot');
|
|
src: local('Autonym'),
|
|
url('../data/fontrepo/fonts/Autonym/Autonym.woff') format('woff'),
|
|
url('../data/fontrepo/fonts/Autonym/Autonym.ttf') format('truetype');
|
|
font-style: normal;
|
|
}
|
|
|
|
table, th, td {
|
|
border: 1px solid #ddd;
|
|
border-collapse:collapse;
|
|
padding: 5px;
|
|
}
|
|
|
|
td.lang, td.index {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Autonym Font</h1>
|
|
<p>Following content in this page uses <a href="https://github.com/santhoshtr/AutonymFont">Autonym</a>
|
|
font for displaying language names without font issues.</p>
|
|
<hr/>
|
|
<div>
|
|
<select id="ff">
|
|
<option value="sans-serif">Select Font</option>
|
|
<option value="Autonym">Autonym</option>
|
|
<option value="sans-serif">sans-serif</option>
|
|
<option value="Autonym, sans-serif">Autonym, sans-serif</option>
|
|
<option value="sans-serif, Autonym">sans-serif, Autonym</option>
|
|
</select>
|
|
<select id="fs">
|
|
<option value="8">Select size (px)</option>
|
|
<option value="8">8</option>
|
|
<option value="9">9</option>
|
|
<option value="10">10</option>
|
|
<option value="11">11</option>
|
|
<option value="12">12</option>
|
|
<option value="13">13</option>
|
|
<option value="14">14</option>
|
|
<option value="16">16</option>
|
|
<option value="20">20</option>
|
|
<option value="24">24</option>
|
|
<option value="30">30</option>
|
|
<option value="36">36</option>
|
|
<option value="48">48</option>
|
|
</select>
|
|
<table class="autonym"><tr></tr></table>
|
|
<div>A dropdown example:
|
|
<select class="dropdown autonym">
|
|
</select>
|
|
</div>
|
|
<script>
|
|
var index = 0;
|
|
|
|
$( '#ff' ).change( function () {
|
|
$( '.autonym').css('font-family',$(this).val() );
|
|
});
|
|
$( '#fs' ).change( function () {
|
|
$( '.autonym').css('font-size', $(this).val() + 'px' );
|
|
});
|
|
|
|
|
|
$.each( $.uls.data.languages, function( langCode) {
|
|
var autonym = $.uls.data.getAutonym( langCode );
|
|
$( '.dropdown' ).append(
|
|
$( '<option>')
|
|
.attr( 'lang', langCode )
|
|
.text( autonym )
|
|
|
|
)
|
|
$( 'table' ).append(
|
|
$( '<tr>' ).append(
|
|
$( '<td class=index>')
|
|
.text( index+1 ),
|
|
$( '<td class=lang>')
|
|
.text( langCode ),
|
|
$( '<td class=name>')
|
|
.attr( 'lang', langCode )
|
|
.text( autonym )
|
|
)
|
|
);
|
|
index++;
|
|
} );
|
|
</script>
|
|
</div>
|
|
</body>
|