2010年04月23日

本当かなぁ

にわかには信じがたい話なのだが、レンタルでのブログなどで運営会社による文字化けが発生しているという。特定の文字をチェックして文字化けを起こさせているというのだ。そこでサクラは大丈夫なのかと。

ーーーーーーーーーーーーーーーーーー試験文書ここから

中国共産党政権が一番触れてほしくないのが、第2次天安門事件だ。
中国政府は、世界が驚愕したあの凄惨な事件を、歴史から葬り去ろうとしているかのようだが、それは無理な話。

あれは中国共産党の喉元に突き刺さった棘だ。
共産党政権が続く限り苦しまねばならない。
20年前の丁度あの時、我が家の娘は北京の大学に留学していた。
だから、あの事件は我が家にとって余所事ではなかった。
娘の安否を気遣う親としては、肝を冷やす思いでテレビ画面に釘付けになったものだ。

丸腰の自国民を情け容赦なく戦車で銃撃する光景を、カメラは遠慮なく捉えていたが、とても文明国での出来事とは思えなかった。

あの蛮行を指示したケ小平は、いずれ名誉の剥奪というスターリンの憂き目を見るだろう、と、あの画面を見ながら思ったものだった。

ーーーーーーーーーーーーーーーーーー試験文書ここまで。

元の文章は改行などを別にすると次の画像の文章だ。さてどうなるか一旦上げてみる。

天安門事件に触れた文章

大丈夫らしい。で下記のコラム。

メールでは「ア」「ケ」「」が文字化けする。

Unicodeにすれば問題ないが、メールではいまだISO-2022-JP(JISコード)が主流であろうから、UTF-8(Unicode)ではちょっと心配であったりする。

気になったので、ここにメモ代わりに書いておこうと思う。

文字コードの問題は結構複雑で、アルファベットの国からみると、「なんでそんな文字使うの?対応がめんどいですけど。」だろうな。

実際 検索してみると 文字化けしないで表示されているものがぞろぞろ出てくる。単なる文字化けでそれ以上のものではないような気がする。(この場合はだが)

目の前に(仮想)敵がいると、うっかりすると「郵便ポストが赤いのも」状態になりかねないなぁ、と自戒。

と想像を巡らし書いている内に最初に引用した apj@水商売ウォッチングの中の人 さんのサイトでもコードの問題で落ち着いたようだ。

posted by ふう at 18:15 | Comment(0) | TrackBack(0) | その他の話題

2010年04月07日

table の 中の pre

このサイトは、今現在(2010/04)ではテストページと同じように

#container {
   width:95%;
   display:table;
   ......
}
#content {
   display:table-cell;
   ......
}
#links {
   display:table-cell;
   ......
}

としてある。#container/#content/#links は総て div である。最近のブラウザでは解釈されているようなので問題はない(?)。

ただ、div 内にも関わらず、pre のように改行のない長い文字列 (pre で無くとも切れ目のないアルファベットなど)があると、td と同様に問答無用で幅が長くなってしまう。 overflow:auto; も width:90% などでは無効だ。レイアウトが崩れないようにするには、pre などを % などではなく固定幅にしなければうまくいかなかった。

pre の 代わりにリストを使うことも考えた。

それでもせっかく可変幅で閲覧できるようにしたのに、そこだけがうまくいかないのは何とかならないものか。で、探してみると table の幅を固定すれば良いことに気がついた。一応 width:95%; とはなっているが元々 table は可変幅なのでこの書き方では不十分。table-layout: fixed; を付け加え、描画する前に幅を決めてしまえば、pre も可変幅で overflow:auto; も有効になった。

結局

#container {
   width:95%;
   display:table;
   table-layout: fixed;
   ......
}

で解決

posted by ふう at 16:30 | Comment(0) | TrackBack(0) | css

2010年04月05日

youtube を貼り付ける

youtube の動画を貼り付ける際に利用できる、埋め込みコードは、あまりきれいではない。

youtube から得られるコードは下記のようなもので実際は改行はない。見やすいように改行を施した。また object は inline なので body 直下には置けない。ここでは <p> で囲ったが実際はブログなどは div などで囲まれているだろうから、直接貼り付けても実害はない。

  • <p>
  • <object width="480" height="385">
    • <param name="movie" value="http://www.youtube.com/v/IcpsAOUh9YI&hl=ja_JP&fs=1&"></param>
    • <param name="allowFullScreen" value="true"></param>
    • <param name="allowscriptaccess" value="always"></param>
    • <embed src="http://www.youtube.com/v/IcpsAOUh9YI&hl=ja_JP&fs=1&" type="application/x-shockwave-flash"
    • allowscriptaccess="always" allowfullscreen="true" width="480" height="385">
    • </embed>
  • </object>
  • </p>

で、上記コードで貼り付けたものが下の動画。

& が直接書かれている・paramが </param> で閉じられているなど問題がある。

IE8/Firefox/Chrome/Opera が対象であれば、もう embed は必要ないだろう。 embed の代わりに youtube へのリンクを張っておけばよい。そこで下記のように書き直した。

  • <p>
  • <object width="480" height="385"
    • type="application/x-shockwave-flash"
    • data="http://www.youtube.com/v/IcpsAOUh9YI&amp;hl=ja_JP&amp;fs=1&amp;" >
    • <param name="movie"value="http://www.youtube.com/v/IcpsAOUh9YI&amp;hl=ja_JP&amp;fs=1&amp;" />
    • <param name="allowFullScreen" value="true" />
    • <param name="allowscriptaccess" value="always" />
    • <p>プラグインがインストールされていません</p>
    • <p><a href="http://www.youtube.com/watch?v=IcpsAOUh9YI"><img src="http://img.youtube.com/vi/IcpsAOUh9YI/default.jpg" width="120" height="90" alt="youtube 記念樹" /></a></p>
  • </object>
  • </p>

で、上記コードで貼り付けたものが下の動画。

   

プラグインがインストールされていません

youtube 記念樹

これでそれぞれのブラウザで確認できれば、youtube のものよりよほどすっきりしていると思いますが、いかがです?

posted by ふう at 00:30 | Comment(0) | TrackBack(0) | css

2010年04月02日

今日から開始 引っ越しのお知らせ

JustSystems が提供していた JustBlog がサービスを TypePad に移管するという。 それとともに無料ではなくなってしまった。

というわけでここに移動。 画像類・そのほか参照していたファイルは面倒なのでそのままにしている(今のところ)。

ここでも css を追加できるようだが、後のことになる。

無料だったからだから何ともいえないが、ちゃんと支払うものを支払わないとこういうことになる。

TypePad から このブログ へ引っ越しました。

posted by ふう at 08:34 | Comment(0) | TrackBack(0) | 日記

2007/02〜 ここに移動したのは 2010/04/02 by huu