1  Firefoxで選択できないテキスト - enbug diary (2006-10-23)

blockquoteにおいてciteやtitle属性で指定したテキストが、 表示はされますが、選択できません。 Firefoxで選択できないテキスト - enbug diary (2006-10-23)

私は例えば以前はこんな css を書いていた。

blockquote[title]:before{
  display: block;
  font-size: smaller;
  color: #777;
  border-bottom: 3px double #777;
  content: "Quoted from "attr(title)""
}

blockquote[cite]:after{
  display: block;
  text-align: right;
  font-size: smaller;
  content: "uri: "attr(cite)""
}

しかし css の content には html が書けないため、hyperlink を作る事ができない。ブラウザによっては表示されなかったり文字選択できなかったりと、あまり嬉しくない。と言うことで使わなくなってしまった。

今はというと冒頭の引用のように表示されるわけだが、これはblockquote の cite と title 要素を指定した上で、更に blockquote 内に更に cite 要素 を書き込み、そちらを Hyperlink にするというまわりくどいやり方をしている。この引用部分の html は例えば以下のように記載される。

<blockquote cite="http://example.com" title="Quote先のタイトル">
<p>引用本文
<cite><a href="http://example.com">Quote先のタイトル</a></cite></p>
</blockquote>

これ自体は Firefox の CopyURL+ extension を使い、user.js に以下のように設定をいれて自動生成している。

user_pref('copyurlplus.menus.1.label', 'Copy as A link');
user_pref('copyurlplus.menus.1.copy', '<a href="%URL%" title="%SEL%">%TITLE%</a>');
user_pref('copyurlplus.menus.2.label', 'Copy as Quote');
user_pref('copyurlplus.menus.2.copy', '<blockquote cite="%URL%" title="%TITLE%"><p>%SEL%<cite><a href="%URL%">%TITLE%</a></cite></p></blockquote>');

あまりスマートでは無いので、多分 JavaScript で blockquote の cite, title から自動成形してしまうのが一番賢いのではないかと思う。そのうちやるかも。w3m などではリンクが消えてしまうのが難点か。

ちなみに cite 要素は css にて

blockquote cite{
  display: block;
   text-align: right;
  font-size: smaller;
}

として右寄せ表示している。

1  wbr

例えばかなり長いドメイン名や URL を、それに対してあまり広くない block 要素の中に入れたいとする。普通に入れると文字だけ枠からはみ出したり、ブラウザに横スクロールバーが出たりとあまり嬉しくない事が起こる。

そういった際に使う要素として <wbr> と言う NN や IE での拡張タグがあり、これを入れた場所での改行を許す、と言う効果があるらしい。但しこれは W3C の HTML/XHTML の仕様には無い拡張仕様、なのだが、現実には Gecko でも対応しているように見える。

2  &shy; - ソフトハイフン

この代りには、 &shy; ないし &#173; と言う特殊文字が使えるようだ。

<!ENTITY shy    CDATA "&#173;" -- soft hyphen = discretionary hyphen,
                                  U+00AD ISOnum -->

この &shy; は shyなやつ - 徒書 によれば

• その単語が 1行の表示幅に入りきらない場合、行末に - (ハイフン)を付随させて折り返す
• その単語が 1行の表示幅に入りきる場合は表示されない

と言うルールの特殊文字なので、長い単語を - 付きで折り返すには賢い文字なのだが、WBR のように「単純に折り返して - も表示しない」と言う使い方にはちょっとむかない。

3  CSS での解決策

この手の見た目の制御には、素直にいけば CSS を使うことを考えるべきだ。実際、css では word-break: break-all; と言う指定ができる。しかしこれは「(日本語のように)単語途中でも無視して折り返す」と言うだけの指定なので、例えば長いドメイン/URL の . (ドット) で折り返し許可したい、と言う用途にはあまり向かない。word-wrap: break-word; も挙動としては同様のようだ。

別方向の解としては overflow: auto; を設定することで、その block 要素のみに閉じたスクロールバーを付け、全体のレイアウトは崩さない、と言った方法もある。この日記でも pre 要素にその方法を使っている。

4  IE6, Firefox, w3m での表示挙動

ちなみに上記の事項を IE6, Firefox1.0, w3m で試してみた。

	IE6	Firefox 1.0	w3m 0.5.1
<wbr>	○	○	○
&shy; / &#173;	○	×	△
word-break	○	○	×

&shy; は w3m では常にハイフンとして表示され、改行もされなかった。Firefox ではそもそも全く無視されているようだ。word-break は css を処理しない w3m 以外では動作したが、任意の場所で折り返されるという不満が残る。

と言うことで、今のところ「1行が長すぎる場合に指定箇所で改行を入れる」方法は HTML/XHTML 非標準の WBR しかなさそうだ、と言うちょっと微妙な結果になってしまった。

1  HTML で絶対座標表示での構築がされている

ある仕事で HTML コンテンツを他の人にお願いして作って貰った。出来上がってきたコンテンツの内容は特に問題はなく良くできていたのだが、ちょっとリンクを追加したかったので HTML を編集しようとファイルを見てみた。すると...

<DIV style="width : 93px;height : 19px;top : 145px;left : 66px;
  position : absolute;
  z-index : 29;" 
  id="Layer18"> ... </DIV>

という具合いのものが大量に並んでいるのであった。どうやらこれは [テキストボックス] と言う感じに、各ブロックを <DIV> で囲んでおいて、それぞれの Box を CSS の absolute 配置で pixcel 単位で「x=145, y=66, w=93, h=19」という具合いに「座標指定配置」しているらしい。表示上隣り合っているリンクが source では物凄く離れた場所にあったりして、論理構造の欠片もない。あまりのことに絶句してしまった。

2  ソフト的に作りやすいというのは想像できるが...

META の GENERATOR を見ると <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> らしい。確かに WYSIWYG を実現するにはソフト的には楽な方法なのだろうが、どう考えてもこれは HTML的にも CSS的にも間違った使い方だろう。なにより後から手で変更することが全く不可能に近く、一カ所いじるとレイアウトがグチャグチャになってしまうのがせつない。恐らくこれは Homepage Builder でしか再編集できないのだろう...