bryce/mediawiki-extensions-UniversalLanguageSelector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve test page for autonym font

Browse Source 
* Used table instead of list
* Font and size selection
* Display language codes

Change-Id: Ic3f7ef1bd1d1e5ff5b6fa7f6d8a8b9b7bf878068
This commit is contained in:
Santhosh Thottingal
2013-11-24 15:12:26 +05:30
committed by Santhosh
parent 7077d0458a
commit ee71de833c
1 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
tests/autonym.html
View File

@@ -18,55 +18,84 @@
font-style: normal; font-style: normal;
} }
.autonym { table, th, td {
font-family: 'Autonym'; border: 1px solid #ddd;
font-size: 1em; border-collapse:collapse;
padding: 5px;
} }
.list { td.lang, td.index {
width: 100%; background-color: #ccc;
-moz-column-count: 6; /* Firefox */
-webkit-column-count: 6; /* Safari and Chrome */
-moz-column-rule:3px outset #555; /* Firefox */
-webkit-column-rule:3px outset #555; /* Safari and Chrome */
} }
li {
list-style: none;
font-size: 1em;
line-height: 2em;
}
</style> </style>
</head> </head>
<body> <body>
<h1>Autonym Font</h1> <h1>Autonym Font</h1>
<p>Following content in this page uses <a href="https://github.com/santhoshtr/AutonymFont">Autonym</a> <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> font for displaying language names without font issues.</p>
<div class="dropdown">A dropdown example: <hr/>
<select class="autonym"> <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> </select>
</div> </div>
<hr/>
<div class="list">
A list example
<ul class="autonym"></ul>
<script> <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) { $.each( $.uls.data.languages, function( langCode) {
var autonym = $.uls.data.getAutonym( langCode ); var autonym = $.uls.data.getAutonym( langCode );
$( 'select' ).append( $( '.dropdown' ).append(
$( '<option>') $( '<option>')
.attr( 'lang', langCode ) .attr( 'lang', langCode )
.text( autonym ) .text( autonym )
)
$( 'ul' ).append(
$( '<li>')
.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> </script>
</div> </div>
</body> </body>