SimpleIsm

舞台裏は乱雑に、見えるところはシンプルに。

タグ: HTML

Hamlで半角スペースが無視される件

Posted on by Yoruaki

最近Hamlにハマっていて、ある程度覚えて使っていたのだけどつまづいた。以下の例を見てほしい。

<p>I eat well Milky Way recently.</p>

こんな感じで、要素を1行で吐き出したい時ってあると思うんだけど、これをHamlで書くと以下のようになる。

%p I eat well Milky Way recently.
%p<
  I eat well Milky Way recently.

文章中にリンクが張ってあるのはよくある話で、「Milky Way」というテキストにリンクを張ってみる。

<p>I eat well <a href="http://www.milkywaybar.com/">Milky Way</a> recently.</p>

上記が出力される理想形。Hamlでやってみる。

%p<
  I eat well
  %a(href="http://www.milkywaybar.com/")> Milky Way
  recently.

これで出力すると以下のようになる。

<p>I eat well<a href="http://www.milkywaybar.com/">Milky Way</a>recently.</p>

ない！「well」と「recently」の間にスペースがない！じゃあスペース入れてみようと思い、やってみた以下の書き方はすべてダメ。

- space = " "
%p<
  I eat well#{space}
  %a(href="http://www.milkywaybar.com/")> Milky Way
  #{space}recently.
- space = "¥s"
%p<
  I eat well#{space}
  %a(href="http://www.milkywaybar.com/")> Milky Way
  #{space}recently.
%p<
  I eat well
  = " "
  %a(href="http://www.milkywaybar.com/")> Milky Way
  = " "
  recently.
%p<
  I eat well
  = "¥s"
  %a(href="http://www.milkywaybar.com/")> Milky Way
  = "¥s"
  recently.

行頭と行末の半角スペースは無視されるようだ。正規表現もダメとは…。

というわけで、表示は変えずに「ソース上では1行で出力する」という要件を満たすためには、以下のようにやるしか方法が見つからなかった。

- space = "&nbsp;"
%p<
  I eat well#{space}
  %a(href="http://www.milkywaybar.com/")> Milky Way
  #{space}recently.
%p<
  I eat well
  = "&nbsp;"
  %a(href="http://www.milkywaybar.com/")> Milky Way
  = "&nbsp;"
  recently.
%p<
  I eat well&nbsp;
  %a(href="http://www.milkywaybar.com/")> Milky Way
  &nbsp;recently.

こうすると以下のように出力されて、意図した表示になり、1行で出力される。

<p>I eat well&nbsp;<a href="http://www.milkywaybar.com/">Milky Way</a>&nbsp;recently.</p>

もうね、全然直感的じゃないし、「軽量マークアップ言語」とはなんだったのでしょう…。Markdownは直感的でメモ書きとかには超便利だと思うけど、要素の細かな指定は普通のHTMLと変わらないし、ならHTML書くときは普通にHTMLでいんじゃないかなぁと思った。

HamlはSassも中で書けるから、1つのファイルで全部1行で出力したらなんかいいなぁ（キャンペーンサイトとか1枚ペラのページ限定だけど）と思ったんだけど、compressedで吐き出す方法分からないし、とりあえず保留しておく。

あ、ちなみに例文の私が最近ミルキーウェイというお菓子に超ハマっているというのはマジです。

追記

か、神様…！

ちょっとlink_toについてはよく分からなかったのだけど(Ruby on Railsかな)、surroundを使うことで解決できた。Module: Haml::Helpersを参考にした。

%p<
  = surround "I eat well ", " recently." do
  %a(href="http://www.milkywaybar.com/")> Milky Way

これで意図した表示になります。@Kyoさんありがとうございました。

Webってこういうのがいいんだよなぁと改めて思った次第です。

HTML 4.01最(再)小化

Posted on by Yoruaki

以前終了タグが省略可能な要素という記事を書いたことがあるのだけど(5年前…)、もっと省略した書き方を当時教えてもらったのだけど忘れてしまったので、もう一度調べながら書いてみた。

確かSGML宣言をすることでもっと省略できるとかだったので、上記を参考に調べてみると、HTML4におけるSGML宣言ではOMITTAGとSHORTTAGが両方YESなので、タグと属性名の省略が可能で、タグそのものを圧縮して書くこともできる。(…で合ってる？)

ということで以下のHTMLを省略してみた。

元のHTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>HTML 4.01 Omissible & Minimized Elements Example</title>
    </head>
    <body>
        <h1>HTML 4.01 Omissible & Minimized Elements Example</h1>
        <p>Sample text 1</p>
        <p>Sample text 2</p>
        <p>Sample text 3</p>
        <ul>
            <li>Sample list 1</li>
            <li>Sample list 2</li>
            <li>Sample list 3</li>
        </ul>
        <table>
            <tr>
                <td>Sample table 1</td>
                <td>Sample table 2</td>
                <td>Sample table 3</td>
            </tr>
            <tr>
                <td>Sample table 4</td>
                <td>Sample table 5</td>
                <td>Sample table 6</td>
            </tr>
        </table>
        <p><a href="http://validator.w3.org/check/referer">Validator</a></p>
    </body>
</html>

省略したHTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<meta http-equiv=content-type content="text/html;charset=utf-8"
<title/HTML 4.01 Omissible & Minimized Elements Example/
<h1/HTML 4.01 Omissible & Minimized Elements Example/
<p>Sample text 1
<>Sample text 2
<>Sample text 3
<ul/
    <li>Sample list 1
    <>Sample list 2
    <>Sample list 3
/
<table/
    <tr
        <td>Sample table 1
        <>Sample table 2
        <>Sample table 3
    <tr
        <td>Sample table 4
        <>Sample table 5
        <>Sample table 6
/
<p><a href=http://validator.w3.org/check/referer>Validator

View Demo: HTML 4.01 Omissible & Minimized Elements Example

警告出まくりだけど、ちゃんとValid HTMLとなる。まともに表示されないけど。実はあまり理解できなくてちょこちょこ修正しながらValidatorかけてたのは内緒。

タグの省略について

SGML宣言して省略して遊んでたときに見つけた記事(これ見つけたから今回の記事書こうと思った)。html要素とかbody要素は省略して書くべきとのこと。パフォーマンスのために省略すべきということなら、正直Googleぐらいでかいサイトならいざ知らず、個人サイトとか中規模程度の企業サイトなら「そこじゃなくね？」とか思う。もっと他にできることあるだろうと。

IE6とかJSとかそこそこ弊害もあるし、「すべき」としてしまうのはちょっと強引かなぁと思ったのだけど、それについてはコメントで結構突っ込まれてた。

あ、でも何か一貫したポリシーの元で行う(社内のコーディングガイドラインに従うとか)ならアリだと思う。

追記

@yoruaki 「HTML 4.01最(再)小化」の記事拝見しました。最後のa要素ですが、文法的には問題ありませんがこういう風に解釈されないでしょうか? <a href=”http:”></a>http://validator.w3.org/check/referer >Validator

Twitter / SaekiTominaga: @yoruaki 「HTML …

拝見＆ご指摘ありがとうございます。その部分について、Validatorの警告を見てみます。

<p><a href=http://validator.w3.org/check/referer>Validator

For the current document, the validator interprets strings like <FOO /> according to legacy rules that break the expectations of most authors and thus cause confusing warnings and error messages from the validator. This interpretation is triggered by HTML 4 documents or other SGML-based HTML documents. To avoid the messages, simply remove the “/” character in such contexts. NB: If you expect <FOO /> to be interpreted as an XML-compatible “self-closing” tag, then you need to use XHTML or HTML5.

This warning and related errors may also be caused by an unquoted attribute value containing one or more “/”. Example: <a href=http://w3c.org>W3C</a>. In such cases, the solution is to put quotation marks around the value.

[Valid] Markup Validation of http://simpleism.net/misc/test/004.html – W3C Markup Validator

「このドキュメントでは、バリデータは従来のルールに従うと、<FOO />のように解釈し、紛らわしい警告やエラーメッセージを引き起こし、著者の期待を裏切ります。この解釈はHTML4や他のSGMLベースのHTML文書によって起こされます。このメッセージを回避するには、単純に”/”を削除すればOKです。ただし(“NB:” = “Nota Bane / 注意せよ”)、<FOO />を空要素タグとして解釈させたい場合は、XHTMLやHTML5を使用する必要があります。

この警告及び関連するエラーは、引用符で囲まれていない1つ、もしくは複数の”/”を含む属性値によって引き起こされます。 例: <a href=http://w3c.org<W3C</a> 解決策としては、値を引用符で囲むことです。」

こんなところですかね。もう警告文が複雑でいざ訳して文章にすると大変ですね…。

というわけで、上記の警告のように<a href />と解釈されるならば、仰るとおり<a href="http:"</a>http://validator.w3.org/check/referer>Validatorという風に解釈されると思います。

まぁそう解釈される可能性もあるよ、という警告なので(他にも16個も警告が…ｗ)、ネタとして見ていただければと思います。省略して書くために、調べたりなどの工数が3倍ぐらいかかるというなんとも非効率な書き方です…。

hgroup要素廃止について言っておくことがある

Posted on by Yoruaki

僕はhgroup要素好きでした。以下にその素晴らしいマークアップ例(独断)を書いていく。

<hgroup>
    <h1>ドラゴンクエストV</h1>
    <h2>天空の花嫁</h2>
</hgroup>
<hgroup>
    <h1>METAL GEAR SOLID 4</h1>
    <h2>GUNS OF THE PATRIOTS</h2>
</hgroup>
<hgroup>
    <h1>ゲーマーズTV 夜遊び三姉妹</h1>
    <h2>～今夜も上上下下左右左右BA～</h2>
</hgroup>
<hgroup>
    <h1>ドラゴンボールZ</h1>
    <h2>銀河ギリギリ!!ぶっちぎりの凄い奴</h2>
</hgroup>
<hgroup>
    <h1>アカギ</h1>
    <h2>～闇に降り立った天才～</h2>
</hgroup>

さよなら…。