aslk

<html> <head> <style> html, body, div { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; font-family: 'Tahoma', 'Pmingliu'; } div, textarea { float: left; } #source { font-size:1.2em; margin:10px; padding:10px; padding:10px; width:100%; height:57vh; display:"inline"; line-height:200%; color:#3f3f3f } #target { overflow:auto; margin:10px; padding:10px; width:95%; height:80vh; display:"inline"; border:dotted #336699 1px; line-height:300%; } button, input { margin:10px; padding:10px; } ruby { color:#3f3f3f; } rt { font-size:1em; color:#336699; padding:10px 0 10px 0; letter-spacing: 0px; }; em { color:red } .tag { color:#bb66aa; position: relative; top: 1em; left: -1em; font-size: 0.8em;} #watch { overflow:auto; margin:10px; padding:10px; width:95%; height:20vh; display:"inline"; border:dotted #336699 1px; line-height:300%; } #watch .cut { color:#9f9f9f; position: relative; top: 1em; left: -1em; font-size: 0.8em;} #target .cut { color:#cfcfcf; position: relative; top: 0.8em; left: -0.8em; font-size: 0.8em;} .header { background-color:black; width:100%; height:2em; color:white; font-family:標楷體; font-size:1.5em; padding:10px 10px 0px 10px } </style> </head> <body> <title>人造語 IDE</title> <div class="header">人造語 IDE <input id="c2eRadio" name="mtType" type="radio">中翻英 <input id="e2cRadio" name="mtType" type="radio" checked>英翻中 </div> <table width="98%"> <tr> <td width="50%"> <div id="watch"></div> <textarea id="source"> # The oral_defense of Magneto Today is the oral_defense of the ESP department in X university. In the beginning, Magneto come_in and cups of committee members fly to salute. After that, Magneto has a show. He sucks all metal objects to the door, and then blocking the exit of the classroom. Suddenly, president Obama fly into the classroom from windows, because of his metal belt. When Obama was dizzy and cannot figure_out what happened. We saw the night is coming, because Magneto turned the earth upside down。 After the show, a committee member ask the first question. Committee member A said : > We have read your Doctor Thesis in title "A research of ESP that moving any metal objects". But you have not enough citation and reference in your thesis. For example, you do not cite my paper with title "A research about which hair moving first when flagellate is moving". At that time, there was shadows show on Magneto's face. When Mystique saw it, her hair stand up. And then, committee member B said : > Could you please explain the meaning of "the equation of manipulate magnetic field by human body" ? Suddenly, you saw the Magneto explain quickly and write on the blackboard without moving his hand. In fact, he manipulate a chalk with metal ring flying to write on the blackboard。 Finally, the committee member C said : > I think your thesis has some weak point. Because you can move metal but cannot move the other objects. Your research is not good enough. So you should have another research about the topic of manipulate gravity. At the end of oral defense , committee members have the conclusion that Magneto should stay for one more year to have another research for the topic "A method of manipulate gravity". </textarea> </td> <td width="50%"><div id="target"></div></td> </tr> </table>  <script> var sourceBox = document.getElementById("source"); var targetBox = document.getElementById("target"); var watchBox = document.getElementById("watch"); function ajaxPost (path, msg, callback) { var r = new window.XMLHttpRequest() r.open('POST', path, true) r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') r.onreadystatechange = function () { if (r.readyState !== 4) return // window.alert(r.responseText) if (typeof callback !== 'undefined') callback(r) } r.send(msg) } function asl(source, fields, s2t, callback) { ajaxPost ('../asl/'+s2t+'/', 'source='+source, function(r) { var p = JSON.parse(r.responseText) // console.log('p=%j', p) var toTags = [ '<ruby>' ]; for (var i=0; i<p.s.length; i++) { if (p.s[i] === '↓') toTags.push('</ruby><br/><ruby>') else { var values = [], tags = [] if (fields.indexOf('t') >=0) values.push(p.t[i]) if (fields.indexOf('tag') >=0) tags.push('<sub class="tag">' + p.tags[i] + '</sub>') // if (fields.indexOf('tag') >=0) values.push(p.tags[i]) toTags.push(' '+p.s[i] + tags.join('')+ '<sub class="cut">' + p.cuts[i] + '</sub>' + '<rp>(</rp><rt> '+ values.join(':') + '</rt><rp>)</rp>'); } } toTags.push('</ruby>'); callback(toTags.join(' ')) }) } function doMt() { asl(sourceBox.value, ['t'], getS2t(), function(html) { targetBox.innerHTML = html }) } function getS2t() { if(document.getElementById('c2eRadio').checked) return 'c2e' else return 'e2c' } function aslParse(text) { asl(text, ['t' /*, 'tag' */ ], getS2t(), function(html) { watchBox.innerHTML = html }) } function cursorMove(box) { var pos = box.selectionStart; var text = " "+box.value; for (var i=pos+1; i>0; i--) { if (/[，。？,;\.!\n]/.test(text[i])) { break; } } i = Math.max(i,0); var m = text.substring(i+1).match(/^.*?[，。？,;\.!\n]/); if (m !== null) { var sentence = m[0] var ptree = aslParse(sentence, function(ptree) { watchBox.innerHTML = ptree.join(' ') }); /* var mtSentence = mt(sentence, function(mtSentence) { watchBox.innerHTML = mtSentence }); */ } return pos; } function sourceCursor() { cursorMove(sourceBox); } window.onload = function() { doMt(); sourceBox.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) doMt(); }); sourceBox.focus() } document.addEventListener("DOMContentLoaded", function() { sourceBox.addEventListener('click', sourceCursor, false) sourceBox.addEventListener('keyup', sourceCursor, false) sourceBox.addEventListener('focus', sourceCursor, false) }) </script> </body> </html>