昔作った時は、回転とか自由にできなかったのですがさすがに今は簡単に実装できてしまいました。 ( IE は 10以上でないと回らないです ) ▼ ここからが元のテキストです。
列車は空を行き交い、普通の移動にさえロマンを感じられる。 まるでそこはパーティールームのようにも見え、空間の4分の1は外界を望む事ができた。 夜。夜空の美しいその夜。 偶然にしては出来すぎたように列車最後尾に一人の女性が乗っていた。そして、夜空から現れたプラットホームと、静かに列車が交わる。 やがて、緩やかな弧を描くような静止と共に一人の青年が乗り込んできた・・・。 青年は踊る心臓の鼓動を必死で押さえたが、やはりあれだけ練習した予定を忘れてしまった。 不覚にも、ほんの一瞬彼女に見とれたせいである。無理も無い、苦労してここにたどり着いたのは決して偶然では無いのだから。 が、すぐ平静を装って彼女に問いかける。 「すいません。えっと、この列車たしか止まりましたよね?」 「えっと・・何だっけ、あ・・」
▼ ここからが変換されたコンテンツです。
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
window[window.location.hostname+'.loadjQuery'] = true;
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
}
</script>
<script type="text/javascript">
$(function() {
$("#area").tate($("#src01").text(),26,35);
});
</script>
<style>
#area {
line-height: 14px;
}
#area td {
font-size:14px;
font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック";
}
</style>
<script charset="utf-8" src="http://winofsql.jp/tate.js"></script>
<div id="area"></div>
改行の入ったテキストを引き渡すだけです。文字一つ一つは TD で表現されているので、元のテキストを直接コピーできません。ただ、かならず元のテキストは用意しないといけないのでそちらからコピーするようにすればいいと思います。 tate.js
// 著作 : lightbox
// url : http://winofsql.jp
$.fn.extend({
tate: function(text,width,height) {
var base = text.replace(/\r/,"");
a = width;
b = height;
var str = "";
str = "<table border=0 style='table-layout:fixed;'>"
for( j = 0; j < a; j++ ) {
str += "<col style='width:1.3em;'>"
}
for( i = 0; i < b; i++ ) {
str += "<tr>"
for( j = 0; j < a; j++ ) {
str += "<td style='text-align:center;'> </td>"
}
str += "</tr>"
}
str += "</table>"
$(this).html(str);
obj = $(this)[0].getElementsByTagName("table")[0];
td = obj.getElementsByTagName("td");
str = "";
offset = 1;
var bstr = "";
var x;
for( var i = 1; i <= base.length; i++ ) {
x = a - Math.floor((i+offset-1)/b) + a * (( i+offset-1 ) % b );
bstr = base.substr( i-1, 1 );
switch( bstr ) {
case '(':
case ')':
case '[':
case ']':
case '{':
case '}':
case '（':
case '）':
case '［':
case '］':
case '｛':
case '｝':
case '【':
case '】':
case '『':
case '』':
case '《':
case '》':
case '≪':
case '≫':
td[x-1].innerHTML =
"" + bstr + "";
$(this).rotate(td[x-1],90);
break;
case 'ー':
td[x-1].innerHTML =
"<div style='position:relative;top:0px;left:0px;'>" + bstr + "</div>";
$(this).rotate(td[x-1],270);
break;
case '、':
case '。':
td[x-1].innerHTML =
"<div style='position:relative;top:-8px;left:7px;'>" + bstr + "</div>";
break;
case '「':
td[x-1].innerHTML =
"<div style='position:relative;top:-4px;left:0px;'>" + bstr + "</div>";
$(this).rotate(td[x-1],90);
break;
case '」':
td[x-1].innerHTML =
"<div style='position:relative;top:4px;left:0px;'>" + bstr + "</div>";
$(this).rotate(td[x-1],90);
break;
case 'ぁ':
case 'ぅ':
case 'ぇ':
case 'ぉ':
case 'ゃ':
case 'ゅ':
case 'ょ':
case 'っ':
case 'ァ':
case 'ゥ':
case 'ェ':
case 'ォ':
case 'ャ':
case 'ュ':
case 'ョ':
case 'ッ':
td[x-1].innerHTML =
"<div style='position:relative;top:-1px;left:4px;'>" + bstr + "</div>";
break;
default:
td[x-1].innerHTML = bstr;
break;
}
if ( bstr == "\n" ) {
offset += b-((i+offset-1)%b);
}
}
return this;
},
rotate: function(obj,d) {
var s = "rotate(" + d + "deg)";
if (obj.style) {
obj.style.MozTransform = s
obj.style.WebkitTransform = s;
obj.style.OTransform = s;
obj.style.MSTransform = s;
obj.style.transform = s;
} else if (obj.css) {
obj.css("-moz-transform", s);
obj.css("-webkit-transform", s);
obj.css("-o-transform", s);
obj.css("-ms-transform", s);
obj.css("transform", s);
}
obj.setAttribute("rotation", d);
return this;
}
});
タグ：jquery
|
|
