徒然 - LA

以前はOperaも効かなかったのですが、今はFirefoxだけにおいて
table内で「word-break:break-all」が効かない（改行されない）
という問題があるので、
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」[to-R]
を使っていたのですが、
wordBreak.js使用時の注意点 – hinimiの偏頭痛
にもあるように、ソースにインデントをつけるとレイアウトが崩れるという不具合に遭遇しました。

ただし、
Tabでインデントを付ける場合は大丈夫？とか、
タブと半角スペースを混在させたらダメになったとかならないとか、
どこかからコピペした半角スペースが怪しそうだとか、
うまく行く半角スペースとそうでない半角スペースがある？
など、どのような場合に崩れるのか、原因は未調査です。


ここで、wordBreak.jsですが、ソースを見ると
（１）指定した要素（デフォルトではclass="wordBreak"のtable）内のノードにおいて、
（２）nodeTypeがTEXT_NODEのものは、
（３）各文字をバラバラにして、間に幅無しスペース（​）を挿入する
という仕組みになっています。

ちなみに（１）に関して、<table class="wordBreak">以外にも使えるようにするには

var wordBreakClass = "wordBreak";
var table = document.getElementsByTagName("table");

をいろいろ変えてみれば良いと思うのですが、

レイアウトが崩れるときの現象を調査してみると、
<table>と<tbody>（<thead>,<tfoot>）の間、
<tbody>（<thead>,<tfoot>）と<tr>の間、
<tr>と<td>の間
に幅無しスペース（&#8203;）が挿入されていることが分かりました。

つまり（２）の条件のために

if(cNode.nodeType == 3)

とやっているのですが、インデント部分でここがtrueとなってしまっているということです。

ここをなんとかすれば良いのだなと思い、いろいろ試してみたのですがうまくいかず、
それならば、ということで（３）において、

if(cNode.nodeValue.match("[^\n ]")){
var plTxt = cNode.nodeValue.replace(/\t/g,"");
var spTxt = plTxt.split("");
spTxt = spTxt.join(String.fromCharCode(8203));
var chNode = document.createTextNode(spTxt);
cNode.parentNode.replaceChild(chNode,cNode)
}

となっているところを「ただし<table>、<thead>、<tfoot>、<tbody>、<tr>の直下は除く」という様に

var pTag=cNode.parentNode.tagName.toLowerCase();
if(!(pTag=="table" || pTag=="thead" || pTag=="tfoot" || pTag=="tbody" || pTag=="tr")){
	if(cNode.nodeValue.match("[^\n ]")){
	var plTxt = cNode.nodeValue.replace(/\t/g,"");
	var spTxt = plTxt.split("");
	spTxt = spTxt.join(String.fromCharCode(8203));
	var chNode = document.createTextNode(spTxt);
	cNode.parentNode.replaceChild(chNode,cNode)
	}
}

としたらうまく行きました。

でも、これだと<td>内のインデントが悪影響を及ぼさないか不安がありますし、
そもそもロジック的に、根本的な解決ではなく邪道な気がしますので、
他に良いやり方があったら教えてもらえたら有難く思います。

２年前の新譜。

PRETTY MAIDSは『SIN-DECADE』『OFFSIDE』以降はあまり胸を打つものがなく、正直、過去のバンドになってしまっていた感があり、そもそも2010年にアルバムを出した時は「あ、まだ活動していたんだ」と思った程です。スウェーデン、フィンランド、ノルウェイに比べ、どうしてもデンマークはメタル後進国のようなイメージもありました。

しかし「プリティ・メイズの新譜は良いよ」という人が多くいて、ずっと気にはなっていたのです。

そして2年経ち、遅ればせながらようやく聴く機会を得て、これはびっくり！
噂に違わぬ初期を彷彿とさせる名曲揃いで、実に良いではありませんか！

決して過去の焼き直しではなく、螺旋階段を１回りして一段高みに上がったような見事な原点回帰。「一体彼らに何があったんだ！」と思わせるほどの嬉しい誤算です。古典的な北欧のヘヴィ・メタルを普通にやっているだけなのに、すごく新鮮に聴こえます。これがベテランの貫禄というものでしょうか。自分の中ではPRETTY MAIDSは「若手」というイメージが強かったですが、気づけばこれがスタジオ12枚目なんですね。『RED, HOT AND HEAVY』から『SIN-DECADE』の初期4枚の良い所を、現在の彼らがまとめあげた集大成のような印象すら受けます。


1stで使われた「カルミナ・ブラーナ」になりそうな雰囲気のイントロから始まる1曲目「Pandemonium」。キーボードが出て来た瞬間に名曲を予感し、ギターが入ってガッツポーズ、ロニー・アトキンスの気合いの入ったかすれ声で驚きました。これはかっこいい！

Pretty Maids – Pandemonium

http://www.youtube.com/watch?v=wtlV87cG084

この曲だけで十分満足ですが、続く2曲目「I.N.V.U.」のイントロがまた聴き手を引きつける！まるでSKID ROWの「18 and Life」をIRON MAIDEN風にしたかのようです。

動画を探してみたら、 (続きを読む…)

２つ前の投稿の続きです。

「position:absolute」で疑似「position:fixed」を実現させるために、（基準位置）＋（スクロールした距離）をpositionに与えるという考え方で、ポートレート（縦長）の時とランドスケープ（横長）の時で"基準位置"が変わるので「window.location.reload();」でリロードしていました。

しかしこれだと、フォームに入力中など、ページがリフレッシュされたら作業状態が失われたて困る場合もありますし、そもそも毎回ページを呼び出し直すのはうざったいので、縦横の寸法の差分をpositionに加えるという方法を取った方が良いと思います。

ということで、自分用に、調査用スクリプトです。

さらに備忘録的には、iphone(iPod)の縦横は「window.orientation」の角度で判別できる、Androidではresizeイベントで呼び出す、という内容です。

黒い四角はクリック（タップ）で消えます。

<style type="text/css">
#test20120323{
	width:300px;
	height:200px;
	text-align:center;
	position:absolute;
	top:50px;
	left:50%;
	margin:0 0 0 -100px;
	background:#000;
	color:#fff;
}
</style>
<div id="test20120323">
	<p>iPhoneを</p>
	<p>縦横に回転してみてください</p>
	<p></p>
	<p>（クリックでこの表示を削除）</p>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$(window).bind("load orientationchange resize",function(){
		var ori=window.orientation;
		var w=$(this).width();
		var h=$(this).height();
		$("#test20120323 p").eq(0).text("window.orientation="+ori);
		$("#test20120323 p").eq(1).text("width="+w);
		$("#test20120323 p").eq(2).text("height="+h);
	});
});
$("#test20120323").click(function(){
	$(this).remove();
});
</script>