02hanzi-form-test.html

---
layout: default
title: 字形测试
---

<script type="text/javascript" src="{{ "/script/jquery-2.2.3.min.js" | prepend: site.baseurl }}"></script>

<script>
var defaultTestText="曜骨房敢拔雪将冷葛地天";

$(document).ready(function(){
	$('#test-text').val(defaultTestText);
	$(document).on('mousedown keydown',refreshPlayground);
	$('#test-text').on('input select blur focus',refreshPlayground);
	refreshPlayground();
	$('.table-rnf td input[type="checkbox"]').on('click',refreshPlayground);
	$('.table-rnf td input[type="text"]').on('input',refreshPlayground);
	$('.table-rnf td button:not([id])').on('click',function(){
		$('.table-rnf td input[type="text"].font-input').val($(this).text());
		refreshPlayground();
	});
	$('#shs-lang').on('click',function(){
		$('#font-zh-cn').val('Source Han Sans SC');
		$('#font-zh-tw').val('Source Han Sans TC');
		$('#font-zh-hk').val('Source Han Sans TC');
		$('#font-jp04').val('Source Han Sans');
		$('#font-jp90').val('Source Han Sans');
		$('#font-ko-kr').val('Source Han Sans K');
		$('#font-custom1').val('Source Han Sans');
		$('#font-custom2').val('Source Han Sans');
		$('#font-unspec').val('Source Han Sans');
		refreshPlayground();
	});
	$('#shs-region').on('click',function(){
		$('#font-zh-cn').val('Source Han Sans CN');
		$('#font-zh-tw').val('Source Han Sans TW');
		$('#font-zh-hk').val('Source Han Sans HK');
		$('#font-jp04').val('Source Han Sans JP');
		$('#font-jp90').val('Source Han Sans JP');
		$('#font-ko-kr').val('Source Han Sans KR');
		$('#font-custom1').val('Source Han Sans JP');
		$('#font-custom2').val('Source Han Sans JP');
		$('#font-unspec').val('Source Han Sans JP');
		refreshPlayground();
	});
	$('#win-sans').on('click',function(){
		$('#font-zh-cn').val('Microsoft YaHei');
		$('#font-zh-tw').val('Microsoft JhengHei');
		$('#font-zh-hk').val('Microsoft JhengHei');
		$('#font-jp04').val('Meiryo');
		$('#font-jp90').val('Meiryo');
		$('#font-ko-kr').val('Malgun Gothic');
		$('#font-custom1').val('Meiryo');
		$('#font-custom2').val('Meiryo');
		$('#font-unspec').val('sans-serif');
		refreshPlayground();
	});
	$('#win-serif').on('click',function(){
		$('#font-zh-cn').val('SimSun');
		$('#font-zh-tw').val('PMingLiU');
		$('#font-zh-hk').val('PMingLiU');
		$('#font-jp04').val('MS PMincho');
		$('#font-jp90').val('MS PMincho');
		$('#font-ko-kr').val('Batang');
		$('#font-custom1').val('MS PMincho');
		$('#font-custom2').val('MS PMincho');
		$('#font-unspec').val('serif');
		refreshPlayground();
	});
	$(window).resize(resizeContainers);
	$(window).scroll(function(){
		if ($('.control-panel-container').css('position')=='absolute')
			$('.control-panel').css('margin-top',-1*Math.min($(document).scrollTop(),$('header').height()));
		else
			$('.control-panel').css('margin-top','');
	});
});

function refreshPlayground(){
	var pg=$('.playground');
	pg.empty();
	pg.append("<table></table>");

	var pgt=$('.playground>table');
	pgt.append("<tr></tr>");
	var tr=pgt.find("tr:last-child");

	$('.table-rnf td input[type="checkbox"]:checked').each(function(){
		var lang=$(this).parent().text();
		if (lang=="") lang=$(this).parent().find('input[type="text"]').val();
		tr.append("<th>"+lang+"</th>");
	});
	
	var text="";
	if ($('#test-text').is(':focus') && 'selectionStart' in $('#test-text')[0]){
		text=$('#test-text').val().substring($('#test-text')[0].selectionStart, $('#test-text')[0].selectionEnd);
		
	}
	if (!text || text=="")
		text=$('#test-text').val();
	for (var i=0;i<text.length;i++){
		pgt.append("<tr></tr>");
		tr=pgt.find("tr:last-child");
		$('.table-rnf td input[type="checkbox"]:checked').each(function(){
			var oLang=$(this).parent().text();
			if (oLang=="")
				oLang=$(this).parent().find('input[type="text"]').val();
			var font=$(this).parent().next().find('input').val();
			try {
				var re=/(\w+(-\w+)?)\s*(\((\w+)\))?/;
				var lang=oLang.match(re)[1];
				var ot=oLang.match(re)[4];
				if (lang=="Unspecified") lang="";
				var td='<td lang="'+lang+'"';
				td+=' style="font-family: '+font+';';
				if (ot)
					td+='font-feature-settings: \''+ot+'\' 1';
				td+='"';
				td+='>'+text[i]+'</td>';
				tr.append(td);
			} catch (err) {
				console.log(err);
			}
		});
	}
	resizeContainers();
}
function resizeContainers(){
	if ($('.control-panel-container').css('position')=='absolute')
		$('.control-panel-container').height(Math.max($('.control-panel-container').height(),$('.playground-container').height()));
	else
		$('.control-panel-container').height("");
	$('.control-panel-container').width($('.control-panel').width()+32);
	if ($('.control-panel-container').css('position')=='absolute')
		$('.font-tester').height($('.control-panel-container').height());
	else
		$('.font-tester').height("");
}
</script>

<style>
.page-content .wrapper {
	max-width: 100%;
}
div.control-panel {
	width: 360px;
	/* margin: auto; */
	/* float: left; */
	position: fixed;
	line-height: 1.5em;
	/* margin-bottom: 32px; */
	margin: 0px 32px 32px 0px;
}
div.font-tester table {
	text-align: left;
	border-collapse: collapse;
	table-layout:fixed;
}
.control-panel table {
	width: 100%;
}
div.font-tester table td,th {
	border: #828282 1px solid;
	padding: 8px;
}
div.playground-container {
	margin-left: 392px;
}
div.control-panel-container {
	overflow: hidden;
	clip: rect(0, auto, auto, 0);
	/* float: left; */
	position: absolute;
}
div.font-tester {
	overflow: hidden;
}
.playground table td {
	font-size: 300%;
}
div.font-tester table td input.font-input {
	width: 90%;
}
div.font-tester table td input.lang-input {
	width: 75%;
}
div.font-tester table td.active {
	background-color: #2a7ae2;
	color: #FFF;
	border-color: #2a7ae2;
}
.playground p {
	margin: auto;
}
.playground-container {
	max-width: calc(100%-480px);
	overflow: scroll;
}
@media screen and (max-width: 960px) {
	div.control-panel {
		width: 300px;
	}
	div.playground-container {
		margin-left: 332px;
	}
}
@media screen and (max-width: 640px) {
	div.control-panel-container {
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}
	div.control-panel {
		float: none;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 32px;
	}
	div.playground-container{
		margin-left: auto;
	}
}
@media screen and (max-width: 480px) {
	div.control-panel {
		width: 100%;
		max-width: 300px;
	}
}
</style>

<div class="font-tester">
	<div class="control-panel-container">
		<div class="control-panel">
			<div>
				<div><b>Test text:</b></div>
				<textarea rows="3" style="width:100%" id="test-text"></textarea>
				<br/>
				<div><b>Regions and fonts:</b></div>
				<table class="table-rnf">
					<tr>
						<td><input type="checkbox" checked>zh-CN</input></td>
						<td><input class="font-input" id="font-zh-cn" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox" checked>zh-TW</input></td>
						<td><input class="font-input" id="font-zh-tw" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox" checked>zh-HK</input></td>
						<td><input class="font-input" id="font-zh-hk" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox" checked>ja-JP (jp04)</input></td>
						<td><input class="font-input" id="font-jp04" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox" checked>ja-JP (jp90)</input></td>
						<td><input class="font-input" id="font-jp90" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox" checked>ko-KR</input></td>
						<td><input class="font-input" id="font-ko-kr" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox"></input><input class="lang-input" type="text" value="ja (jp83)"></input></td>
						<td><input class="font-input" id="font-custom1" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox"></input><input class="lang-input" type="text" value="ja (jp78)"></input></td>
						<td><input class="font-input" id="font-custom2" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td><input type="checkbox" checked>Unspecified</input></td>
						<td><input class="font-input" id="font-unspec" type="text" value="sans-serif"></input></td>
					</tr>
					<tr>
						<td colspan="2">
						<p><b>Reset all fonts to...</b></p>
						<button>sans-serif</button> <button>serif</button>
						<button>-apple-system</button> <button>system</button>
						<button id="shs-lang">Source Han Sans (Lang)</button>
						<button id="shs-region">Source Han Sans (Region)</button>
						<button id="win-sans">Windows Default Sans</button>
						<button id="win-serif">Windows Default Serif</button>
						</td>
					</tr>
				</table>
				<br/>
			</div>
		</div>
	</div>
	<div class="playground-container">
		<div class="playground">
		</div>
	</div>
</div>

<div>
</div>