Skip to content

Instantly share code, notes, and snippets.

@audreyt

audreyt/mps.html

Created August 10, 2013 10:18
Show Gist options
  • Save audreyt/6199908 to your computer and use it in GitHub Desktop.
Save audreyt/6199908 to your computer and use it in GitHub Desktop.
Download ZIP
Experimental MPS layout
Raw
mps.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="zh-hant-TW" class="han-biaodian-pro han-la">
<head id="Head1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>你敢有聽著咱的歌 Lí kám-ū thiann-tio̍h lán-ê kua</title>
<base target="moedict">
<link rel="stylesheet" href="han.css">
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://moedict.org/js/jquery.hoverIntent.js"></script>
<script src="han.js"></script>
<script>
jQuery(function(){
jQuery('a:not(a[target])').hoverIntent({ timeout: 250, out: function(){}, over: function(){
jQuery('#moedict').remove();
var href = jQuery(this).attr('href');
jQuery('<iframe id="moedict" name="moedict" src="' + href + '" style="float: right; height: 90%; width: 40%; margin: 0; border-radius: 20px" />').prependTo('body');
}});
});
</script>
<style>
@font-face {
font-family: "Fira Sans Regular";
src: url('FiraSansOT-Regular.eot');
src: url('FiraSansOT-Regular.eot?#iefix') format('eot'),
url('FiraSansOT-Regular.woff') format('woff'),
url('FiraSansOT-Regular.otf') format('opentype'),
url('FiraSansOT-Regular.ttf') format('truetype');
}
@font-face {
font-family: "MOEDICT";
src: url('MOEDICT.eot');
src: url('MOEDICT.eot?#iefix') format('eot'), url('MOEDICT.woff') format('woff'), url('MOEDICT.otf') format('opentype'), url('MOEDICT.ttf') format('truetype');
}
.zy, rt, .rt { font-family: 'Fira Sans Regular', 'Fira Sans OT', sans-serif; white-space: nowrap !important }
u.pn { font-family: 'Fira Sans Regular', 'Fira Sans OT', sans-serif; margin-left: 10px; }
.mps, .zi, rb, .rb { font-family: "XinGothic-Citicpress","XinGothic Citicpress","Lantinghei TC","Hiragino Kaku Gothic Pro","Apple LiGothic","Heiti TC","LiHei Pro","Microsoft YaHei","微軟正黑體","文泉驿正黑",sans-serif; font-size: 24px !important }
p { font-size: 20px }
span.romanization { display: inline-block; margin-right: 5px;
vertical-align: top }
</style>
</head>
<body style="margin: 20px">
<p>
<span class="romanization">
<ruby class="mps">
<a href="https://www.moedict.tw/#!你">你<rt>ㄌㄧˋ</rt></a>
</ruby>
<a href="https://www.moedict.tw/#!敢有">
<ruby class="mps">
敢<rt>ㄍㆰˋ</rt>
</ruby>
<ruby class="mps">
有<rt>ㄨ˫</rt>
</ruby>
</a>
<a href="https://www.moedict.tw/#!聽著">
<ruby class="mps">
聽<rt>ㄊㄧㆩ</rt>
</ruby>
<ruby class="mps">
著<rt>ㄉㄧㄜㆷ̍</rt>
</ruby>
</a>
<a href="https://www.moedict.tw/#!咱">
<ruby class="mps">
咱<rt>ㄌㄢˋ</rt>
</ruby></a>
<a href="https://www.moedict.tw/#!的">
<ruby class="mps">
的<rt>ㆤˊ</rt>
</ruby></a>
<a href="https://www.moedict.tw/#!歌">
<ruby class="mps">
歌<rt>ㄍㄨㄚ</rt>
</ruby></a>
<br>
<rt style="word-spacing: 16px; float: left">
Lí
kám-ū
thiann-tio̍h
lán
ê
kua
</rt>
</span>
<hr>
<span class="romanization">
<ruby class="mps">
<a href="https://www.moedict.tw/#!你">你<rt>ㄌㄧˋ</rt></a>
</ruby><br>
<rt>Lí</rt>
</span>
<span class="romanization">
<a href="https://www.moedict.tw/#!敢有">
<ruby class="mps">
敢<rt>ㄍㆰˋ</rt>
</ruby>
<ruby class="mps">
有<rt>ㄨ˫</rt>
</ruby>
</a><br>
<rt>kám-ū</rt>
</span>
<span class="romanization">
<a href="https://www.moedict.tw/#!聽著">
<ruby class="mps">
聽<rt>ㄊㄧㆩ</rt>
</ruby>
<ruby class="mps">
著<rt>ㄉㄧㄜㆷ̍</rt>
</ruby>
</a><br>
<rt>thiann-tio̍h</rt>
</span>
<span class="romanization">
<a href="https://www.moedict.tw/#!咱">
<ruby class="mps">
咱<rt>ㄌㄢˋ</rt>
</ruby></a><br>
<rt>lán</rt>
</span>
<span class="romanization">
<a href="https://www.moedict.tw/#!的">
<ruby class="mps">
的<rt>ㆤˊ</rt>
</ruby></a><br>
<rt>ê</rt>
</span>
<span class="romanization">
<a href="https://www.moedict.tw/#!歌">
<ruby class="mps">
歌<rt>ㄍㄨㄚ</rt>
</ruby></a><br>
<rt>kua</rt>
</span>
<hr>
<br>
<br>
<br>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment