Czy istnieją inne kody spacji, takie jak & nbsp dla półprzestrzeni, spacji em, spacji en itp. Przydatne w HTML?


149

Zastanawiasz się, czy są dostępne inne kody do wykorzystania w biuletynie HTML.

Używałbym dopełnienia komórek lub marginesów, ale jestem nowy w tej kwestii HTML / CSS i nie mogę znaleźć zmiany, która wpływa zarówno na linię tytułu głównego, jak i podtytuł pod nią. Będąc e-mailem, waham się, czy grzebać w CSS, aby to uzyskać - ponieważ nie wiem, co klienci poczty e-mail nie lubią pod względem CSS w przeciwieństwie do wbudowanych znaczników.

Dla kontekstu szablon, którego używam, to Mute theme z fragmentu Mailchimp:

    <!-- 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>

Cały e-mail jako stronę internetową można zobaczyć tutaj

Odpowiedzi:


381

Tak, wielu .

Zawierające Ale nie ograniczone do:

  • nie dzieląca przestrzeń: &#160;lub&nbsp;
  • wąska przestrzeń bez podziału: &#8239;(brak odniesienia do znaków)
  • en space: &#8194;lub&ensp;
  • spacja em: &#8195;lub&emsp;
  • Przestrzeń 3 na em: &#8196;lub&emsp13;
  • Przestrzeń 4 na em: &#8197;lub&emsp14;
  • Spacja 6 na em: &#8198;(brak odniesienia do znaków)
  • miejsce na figury: &#8199;lub&numsp;
  • spacja interpunkcyjna: &#8200; lub&puncsp;
  • cienka przestrzeń: &#8201; lub&thinsp;
  • przestrzeń na włosy: &#8202; lub&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 renderuje wszystkie powyższe spacje z tą samą szerokością, szerszą niż jedna spacja w czcionce, z wyjątkiem nbsp, gdzie renderuje jako jedną spację i nakłada znak nierozdzielający. Szkoda. Są przypadki, w których wystarczy tylko postać, na przykład, gdy wypełnienie jest kontrolowane lub przekazywane do czegoś innego z konstrukcjami takimi jakbefore:
fyngyrz

2
@fyngyrz Przynajmniej w Firefoksie 54 na Linuksie, to nieprawda (już). Może to jednak zależeć od czcionki; Przetestowałem to na Stack Overflow, gdzie używana jest rodzina czcionek Arial.
Tylko student.

5
Dla każdego, kto chce tylko zobaczyć, jak te białe znaki wyglądają jak jsfiddle.net/LcLg5u25
Vadim Ovchinnikov

2
przestrzeń cyfr $numsp;jest bardzo przydatna do wyrównywania liczb, ponieważ przestrzeń jest definiowana tak, aby była dokładnie tak szeroka, jak liczba w tej samej czcionce.
Rudey

2
Firefox na Windows jest teraz w porządku (v.61) BTW.
MSC

13

Istnieją kody dla innych znaków spacji i jako takie działają dobrze, ale same znaki są znakami starszymi. Zostały one włączone do zestawów znaków tylko ze względu na ich obecność w istniejących danych znaków, a nie do wykorzystania w nowych dokumentach. W przypadku niektórych kombinacji czcionki i wersji przeglądarki mogą powodować wyświetlanie ogólnego glifu o niemożliwym do przedstawienia charakterze. Aby uzyskać szczegółowe informacje, sprawdź moją stronę o przestrzeniach Unicode .

Tak więc używanie CSS jest bezpieczniejsze i pozwala określić dowolną wielkość odstępów, a nie tylko określoną szerokość odstępów o stałej szerokości. Jeśli chcesz tylko dodać odstępy wokół elementów h2, jak mi się wydaje, to ustawienie dopełnienia na tych elementach (zmiana wartości dopełnienia: ustawienia 0, które już masz) powinno działać dobrze.


Dzięki Skończyło się na użyciu atrybutu wbudowanego <h1 class = "title" style = "margin: 0; margin-left: 2px; padding: 0; font-size: 15px; font-weight: normal; color: # 192c45! ; "> To chyba najbezpieczniejsze, mimo że rodzina czcionek to Helvetica Neue itp.
wide_eyed_pupil

Ale jeśli są starsze i `` zawarte w zestawach znaków tylko ze względu na ich obecność w istniejących danych postaci '', oznacza to, że nie znikną w najbliższym czasie. Naprawdę nie widzę, żebyś się kłócił. Zakładam, że każdy „zaawansowany” na tyle, aby szukać „pół spacji”, prawdopodobnie już zdecydował, że margines lub wypełnienie nie są odpowiednie. Zdecydowałem się na (&thinsp;4 PACK&thinsp;)moje wymagania - użycie marginesów lub wypełnienia byłoby okropnym pomysłem na to
Simon_Weaver

1
@Simon_Weaver, jak opisuję, znaki spacji o stałej szerokości nie działają niezawodnie. Są również tępym narzędziem: stały zestaw szerokości, chociaż rzeczywiste szerokości są zależne od czcionki, w przeciwieństwie do ustawień niezależnych od czcionki, takich jak <span style="padding: 0 0.1em">4 PACK</span>swoboda ustawiania i dostosowywania wartości.
Jukka K. Korpela,

1
Chociaż jest dość stary, "The Trouble With EM 'n EN (and Other Shady Characters)" Petera K. Sheerina ( alistapart.com/article/emen ) jest nadal przydatną lekturą na ten temat. W szczególności - chociaż mogło się to poprawić w ciągu ostatnich 14 lat - fakt, że nie wszystkie kroje pisma f̶o̶n̶t̶s̶ poprawnie renderują różne spacje.
Dave Land

1
Istnieją również ZERO WIDTH JOINER fileformat.info/info/unicode/char/200d/index.htm i ZERO WIDTH NON JOINERże mam skłonność do częstszego niż zerowej szerokości spacji użyć.
Reb Cabin

9

Nie jestem pewien, czy to jest to, o czym mówisz, ale to jest lista encji HTML, których możesz użyć:

Lista odniesień do encji znakowych XML i HTML

Korzystając z zawartości w kolumnie „Nazwa”, możesz po prostu umieścić je w &i;

Na przykład &nbsp;, &emsp;itd


Więc w kontekście zaznaczonego tekstu (powiedz wewnątrz „<p>” i „</p>”, „&” oznacza nazwę glifu Unicode, prawda? Co to jest „;”, aby znak spacji nie sygnalizował, kiedy to jest analizowane przez przeglądarkę?
wide_eyed_pupil,

Zamykający średnik jest opcjonalny w pewnym sensie, ponieważ parser HTML nadal będzie widział białe znaki jako koniec odwołania. Jednak specyfikacja stwierdza, że ​​„musisz” kończyć się średnikiem ( w3.org/TR/html5/syntax.html#character-references )
isNaN1247,

PS - Byłbym wdzięczny, gdybyś
oznaczył

2

Użyłem tego kodu dziesiętnego Unicode &#8204;i działałem. więcej szczegółów


1
Łącznik niebędący łącznikiem o zerowej szerokości (który został połączony) nie jest znakiem spacji. Nie zajmuje spacji i nie jest traktowany jako separator wyrazów. Jedynym celem jest zapobieganie łączeniu sąsiednich znaków w ligaturę, co jest czasami przydatne w skryptach innych niż łacińskie.
duskwuff

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.