Bài viết được dịch từ bài bác Deep dive sầu CSS: fonts metrics, line-height và vertical-align của tác giả Vincent De Oliveira.

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

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

lấy ví dụ như, line-height có thể dìm giá trị là một trong những độ dài hoặc một quý hiếm không đơn vị chức năng, với cái giá trị mặc định là normal. Được rồi, vậy normal tức thị như thế nào? Chúng ta hay hiểu rõ rằng nó là (hoặc đề nghị là) 1, hoặc hoàn toàn có thể là một trong những.2, thậm chí là quánh tả của CSS còn không biểu hiện cụ thể về sự việc này. Chúng ta biết rằng quý giá ko đơn vị chức năng của line-height có tính tương đối với font-kích thước, nhưng lại sự việc là font-size: 100px khác nhau đối với những font-family khác nhau, vậy thì line-height luôn luôn tương đương tốt khác nhau? Nó tất cả thực thụ thừa nhận quý hiếm thân 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 cơ chế không-đơn-giản của CSS...

Hãy nói về font-kích thước trước

Hãy coi đoạn code HTML đơn giản bên dưới, một thẻ cất 3 thẻ , từng 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-kích thước với những font-family khác nhau sẽ khởi tạo ra các bộ phận cùng với độ cao khác nhau:

*

Các font-family không giống nhau, thuộc font-form size, ra đời các chiều cao khác nhau

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

*

Các thành phần cùng với font-size: 100px bao gồm chiều cao thay đổi từ bỏ 97px mang đến 164px

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

Dựa trên đơn vị chức năng kha khá của chính nó, các chỉ số của phông chữ (phông metrics) sẽ được xác minh (ascender, descender, capital height, x-height, v..v..). Crúc ý là một số trong những quý giá hoàn toàn có thể tràn ra ngoài em-square.

Trên trình để mắt tới, những đơn vị tương đối rất có thể được giãn nở nhằm vừa với font-size mong ước.

Hãy mngơi nghỉ phông Catamaran bởi FontForge để thấy những chỉ số:

em-square là 1000ascender là 1100 cùng descender là 540. Sau khi soát sổ demo, dường như những trình trông nom áp dụng các quý giá HHead Ascent/Descent bên trên MacOS với Win Ascent/Descent bên trên Windows (các quý giá này có thể khác nhau!). Chúng ta cũng chú ý rằng Capital Height là 680 với X height là 485.

*

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

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

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

*

Font Catamaran: UPM - Units Per Em - và lượng px tương ứng Lúc thực hiện font-size: 100px

Trước lúc tìm hiểu kỹ rộng, xuất xắc coi coi số đông đồ vật trên gồm 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 vì chưng các loại, phụ thuộc phạm vi của chính nó. Mỗi mẫu được tạo thành bởi một tuyệt nhiều thành phần inline (thẻ HTML hay các bộ phận inline vô danh như text) cùng mỗi chiếc này được Call là một trong line-box. Chiều cao của một line-box dựa vào chiều cao của những bộ phận bé của nó. Do kia trình cẩn thận sẽ tính toán thù độ cao của từng phần tử inline, trường đoản cú kia tính ra chiều cao của line-box (tự điểm cao nhất đến điểm phải chăng tốt nhất của các thành phần con). Kết trái là 1 trong line-box luôn đủ cao để rất có thể đựng toàn bộ những bộ phận con của nó (mang định là vậy).

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

Nếu họ sửa code HTML ở trên thành nỗ lực này:

p> Good kiến thiết will be better. span class="a">Baspan> span class="b">Baspan> span class="c">Baspan> We get khổng lồ make a consequence.p>nó đã có mặt 3 line-box:

line-box đầu tiên và sau cuối đựng một phần tử inline vô danh (text)line-box thứ hai chứa 2 thành phần inline vô danh cùng 3 thẻ

*

Một thẻ (con đường viền đen) được sinh sản thành từ bỏ những line-box (con đường viền trắng) đựng những bộ phận inline (đường viền trơn) cùng những bộ phận inline vô danh (con đường viền 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 những phần tử con của nó, cùng chính xác rộng là bộ phận thực hiện phông Catamaran.

Phần cực nhọc trong việc tạo thành thành line-box là chúng ta ko thực sự nhìn thấy tốt kiểm soát và điều hành được nó bằng CSS. mặc khi vấn đề áp dụng nằm trong tính background vào ::first-line cũng quán triệt chúng ta một tín hiệu trực quan về chiều cao của line-box thứ nhất.

Xem thêm: Đóng Dấu Giáp Lai Tiếng Anh Là Gì, Dấu Giáp Lai Là Gì

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

Tới giờ, tôi đang trình làng cho tới các bạn 2 khái niệm: content-area với line-box. Nếu các bạn ghi nhớ, tôi đã bảo rằng độ cao của một line-box được tính toán thù dựa vào chiều cao của các phần tử con của nó chứ không hề nói rằng nó được tính toán dựa vào độ cao của content-area của các phần tử bé kia. Vấn đề này tạo nên một khác hoàn toàn bự.

Nghe dường như kỳ lạ, nhưng mà 1 phần tử inline tất cả 2 chiều cao không giống nhau: chiều cao content-area cùng độ cao virtual-area (tôi đang tạo ra khái niệm virtual-area nhằm đại diện mang đến chiều cao mà họ thấy được được, các bạn sẽ ko thấy trong đặc tả đâu).

chiều cao content-area được tư tưởng do các chỉ số của fonts (nhỏng đã nói ngơi nghỉ trên).độ cao virtual-area là line-height, và nó là chiều cao được dùng để làm tính toán thù độ cao của line-box.

*

Các bộ phận inline tất cả 2 chiều cao khác nhau

Vậy nên, vấn đề đó vẫn phá vỡ ý 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 phải như vậy.

*

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

Chiều cao khác nhau giữa virtual-area cùng content-area được call là leading. Một nửa leading được cộng thêm vào bên 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 đó content-area luôn luôn chính giữa của virtual-area.

Dựa trên các giá trị được xem toán thù, line-height (virtual-area) hoàn toàn có thể bởi, cao hơn nữa hoặc rẻ rộng content-area. Trong trường thích hợp virtual-area phải chăng hơn, leading vẫn âm với một line-box trông đã rẻ rộng những bộ phận con của chính nó.

Còn có những một số 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 thay thế sửa chữa, inline-block/inline-* với blocksified tất cả content-area bởi cùng với độ cao, tuyệt line-height, của chúng

Tuy nhiên, sự việc của bọn họ là quý giá normal của line-height là bao nhiêu? Và câu trả lời, nlỗi vấn đề tính tân oán chiều cao content-area, được kiếm tìm thấy trong các chỉ số của fonts.

Vậy thì nên trở lại với FontForge. em-square của Catamaran là 1000, tuy nhiên họ thấy các cực hiếm ascender/descender không giống nhau:

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

Trong trường hợp của họ, font Catamaran khái niệm line gap với cái giá trị là 0, buộc phải line-height: normal vẫn bằng cùng với content-area, Có nghĩa là 1640 đơn vị chức năng, hay là một.64.

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

Do đó, rõ ràng rằng việc đặt line-height: một là một phương pháp làm xấu. Tôi xin kể lại rằng các giá trị không đơn vị bao gồm tính tương so với font-kích thước, không tương so với content-area, và trường phù hợp virtual-area thấp hơn content-area là nguồn gốc của nhiều sự việc.

*

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

Nhưng không chỉ có gồm mỗi line-height: 1. Trong số 1117 phông được tải trên sản phẩm của tớ (đề nghị, tôi sở hữu toàn bộ các font của Google Web Fonts), 1059 fonts, khoảng chừng 95%, có line-height to hơn 1. line-height của tất cả những phông đó xấp xỉ từ bỏ 0.618 cho tới 3.378. quý khách vừa gọi đúng rồi đó, 3.378!

Một chút cụ thể nữa về vấn đề tính toán line-box:

với các thành phần inline, padding với border làm tăng vùng background, dẫu vậy ko làm tăng chiều cao content-area (cũng giống như chiều cao của line-box). Do kia content-area chưa phải dịp nào cũng là đồ vật bạn thấy được bên trên screen. margin-top và margin-bottom không có tác dụng.

Xem thêm: Tổng Vi Sinh Vật Hiếu Khí Total Plate Count Là Gì, Bài Giảng Tổng Số Vi Sinh Vật Hiếu Khí

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


Chuyên mục: KHÁI NIỆM LÀ GÌ
Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *