Чи існують інші коди пробілів, як & nbsp для напівпробілів, em-пробілів, en-пробілів тощо, корисних у HTML?


149

Цікаво, чи є інші коди, доступні для використання в інформаційному бюлетені HTML.

Я б використовував підкладку або поля, але я новачок у цій справі HTML / CSS, і я не можу знайти зміни, які впливають як на рядок "Основний заголовок", так і на його підзаголовок. Будучи електронною поштою, я не вагаюсь спілкуватися з CSS, щоб отримати це просто так - оскільки я не знаю, що клієнтам електронної пошти не подобається у вигляді CSS на відміну від вбудованої розмітки.

Для контексту шаблон, який я використовую, - це тема відключення звуку від Mailchimp snip:

    <!-- 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 простір: &#8194;або&ensp;
  • em простір: &#8195;або&emsp;
  • 3-х разовий простір: &#8196;або&emsp13;
  • Простір 4-х на одиницю: &#8197;або&emsp14;
  • Простір 6-на-ем: &#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 надає всі вищезазначені пробіли як однакову ширину, ширше, ніж один пробіл у шрифті, за винятком nbsp, де він відображається як один простір і накладає нерозривний символ. Справжній сором. Бувають випадки, коли робитиме лише персонаж, наприклад, коли before:
накладка

2
@fyngyrz Принаймні у Firefox 54 в Linux, це не відповідає дійсності (більше). Це може залежати також від шрифту; Я перевірив це на Stack Overflow, де використовується сім'я шрифтів Arial.
Просто студент

5
Для всіх, хто просто хоче побачити, як виглядають такі типи пробілів jsfiddle.net/LcLg5u25
Вадим Овчинников

2
простір фігур $numsp;є дуже корисним для вирівнювання чисел, оскільки пробіл визначено точно таким же широким, як число одного шрифту.
Rudey

2
Firefox у Windows зараз добре (v.61) BTW.
MSC

13

Існують коди для інших символів космосу, і коди як такі добре працюють, але самі символи мають застарілий характер. Вони були включені в набори символів лише завдяки їх наявності в існуючих символьних даних, а не для використання в нових документах. Для деяких комбінацій шрифту та версії веб-переглядача вони можуть спричинити показ загального гліфа нерепрезентативного характеру. Детальніше перегляньте мою сторінку про пробіли Unicode .

Тож використання CSS є більш безпечним і дозволяє задавати будь-яку бажану кількість інтервалу, а не лише конкретну ширину пробілів фіксованої ширини. Якщо ви просто хочете, щоб ви додали проміжки навколо своїх елементів h2, як мені здається, то встановлення прокладки на ці елементи (зміна значення параметрів прокладки: 0 у вас уже є) має спрацювати чудово.


Дякую, що я застосував атрибут inline <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; weight-font: normal; color: # 192c45! ; "> Я думаю, що це найбезпечніше, хоча сім'я шрифтів Helvetica Neue і т.
Д.

Але якщо вони є застарілими і "включені в набори символів лише завдяки їх наявності у наявних даних про символи", це означає, що вони не відійдуть у найближчий час. Я насправді не бачу вас аргументу. Я припускаю, що хтось із «просунутих», щоб шукати «половини пробілів», напевно, вже вирішив, що поле чи запас не підходять. Я зважився на (&thinsp;4 PACK&thinsp;)свої вимоги - використання маржа або прокладки було б страшною ідеєю для цього
Simon_Weaver

1
@Simon_Weaver, як я описую, символи простору фіксованої ширини не працюють надійно. Вони також є тупим інструментом: фіксований набір ширини, хоча фактичні ширини залежать від шрифту, на відміну від параметрів, незалежних від шрифту, як <span style="padding: 0 0.1em">4 PACK</span>, свобода в налаштуванні та налаштування значень.
Юкка К. Корпела

1
Незважаючи на те, що він досить старий, "Біда Петра К. Шеріна" Проблеми з EM 'n EN (та іншими тінистими персонажами) "( alistapart.com/article/emen ) все ще корисно читати на цю тему. Зокрема - хоча це може покращитися за останні 14 років - той факт, що не всі шрифти f̶o̶n̶t̶s̶ відображають різні простори правильно.
Дейв Ленд

1
Є також ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm, і ZERO WIDTH NON JOINERя, як правило, використовую частіше, ніж простори нульової ширини.
Reb.Cabin

9

Не впевнений, що це саме ви посилаєтесь, але це список HTML-об'єктів, якими ви можете скористатися:

Список посилань на юридичні особи XML та HTML

Використовуючи вміст у стовпці "Ім'я", ви можете просто загорнути їх у &та;

Наприклад &nbsp;, &emsp;і т.д.


Тож у контексті розміченого тексту (скажімо всередині "<p>" та "</p>" "&" позначає ім'я гліфів Unicode, правда? Що таке ";", що пробіл не сигналізує, коли це розбирається браузером?
wide_eyed_pupil

Закриваюча крапка з двокрапкою необов’язково в певному сенсі, оскільки HTML-аналізатор все ще буде бачити пробіл як кінець посилання. Однак у специфікації зазначено, що ви повинні "закінчити" крапкою з комою ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247

PS - Я все одно вдячний, якщо ви позначите це як відповідь - якщо ви вважаєте, що це відповів на ваше запитання :)
isNaN1247

2

Я використовував цей код Unicode Decimal &#8204;і працював. Детальніше


1
Нульова ширина неприєднувача (яку ви зв'язали) не є символом пробілу. Він не займає місця і не розглядається як роздільник слів. Єдиною метою є запобігання приєднання сусідніх символів до лігатури, що іноді корисно в не латинських сценаріях.
duskwuff -inactive-

1

Що з нормальним кодованим символом білого простору?

&#32;
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.