コピペすると、四角の枠の中にメッセージが現れる不思議な絵

• コピペすると、四角の枠の中にメッセージが現れる不思議な絵

原理

Firefox1やIE6がdisplay:noneで消した箇所に含まれる文字列もコピペできることを利用しています（Opera8.5では無理）。

1. pre要素で整形したテキストをspanで囲み、display:noneで消します。□は全角スペース。

   <pre>
   ■■■■■■■■■■■■■■
   ■□□□□テキスト□□□□■
   ■■■■■■■■■■■■■■
   </pre>

   <pre>
   ■■■■■■■■■■■■■■
   ■□<span>□□□テキスト□□□□</span>■
   ■■■■■■■■■■■■■■
   </pre>

   span {display:none;}

2. 消した分のスペースを確保するために、全角スペース1個を適当なインライン要素で囲み、letter-spacingやword-spacingを使って文字間隔を広げます。 ここではb要素を使いました（because it doesn't have semantical meaning and it's shorter than span）。

   <pre>
   ■■■■■■■■■■■■■■
   ■<b>□</b><span>□□□テキスト□□□□</span>■
   ■■■■■■■■■■■■■■
   </pre>

   pre {
    font-size:1em;
    font-family:monospace;/*等幅のフォント*/
   }
   
   b {
    font-weight:normal;
    letter-spacing:11em;/*Fxはletter-spacingで全角スペースの間隔が調整される*/
    word-spacing:11em;　/*IEはword-spacingで全角スペースの間隔が調整される*/
   }

visibility:hiddenを使うのは？

<pre>
■■■■■■■■■■■■■■
■<span>□□□□テキスト□□□□</span>■
■■■■■■■■■■■■■■
</pre>

span {visibility:hidden;}

これだと消した箇所が範囲選択で反転されません。（これもOperaではテキストをコピペできません。）

激しく非推奨です。あくまでネタとして楽しんでください。

HTML的によろしくないうえに、ブラウザの実装に依存しまくりです。

• display:noneの箇所はコピペできるべきなのか？Operaではコピペできない。
• 全角スペースは「letter」なのか、「word」なのか？実際にFirefoxとIEで解釈が違う。
• そもそもCSS2適合UAはletter-spacingやword-spacingの値をnormalとして扱っても良い。

おまけ：ニコパチ！って何？

隠しテキストは何でもよかったんですが、AA大辞典（仮）から拾ってきました（ニコパチ）。 ニコパチは人気曲がたくさん入っていて、割りと安いのでオススメです。

Ｇ)、∧＿ ∧
　ヽ(≧∀＜ ） ﾆｺﾊﾟﾁ!
　　　＼　 ○）
　　　　 ｀l⌒人
　　　　 （＿） J