LINE-HEIGHT LÀ GÌ

     

Bài viết được dịch từ bài xích Deep dive CSS: fonts metrics, line-height & vertical-align của người sáng tác Vincent De Oliveira.Bạn vẫn xem: Line-height là gì

Line-height cùng vertical-align là những thuộc tính CSS đơn giản. Đơn giản mang đến nỗi hầu hết họ đều bị thuyết phục rằng mình đã hoàn toàn hiểu phương pháp chúng vận động và cách sử dụng chúng. Nhưng không hẳn vậy. Thực sự chúng phức tạp, chắc hẳn rằng là phức hợp nhất, bởi vì chúng đóng vai trò bao gồm trong bài toán tạo thành trong những tính năng ít được biết đến của CSS: inline formatting context.Bạn đã xem: Line-height là gì

Ví dụ, line-height hoàn toàn có thể nhận giá bán trị là một độ nhiều năm hoặc một quý giá không đối kháng vị, với giá trị mang định là normal. Được rồi, vậy normal nghĩa là như vậy nào? họ thường hiểu rằng nó là (hoặc đề nghị là) 1, hoặc có thể là 1.2, thậm chí còn đặc tả của CSS còn ko mô tả cụ thể về vụ việc này. Bọn họ biết rằng giá trị không đơn vị chức năng của line-height có tính tương đối với font-size, nhưng sự việc là font-size: 100px khác nhau đối với các font-family không giống nhau, vậy thì line-height luôn luôn luôn giống giỏi khác nhau? Nó có thực sự nhận giá trị giữa 1 cùng 1.2? và vertical-align, ý nghĩa sâu sắc liên quan mang lại line-height của nó là gì?

Tìm gọi sâu về một nguyên tắc không-đơn-giản của CSS...

Bạn đang xem: Line-height là gì

Hãy nói tới font-size trước

Hãy coi đoạn code HTML dễ dàng và đơn giản bên dưới, một thẻ đựng 3 thẻ , mỗi thẻ sử dụng một font-family khác nhau:

p> span class="a">Baspan> span class="b">Baspan> span class="c">Baspan>p>p font-size: 100px .a font-family: Helvetica .b font-family: Gruppo .c font-family: Catamaran Sử dụng cùng một font-size với các font-family không giống nhau sẽ tạo nên các phần tử với độ cao khác nhau:


*

Các font-family không giống nhau, cùng font-size, sinh ra các chiều cao khác nhau

Tuy bọn họ đoán trước được bài toán đó, nhưng lý do font-size: 100px không xuất hiện các phần tử với chiều cao 100px? Tôi vẫn đo với nhận được những giá trị: Helvetica: 115px, Gruppo: 97px với Catamaran: 164px


*

Các phần tử với font-size: 100px bao gồm chiều cao thay đổi từ 97px cho 164px

Dù có vẻ như hơi kỳ lạ, nhưng mà điều này hoàn toàn nằm vào dự đoán. Tại sao nằm ở bạn dạng thân các font chữ. Dưới đấy là cách những font chữ hoạt động:

Dựa trên đối chọi vị tương đối của nó, những chỉ số của phông chữ (font metrics) sẽ được khẳng định (ascender, descender, capital height, x-height, v..v..). để ý là một số giá trị rất có thể tràn ra ngoài em-square.

Trên trình duyệt, các đơn vị tương đối hoàn toàn có thể được giãn nở để vừa với font-size mong muốn.

Hãy mở fonts Catamaran bằng FontForge nhằm xem những chỉ số:

em-square là 1000ascender là 1100 và descender là 540. Sau khoản thời gian kiểm tra thử, có vẻ các trình chăm nom sử dụng những giá trị HHead Ascent/Descent bên trên MacOS cùng Win Ascent/Descent trên Windows (các quý hiếm này hoàn toàn có thể khác nhau!). Chúng ta cũng chú ý rằng Capital Height là 680 và X height là 485.


*

Các chỉ số của font lúc chứng kiến tận mắt trên FontForge

Điều đó có nghĩa là font Catamaran sử dụng 1100 + 540 đơn vị chức năng trên 1000 đơn vị em-square, hiệu quả là 164px khi tùy chỉnh giá trị font-size: 100px. Chiều cao được thống kê giám sát (computed height) này có mang content-area của 1 phần tử cùng tôi vẫn đề cập tới khái niệm này trong veo phần còn lại của bài xích viết. Chúng ta có thể coi content-area là vùng cơ mà thuộc tính background được áp dụng (điều này cũng không trọn vẹn chính xác).

Chúng ta có thể dự đoán rằng độ cao của các chữ mẫu in hoa là 68px (680 đơn vị) và các chữ dòng in thường (x-height) là 49px (485 1-1 vị). Công dụng là 1ex = 49px và 1em = 100px, chưa phải 164px (may mắn là em là giá chỉ trị dựa vào font-size, không phải chiều cao được xem toán).


*

Font Catamaran: UPM - Units Per Em - và lượng pixel tương ứng khi áp dụng font-size: 100px

Trước khi khám phá kỹ hơn, giỏi xem xem đa số thứ bên trên có chân thành và ý nghĩa gì. Khi một phần tử được hiển thị trên màn hình, nó có thể được tạo bởi nhiều dòng, phụ thuộc độ rộng lớn của nó. Mỗi cái được tạo do một hay nhiều bộ phận inline (thẻ HTML giỏi các phần tử inline vô danh như text) cùng mỗi chiếc này được gọi là một trong line-box. Chiều cao của một line-box dựa trên chiều cao của các phần tử con của nó. Cho nên vì vậy trình thông qua sẽ giám sát chiều cao của mỗi phần tử inline, từ kia tính ra độ cao của line-box (từ điểm tối đa đến điểm thấp duy nhất của các thành phần con). Công dụng là một line-box luôn luôn đủ cao để có thể chứa toàn bộ các thành phần con của chính nó (mặc định là vậy).

Mỗi thành phần HTML thực ra là một ông chồng các line-box. Nếu như bạn biết độ cao của từng line-box, các bạn sẽ biết được độ cao của bộ phận đó.

Nếu chúng ta sửa code HTML làm việc trên thành nỗ lực này:

p> Good design will be better. Span class="a">Baspan> span class="b">Baspan> span class="c">Baspan> We get lớn make a consequence.p>nó sẽ xuất hiện 3 line-box:

line-box trước tiên và cuối cùng chứa 1 phần tử inline vô danh (text)line-box thứ 2 chứa 2 bộ phận inline vô danh cùng 3 thẻ


*

Một thẻ (đường viền đen) được tạo ra thành từ các line-box (đường viền trắng) chứa các thành phần inline (đường viền trơn) cùng các thành phần inline vô danh (đường viền nét đứt)

Chúng ta thấy rõ rằng line-box thứ 2 cao hơn các line-box khác, vì content-area của các phần tử con của nó, và đúng đắn hơn là bộ phận sử dụng fonts Catamaran.

line-height: các vấn đề và không dừng lại ở đó nữa

Nghe dường như lạ, nhưng 1 phần tử inline có 2d cao không giống nhau: độ cao content-area và độ cao virtual-area (tôi đã tạo thành khái niệm virtual-area để thay mặt đại diện cho chiều cao mà họ nhìn thấy được, bạn sẽ không thấy trong quánh tả đâu).

Xem thêm: Top 10 Laptop Giá Rẻ Đáng Mua Nhất 2021 (Và Đầu 2022), Please Wait

chiều cao content-area được quan niệm bởi các chỉ số của font (như đang nói sinh hoạt trên).chiều cao virtual-area là line-height, với nó là độ cao được sử dụng để giám sát chiều cao của line-box.

Các phần tử inline có 2d cao khác nhau

Như vậy, điều này đã phá vỡ lẽ quan niệm thông thường rằng line-height là khoảng cách giữa các baseline. Trong CSS thì không như vậy.

Trong CSS, line-height chưa phải là khoảng cách giữa những baseline

Chiều cao khác nhau giữa virtual-area cùng content-area được gọi là leading. Một phần leading được thêm vào đó vào phía trên của content-area, nửa sót lại được cộng thêm vào phía dưới. Cho nên vì vậy content-area luôn ở giữa của virtual-area.

Dựa trên các giá trị được tính toán, line-height (virtual-area) hoàn toàn có thể bằng, cao hơn hoặc thấp hơn content-area. Vào trường hợp virtual-area thấp hơn, leading vẫn âm cùng một line-box trông đang thấp hơn các thành phần con của nó.

Còn có các loại phần tử inline khác:

các bộ phận inline sửa chữa (

Các thành phần inline núm thế, inline-block/inline-* và blocksified tất cả content-area bằng với chiều cao, tốt line-height, của chúng

Tuy nhiên, vụ việc của bọn họ là quý hiếm normal của line-height là bao nhiêu? cùng câu trả lời, như việc đo lường chiều cao content-area, được tìm thấy trong những chỉ số của font.

Vậy thì hãy quay trở lại với FontForge. Em-square của Catamaran là 1000, nhưng chúng ta thấy những giá trị ascender/descender không giống nhau:

Ascent/Descent thông thường: ascender là 770 và descender là 230. Được thực hiện để vẽ ký kết tự (bảng "OS/2")Các chỉ số Ascent/Descent: ascender là 1100 cùng descender là 540. Được áp dụng để tính độ cao content-area (bảng "hhea" và bảng "OS/2")chỉ số Line Gap. Được áp dụng cho line-height: normal, bằng cách cộng thêm quý giá này vào những chỉ số Ascent/Descent (bảng "hhea")

Trong trường vừa lòng của bọn chúng ta, phông Catamaran quan niệm line gap với giá trị là 0, bắt buộc line-height: normal sẽ bằng với content-area, có nghĩa là 1640 đơn vị, hay 1.64.

Để so sánh, fonts Arial quan niệm em-square với giá trị 2048 đơn vị, ascender = 1854, descender = 434 với line gap = 67. Nghĩa là với font-size: 100px thì content-area sẽ là 112px (1117 1-1 vị) (Người dịch: (1854 + 434) * 1000 / 2048 = 1117,1875) với line-height: normal là 115px (1150 đơn vị hay 1.15). Tất cả các chỉ số này là của riêng biệt font và được tùy chỉnh bởi người thiết kế font.

Do đó, phân biệt rằng vấn đề đặt line-height: một là một bí quyết làm xấu. Tôi xin nhắc lại rằng các giá trị không đơn vị chức năng có tính tương đối với font-size, không tương so với content-area, và trường đúng theo virtual-area thấp rộng content-area là xuất phát của rất nhiều vấn đề.

Xem thêm: Top 9 Lg V50 Có 2 Sim Không, Mua Lg V50 2 Sim Cũ Mới 99% Chính Hãng

Sử dụng line-height: 1 có thể tạo ra một line-box thấp hơn content-area

Nhưng không chỉ có có từng line-height: 1. Trong số 1117 font được cài trên máy của mình (phải, tôi cài toàn bộ các font của Google web Fonts), 1059 font, khoảng tầm 95%, có line-height lớn hơn 1. Line-height của tất cả các fonts đó giao động từ 0.618 tới 3.378. Chúng ta vừa phát âm đúng rồi đấy, 3.378!

Một chút cụ thể nữa về việc đo lường và tính toán line-box:

Với các phần tử inline thế thế, inline-block với blocksified: padding, margin cùng border làm tăng height cần làm tăng chiều cao content-area với line-box.