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.Tradycyjna linia wiodąca i wysokość linii CSS
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 następujący przykład znaczników:
<!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 line-height była równa tradycyjnego rozumienia prowadzącej, to odległość między <h1> i pierwszym <p> byłaby równa odległości między <p> „s, ponieważ tej odległości jest zdefiniowany przez prowadzącego. Tak jednak nie jest.
natomiast odstęp między <p> s pozostaje spójna (p's line-height - p's font-size = 15 - 13 = 2pt), odległość między <h1> i pierwszym <p> jest inna, jest to równoznaczne z (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 wiodących elementów w wielokrotnościach prowadzących. Ta metoda nie ma zastosowania w CSS, jak pokazano powyżej.
mam 3 pytania:
- Czy moje rozumienie line-height, prowadząc i ich różnice są prawidłowe?
- Czy istnieje sposób na utrzymanie rytmu pionowego za pomocą CSS (poprzez naśladowanie tradycyjnego prowadzenia z CSS czy nie)?
- (Pytanie dodatkowe) Jakie było uzasadnienie utworzenia linii o wysokości tak różnej od wiodącej?
AKTUALIZACJA: dziękuję bardzo za twój wkład! Należy pamiętać, że zaproponował własne rozwiązanie i byłbym bardzo wdzięczny za wszelkie komentarze na jej temat: https://stackoverflow.com/a/8335230/710356
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 utrzymać pionowy rytm w rzeczywistości. Można tego dokonać, zapewniając spójną wysokość linii (w stosunku do rozmiaru czcionki) i dolny margines. – joshnh