&nbspのようなHTMLで有用なハーフスペース、エムスペース、エンスペースなどの他の空白コードはありますか?


149

HTMLニュースレターで使用できる他のコードがあるかどうか疑問に思っています。

セルのパディングまたはマージンを使用しますが、このHTML / CSSは初めてなので、メインタイトル行とその下のサブヘッドの両方に影響を与える変更を見つけることができません。メールである私は、CSSをいじくり回してそれを取得するのをためらっています。インラインマークアップとは対照的に、CSSの点でどのメールクライアントが気に入らないのかわかりません。

コンテキストとして、私が使用しているテンプレートはMailchimp snipのMuteテーマです。

    <!-- language: lang-html -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="626">
    <tbody>
        <tr>
            <td valign="middle" bgcolor="#546781" height="97" background="images/header-bg.jpg" style="vertical-align: middle;">
                <table cellspacing="0" cellpadding="0" border="0" align="center" width="555" height="97">
                    <tbody>
                        <tr>
                            <td valign="middle" width="160" style="vertical-align:middle; text-align: left;">
                                <img width="70" height="70" src="http://dl.dropbox.com/…….png" style="margin:0; margin-top: 4px; display: block;" alt="" />
                            </td>
                            <td valign="middle" style="vertical-align: middle; text-align: left;">
                                <h1 class="title" style="margin:0; padding:0; font-size:30px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Title of Report</span></singleline>
                                </h1>
                                <h1 class="title" style="margin:0; padding:0; font-size:15px; font-weight: normal; color: #192c45 !important;">
                                    <singleline label="Title"><span>Small Subhead</span></singleline>
                                </h1>
                            </td>
                            <td width="55" valign="middle" style="vertical-align:middle; text-align: center;">
                                <h2 class="date" style="margin:0; padding:0; font-size:13px; font-weight: normal; color: #192c45 !important; text-transform: uppercase; font-weight: bold; line-height:1;">
                                    <currentmonthname />December
                                </h2>
                                <h2 class="date" style="margin:0; padding:0; font-size:23px; font-weight: normal; color: #192c45 !important; font-weight: bold;">
                                     <currentyear />2011
                                </h2>
                            </td>

                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

ウェブページとしてのメール全体はここで見ることができます

回答:


381

はい、たくさんあります。

含むがこれらに限定されません:

  • 非分割スペース:&#160;または&nbsp;
  • 狭い改行なしスペース:(&#8239;文字参照なし)
  • en space:&#8194;または&ensp;
  • emスペース:&#8195;または&emsp;
  • 全角3スペース:&#8196;または&emsp13;
  • emあたり4のスペース:&#8197;または&emsp14;
  • emあたりのスペース: &#8198;文字参照は利用できません)
  • 図のスペース:&#8199;または&numsp;
  • 句読点スペース:&#8200; または&puncsp;
  • 薄いスペース: &#8201;  または&thinsp;
  • 髪のスペース:&#8202; または&hairsp;

span{background-color: red;}
<table>
<tr><td>non breaking space:</td><td> <span>&#160;</span> or <span>&nbsp;</span></td></tr>
<tr><td>narrow no-break space:</td><td> <span>&#8239;</span></td></tr>
<tr><td>en space:</td><td> <span>&#8194;</span> or <span>&ensp;</span></td></tr>
<tr><td>em space:</td><td> <span>&#8195;</span> or <span>&emsp;</span></td></tr>
<tr><td>3-per-em space:</td><td> <span>&#8196;</span> or <span>&emsp13;</span></td></tr>
<tr><td>4-per-em space:</td><td> <span>&#8197;</span> or <span>&emsp14;</span></td></tr>
<tr><td>6-per-em space:</td><td> <span>&#8198;</span></td></tr>
<tr><td>figure space:</td><td> <span>&#8199;</span> or <span>&numsp;</span></td></tr>
<tr><td>punctuation space:</td><td> <span>&#8200;</span> or <span>&puncsp;</td></tr>
<tr><td>thin space:</td><td> <span>&#8201;</span> or <span>&thinsp;</span></td></tr>
<tr><td>hair space:</td><td> <span>&#8202;</span> or <span>&hairsp;</span></td></tr>
</table>


3
Firefoxは、上記のすべてのスペースを同じ幅で、フォント内の1つのスペースより広い幅でレンダリングします。ただし、nbspは1つのスペースとしてレンダリングされ、改行しない文字が強制されます。本当の恥。たとえば、パディングが制御されている場合や、次のような構成で他の何かに渡される場合など、文字のみが機能する場合がありますbefore:
fyngyrz

2
@fyngyrz少なくともLinux上のFirefox 54では、これは(もう)正しくありません。ただし、フォントによって異なる場合もあります。Arialフォントファミリーが使用されているStack Overflowでこれをテストしました。
学生のみ

5
この空白タイプがjsfiddle.net/LcLg5u25の
Vadim Ovchinnikov

2
図のスペース$numsp;は、同じフォントの数字とまったく同じ幅になるように定義されているため、数字を揃えるのに非常に役立ちます。
Rudey 2017年

2
Windows上のFirefoxは今問題ありません(v.61)ところで。
MSC

13

他のスペース文字のコードがあり、そのようなコードはうまく機能しますが、文字自体はレガシー文字です。これらは、新しいドキュメントで使用するためではなく、既存の文字データに存在するため、文字セットに含まれています。フォントとブラウザのバージョンの組み合わせによっては、表現できない文字の一般的なグリフが表示される場合があります。詳細については、Unicodeスペースに関するページを確認してください

したがって、CSSを使用する方が安全であり、固定幅スペースの特定の幅だけでなく、必要な間隔を指定できます。私には思えるように、h2要素の周囲にスペースを追加したいだけの場合は、それらの要素にパディングを設定する(既に設定されているパディングの値を変更する:0設定)ことがうまく機能するはずです。


結局、インライン属性<h1 class = "title" style = "margin:0; margin-left:2px; padding:0; font-size:15px; font-weight:normal; color:#192c45! ; ">フォントファミリーがHelvetica Neueなどであっても、これが最も安全だと思います
wide_eyed_pupil

しかし、それらがレガシーであり、「既存の文字データに存在するためにのみ文字セットに含まれている」場合、それらはすぐにはなくなることはありません。私はあなたの主張を本当に見ていません。「ハーフスペース」を探すのに十分な「高度な」人は、おそらくマージンやパディングが適切ではないとすでに判断していると思います。私(&thinsp;4 PACK&thinsp;)は自分の要件に落ち着きました-マージンまたはパディングを使用することはこれにとってひどい考えでしょう
Simon_Weaver

1
@Simon_Weaver、私が説明するように、固定幅のスペース文字は確実に機能しません。実際の幅はのようなフォントに依存しない設定とは対照的に、フォントに依存しますが<span style="padding: 0 0.1em">4 PACK</span>、値を設定および調整する自由があります。
ユッカK.コルペラ14

1
かなり古いですが、このトピックについては、Peter K Sheerinの「EM 'n EN(およびその他の怪しげなキャラクター)の問題」(alistapart.com/article/emen)を参考にしてください。特に、これは過去14年間で改善された可能性がありますが、すべてのフォントがさまざまなスペースを正しくレンダリングするわけではないという事実があります。
Dave Land

1
ありますZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htmZERO WIDTH NON JOINER私はより頻繁にゼロ幅スペースよりも使用する傾向があるということ。
Reb.Cabin

9

これがあなたが参照しているものかどうかはわかりませんが、これは使用できるHTMLエンティティのリストです。

XMLおよびHTML文字エンティティ参照のリスト

「名前」列内のコンテンツを使用して、これらを & andで;

例: &nbsp;&emsp;など


したがって、マークアップされたテキスト(たとえば、「<p>」および「</ p>」内)のコンテキストでは、「&」はUnicodeのグリフ名を示しますよね?スペース文字が信号を送らない場合の「;」とは何ですか?ブラウザで解析されますか?
wide_eyed_pupil

HTMLパーサーは参照の終わりとして空白を引き続き認識するため、閉じセミコロンはある意味でオプションです。ただし、仕様では、セミコロン(w3.org/TR/html5/syntax.html#character-references)で終わる必要があると記述されています
isNaN1247

PS-これを回答としてマークしていただければ幸いです-これがあなたの質問に答えたと感じた場合:)
isNaN1247

2

私はこのUnicode 10進数コードを使用して&#8204;作業しました。詳細


1
ゼロ幅の非結合子(リンクしたもの)はスペース文字ではありません。スペースをとらず、単語の区切り文字として扱われません。唯一の目的は、隣接する文字が合字に結合されるのを防ぐことです。これは、非ラテン文字で役立つ場合があります。
duskwuff -inactive-

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.