Line height là gì

Bài viết được dịch trường đoản cú bài bác Deep dive sầu CSS: fonts metrics, line-height & vertical-align của người sáng tác Vincent De Oliveira.quý khách vẫn xem: Line-height là gì

Line-height với vertical-align là các thuộc tính CSS đơn giản dễ dàng. Đơn giản đến nỗi phần đông bọn họ đều bị tngày tiết phục rằng tôi đã hoàn toàn phát âm phương pháp chúng hoạt động với bí quyết thực hiện bọn chúng. Nhưng không phải vậy. Thực sự bọn chúng tinh vi, có lẽ là phức hợp độc nhất vô nhị, bởi bọn chúng nhập vai trò bao gồm trong Việc tạo thành một Một trong những tác dụng không nhiều được nghe biết của CSS: inline formatting context.

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

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

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

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

Hãy xem đoạn code HTML dễ dàng bên dưới, một thẻ cất 3 thẻ , từng thẻ thực hiện một font-family không giống 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 cùng với những font-family không giống nhau sẽ tạo nên ra các bộ phận với chiều cao khác nhau:


*

Các font-family khác biệt, thuộc font-kích thước, sinh ra các chiều cao không giống nhau

Tuy bọn họ đoán trước được câu hỏi kia, cơ mà vì sao font-size: 100px ko có mặt những phần tử cùng với độ cao 100px? Tôi đã đo và cảm nhận các giá chỉ trị: Helvetica: 115px, Gruppo: 97px và Catamaran: 164px


*

Các phần tử cùng với font-size: 100px bao gồm độ cao biến hóa tự 97px mang đến 164px

Dù có vẻ tương đối kỳ lạ, nhưng mà vấn đề đó trọn vẹn phía bên trong dự đân oán. Lý bởi nằm ở phiên bản thân những font text. Dưới đây là bí quyết các phông chữ hoạt động:

Dựa trên đơn vị chức năng tương đối của chính nó, những chỉ số của phông chữ (phông metrics) sẽ tiến hành xác định (ascender, descender, capital height, x-height, v..v..). Crúc ý là một trong những cực hiếm rất có thể tràn ra bên ngoài em-square.

Trên trình chuyên chú, những đơn vị chức năng tương đối hoàn toàn có thể được co và giãn nhằm vừa với font-size mong ước.

Hãy msống fonts Catamaran bằng FontForge để thấy những chỉ số:

em-square là 1000ascender là 1100 cùng descender là 540. Sau Lúc chất vấn thử, có vẻ như các trình cẩn thận 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 cực hiếm này có thể khác nhau!). Chúng ta cũng chăm chú rằng Capital Height là 680 và X height là 485.


*

Các chỉ số của fonts khi xem trên FontForge

Điều đó có nghĩa là phông Catamaran áp dụng 1100 + 540 đơn vị bên trên 1000 đơn vị chức năng em-square, công dụng là 164px lúc thiết lập cấu hình cực hiếm font-size: 100px. Chiều cao được xem toán thù (computed height) này tư tưởng content-area của một trong những phần tử cùng tôi đã đề cập tới tư tưởng này trong suốt phần còn lại của bài viết. Bạn có thể coi content-area là vùng mà lại thuộc tính background được áp dụng (điều đó cũng không trọn vẹn thiết yếu xác).

Chúng ta hoàn toàn có thể dự đân oán rằng độ dài của những vần âm in hoa là 68px (680 đối chọi vị) và các vần âm in thường (x-height) là 49px (485 đơn vị). Kết quả là 1ex = 49px cùng 1em = 100px, chưa phải 164px (suôn sẻ là em là quý giá dựa vào font-size, chưa hẳn chiều cao được tính toán).


*

Font Catamaran: UPM - Units Per Em - với lượng px khớp ứng khi áp dụng font-size: 100px

Trước lúc mày mò kỹ rộng, giỏi xem coi đông đảo trang bị bên trên bao gồm ý nghĩa gì. Khi 1 phần tử được hiển thị trên màn hình, nó có thể được chế tác vày những dòng, nhờ vào phạm vi của nó. Mỗi mẫu được tạo nên do một tốt các thành phần inline (thẻ HTML hay những thành phần inline vô danh nhỏng text) và mỗi cái này được hotline là một trong line-box. Chiều cao của một line-box dựa trên chiều cao của những thành phần nhỏ của nó. Do đó trình phê chuẩn và tính toán độ cao của mỗi bộ phận inline, tự đó tính ra chiều cao của line-box (từ điểm cao nhất đến điểm phải chăng duy nhất của những bộ phận con). Kết trái là một line-box luôn đủ cao để rất có thể chứa tất cả các bộ phận bé của chính nó (mang định là vậy).

Mỗi phần tử HTML thực ra là một ck các line-box. Nếu bạn biết độ cao của mỗi line-box, các bạn sẽ biết được chiều cao của thành phần kia.

Nếu họ sửa code HTML ở trên thành ráng này:

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

line-box đầu tiên với ở đầu cuối cất một phần tử inline vô danh (text)line-box thứ hai chứa 2 bộ phận inline vô danh và 3 thẻ


*

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

Chúng ta thấy rõ rằng line-box thứ hai cao hơn các line-box không giống, vị content-area của các thành phần con của chính nó, cùng đúng đắn rộng là phần tử áp dụng fonts Catamaran.

line-height: những sự việc với chưa dừng lại ở đó nữa

Tới tiếng, tôi đang giới thiệu tới chúng ta 2 khái niệm: content-arealine-box. Nếu các bạn nhớ, tôi đã bảo rằng độ cao của một line-box được xem tân oán dựa trên chiều cao của những bộ phận nhỏ của chính nó chứ không hề bảo rằng nó được xem toán dựa vào độ cao của content-area của những phần tử con đó. Điều này tạo thành một biệt lập to.

Xem thêm: Cùng Tìm Hiểu Về Dormammu Là Ai Mới Là Nhân Vật Phản Diện Mạnh Nhất Mcu

Nghe có vẻ lạ, tuy vậy một trong những phần tử inline có 2D cao không giống nhau: chiều cao content-area với chiều cao virtual-area (tôi sẽ tạo nên khái niệm virtual-area nhằm thay mặt đến chiều cao cơ mà bọn họ thấy được được, các bạn sẽ ko thấy trong sệt tả đâu).

độ cao content-area được tư tưởng bởi vì các chỉ số của font (như đang nói sinh sống trên).chiều cao virtual-area là line-height, với nó là chiều cao được dùng làm tính toán chiều cao của line-box.


Các bộ phận inline có 2D cao không giống nhau

do vậy, điều đó đang phá vỡ ý niệm thường thì rằng line-height là khoảng cách thân các baseline. Trong CSS thì không giống như vậy.


Trong CSS, line-height chưa hẳn là khoảng cách thân những baseline

Chiều cao không giống nhau thân virtual-area cùng content-area được call là leading. Một nửa leading được cộng thêm vào phía trên của content-area, nửa sót lại được thêm vào đó vào phía bên dưới. Do kia content-area luôn luôn chính giữa của virtual-area.

Dựa trên các cực hiếm được tính toán, line-height (virtual-area) rất có thể bởi, cao hơn nữa hoặc rẻ rộng content-area. Trong ngôi trường hợp virtual-area rẻ hơn, leading vẫn âm và một line-box trông vẫn tốt rộng những thành phần con của nó.

Còn gồm những loại bộ phận inline khác:

những phần tử inline thay thế sửa chữa (

Các thành phần inline sửa chữa, inline-block/inline-* và blocksified bao gồm content-area bởi với độ cao, tuyệt line-height, của chúng

Tuy nhiên, vấn đề của chúng ta là quý hiếm normal của line-height là bao nhiêu? Và câu trả lời, nhỏng Việc tính toán thù chiều cao content-area, được tìm thấy trong những chỉ số của font.

Vậy thì hãy quay lại với FontForge. em-square của Catamaran là 1000, tuy nhiên chúng ta thấy nhiều quý giá ascender/descender không giống nhau:

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

Trong trường phù hợp của họ, phông Catamaran có mang line gap với cái giá trị là 0, cần line-height: normal đã bằng cùng với content-area, tức là 1640 đơn vị chức năng, hay là một.64.

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

Do kia, phân minh rằng việc đặt line-height: một là một phương pháp có tác dụng xấu. Tôi xin kể lại rằng những quý hiếm không đơn vị chức năng có tính tương so với font-kích cỡ, không tương đối với content-area, với ngôi trường phù hợp virtual-area phải chăng rộng content-area là nguồn gốc của khá nhiều vấn đề.


Sử dụng line-height: 1 rất có thể tạo nên một line-box phải chăng rộng content-area

Nhưng không những có từng line-height: 1. Trong số 1117 font được sở hữu trên trang bị của tôi (đề xuất, tôi mua tất cả những font của Google Web Fonts), 1059 fonts, khoảng tầm 95%, tất cả line-height to hơn 1. line-height của toàn bộ những fonts kia xê dịch tự 0.618 cho tới 3.378. Bạn vừa đọc đúng rồi đấy, 3.378!

Một chút chi tiết nữa về vấn đề tính toán thù line-box:

Với các bộ phận inline thay thế, inline-bloông xã và blocksified: padding, margin và border làm tăng height đề xuất có tác dụng tăng độ cao content-area cùng line-box.