Pytanie Tradycyjna wiodąca i wysokość linii CSS


Specyfikacja CSS stwierdza, że ​​wysokość linii powinna być zastosowana do tekstu przez podzielenie określonej wartości przez dwa i zastosowanie wyniku powyżej i poniżej linii tekstu.

Różni się to znacznie od tradycyjnego rozumienia wiodącego, co zwykle oznacza, że ​​odstępy są "dodawane" tylko powyżej linii tekstu. (Wiem, że to nie jest w 100% poprawne, ponieważ faktycznie wysokość linii nie dodaje miejsca, ale ustawia wysokość linii, jednak w ten sposób prostsze jest opisanie problemu).

Rozważmy ten przykładowy znacznik:

<!DOCTYPE html>
<html>
    <head>

    <style type="text/css">
    p
        {
        margin:0;
        font-size: 13pt;
        line-height: 15pt;
        }
    h1
        {
        margin:0;
        font-size: 21pt;
        line-height: 30pt;
        }
    </style>

    </head>
    <body>

    <h1>Title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
    <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <p>It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
    </body>
</html>

Jeśli wysokość linii równa się tradycyjnemu zrozumieniu prowadzenia, to odległość między <h1> i pierwszy <p> byłby równy odległości między <p>jest, ponieważ odległość ta jest określona przez prowadzenie. Tak jednak nie jest.

Podczas gdy odległość między <p>s pozostaje zgodne (p's line-height - p's font-size = 15 - 13 = 2pt), odległość pomiędzy <h1> i pierwszy <p> jest inny: jest równy (p's line-height - p's font-size)/2 + (h1's line-height - h1's font-size)/2 = (15 - 13)/2 + (30-21)/2 = 5.5pt.

Można to łatwo zauważyć gołym okiem, jeśli powyższy znacznik jest przetwarzany za pomocą przeglądarki.

Problem polega na tym, że tradycyjny sposób utrzymywania pionowego rytmu wizualnego na stronie polega na ustawianiu prowadzenia elementów w wielokrotnościach prowadzących. Ta metoda nie ma zastosowania w CSS, jak pokazano powyżej.

Mam 3 pytania:

  1. Czy moje rozumienie wysokości linii, prowadzenia i ich różnic jest poprawne?
  2. Czy istnieje sposób na utrzymanie pionowego rytmu przy użyciu CSS (poprzez naśladowanie tradycyjnego prowadzenia z CSS czy nie)?
  3. (Pytanie dodatkowe) Jaki był powód, dla którego wysokość linii różniła się od prowadzenia?

AKTUALIZACJA: dziękuję bardzo za twój wkład! Proszę zauważyć, że zaproponowałem własne rozwiązanie i będę wdzięczny za wszelkie komentarze na ten temat: https://stackoverflow.com/a/8335230/710356


12
2017-12-01 00:04


pochodzenie




Odpowiedzi:


  1. tak
  2. Tak. To nie jest bardzo proste, ale korzystanie position:relative;możesz poprawnie ustawić elementy, na przykład:

     h2 {
       font-size: 36px;
       line-height: 48px;
       position: relative;
       top: 6px;
     }
    

    Tutaj jest praca w toku próbny

  3. Ludzie, którzy zaprojektowali CSS, nie są typografami. Prawdopodobnie nie było to zamierzone.

  4. Odpowiedź premiowa: Oto rozmowa Jonathana Hoeflera o problemach z projektowaniem typu dla sieci i ograniczeniami CSS.

5
2017-12-01 00:16



Dzięki! Wygląda jednak na to, że wersja demo, z którą się łączysz, jest pustym plikiem gif. Ponadto nie widzę żadnych wartości ujemnych w kodzie. - sbichenko
Przepraszam, poprawiłem link i zapamiętałem, że nie użyłem ujemnych wartości. :-) - bookcasey
Nie musisz używać pozycjonowania, aby w rzeczywistości utrzymywać pionowy rytm. Można tego dokonać, zapewniając spójną wysokość linii (w stosunku do rozmiaru czcionki) i dolny margines. - joshnh


W porządku, to wydaje się działać lepiej niż moje inne rozwiązanie. Nadal zatrudnia dodatkowe <span>s wewnętrzne elementy blokowe. Sztuką jest ustawienie elementu bloku line-height do 1i dopasuj przęsła line-height, jednocześnie anulując to z góry i na dole margins. Zauważ, że wymaga to ustawienia wyświetlacza inline-block.

W rzeczywistości jednak ustawia marginesy (tak, aby między wierszami występowała przerwa w linii <h1> i <p>) staje się dość trudne i wymaga trochę matematyki. Sądzę więc, że próba zastosowania tradycyjnego podejścia typograficznego w prowadzeniu jest zbyt czasochłonna w CSS, aby faktycznie zostać wykorzystana w pracy programisty.

W każdym razie, oto ostatni kod:

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.p
            {
            display:inline-block;
            line-height: 32px;
            }

        span.h
            {
            display:inline-block;
            line-height: 64px;
            margin-top: -32px;
            margin-bottom: -32px;
            }

        p
            {
            margin:0;
            font-size: 26px;
            line-height: 1;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 1;
            }
        </style>

    </head>
    <body>

    <h1><span class="h">Molloy</span></h1>
    <p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
    <p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
    <h1><span class="h">Lorem Ipsum is simply</span></h1>
    </body>
</html>

1
2017-12-01 12:10





Dodaję własną odpowiedź, ale nie oznaczam jej jako "zaakceptowaną", ponieważ właśnie wymyśliłem tę metodę i nie sprawdziłem jej wystarczająco dokładnie. Jest również dość niechlujny pod względem czytelności znaczników.

Sztuką jest zawijanie każdego elementu, do którego chcemy zastosować nasz nagłówek <span> tag i ustaw <span>'s Właściwości CSS vertical-align albo middle lub sub (dają nieco inne wyniki i nie jestem pewien, dlaczego tak się różnią, ani jak dokładnie są) line-height do 0. Wynik jest bardzo zbliżony do tego, co jest potrzebne, więc odległość między nimi <h1> i <p> w powyższym przykładzie staje się prawie w prawo (nie całkiem, najwyraźniej), tj. równy <p>Wysokość linii. Nie jestem dobry z CSS, więc nie jestem pewny, jak to wpłynie na ogólny układ, czy jest on akceptowalny do używania takich hacków i czy byłby przyjazny dla wielu przeglądarek. Byłbym wdzięczny, gdybyś skomentował moje rozwiązanie.

Przykładowy znacznik:

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.lh
            {
            vertical-align: sub;
            line-height:0
            }
        p
            {
            margin:0;
            font-size: 26px;
            line-height: 30px;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 60px;
            }
        </style>

    </head>
    <body>

    <h1><span class="lh">Title</span></h1>
    <p><span class="lh">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
    <p><span class="lh">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
    <h1><span class="lh">Lorem Ipsum is simply</span></h1>
    </body>
</html>

0
2017-12-01 00:49



Minusem tego jest łatwość konserwacji i semantyka. Czy nie byłoby miło, gdyby CSS zaoferował nam więcej opcji! - joshnh
Wypróbuj SASS lub Compass - sarink


Zdaję sobie sprawę, że wątek jest stary, ale ja też miałem ten problem. Jeśli chcesz uzyskać ten sam efekt typograficzny, co edytory dokumentów tekstowych, takie jak Microsoft Word, istnieje specjalny przypadek dotyczący wysokości linii 1.

Zamiast linii wysokości: 1; put line-height: normal ;. Pozostałe wartości wysokości linii pozostają takie same (1,5 pozostaje jako 1,5 itd.).


0
2017-09-03 23:36