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

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

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

lấy một ví dụ, line-height hoàn toàn có thể thừa nhận quý giá là 1 độ nhiều năm hoặc một quý hiếm ko đơn vị, với cái giá trị mang định là normal. Được rồi, vậy normal nghĩa là như thế nào? Chúng ta thường xuyên hiểu rằng nó là (hoặc đề xuất là) 1, hoặc rất có thể là 1 trong.2, thậm chí là sệt tả của CSS còn ko miêu tả ví dụ về sự việc này. Chúng ta hiểu được quý giá ko đơn vị chức năng của line-height gồm tính tương so với font-form size, nhưng mà vấn đề 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 luôn như là tuyệt khác nhau? Nó gồm đích thực dìm quý hiếm thân 1 cùng 1.2? Và vertical-align, ý nghĩa liên quan đến line-height của nó là gì?

Tìm phát âm 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 đơn giản dễ dàng bên dưới, một thẻ chứa 3 thẻ , từng thẻ thực hiện 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 và một font-kích cỡ cùng với những font-family khác biệt sẽ khởi tạo ra các phần tử với chiều cao không giống nhau:

*

Các font-family khác nhau, cùng font-kích cỡ, sinh ra các độ cao không giống nhau

Tuy chúng ta đân oán trước được bài toán đó, mà lại vì sao font-size: 100px không hiện ra những bộ phận với độ cao 100px? Tôi vẫn đo cùng nhận ra những giá chỉ trị: Helvetica: 115px, Gruppo: 97px với Catamaran: 164px

*

Các thành phần với font-size: 100px bao gồm độ cao biến đổi từ bỏ 97px cho 164px

Dù dường như hơi kỳ cục, tuy vậy vấn đề này trọn vẹn phía trong dự đoán thù. Lý vì chưng nằm tại vị trí bản thân các font chữ. Dưới đây là biện pháp những font text hoạt động:

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

Trên trình chuyên chú, các đơn vị chức năng kha khá có thể được co giãn nhằm vừa cùng với font-kích thước mong ước.

Hãy msinh sống phông Catamaran bởi FontForge để xem các chỉ số:

em-square là 1000ascender là 1100 cùng descender là 540. Sau khi chất vấn demo, có vẻ các trình chăm bẵm sử dụng các cực hiếm HHead Ascent/Descent bên trên MacOS và Win Ascent/Descent trên Windows (các quý hiếm 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 phông khi xem bên 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ị em-square, kết quả là 164px Lúc tùy chỉnh thiết lập quý hiếm 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à tôi đã đề cập đến có mang này nhìn trong suốt phần sót lại của bài viết. Quý khách hàng rất có thể coi content-area là vùng mà trực thuộc tính background được áp dụng (vấn đề này cũng không hoàn toàn chính xác).

Chúng ta có thể dự đoán thù rằng chiều cao của các chữ cái in hoa là 68px (680 solo vị) với những chữ cái in hay (x-height) là 49px (485 solo vị). Kết trái là 1ex = 49px và 1em = 100px, không phải 164px (như ý là em là giá trị dựa vào font-kích thước, không phải chiều cao được xem toán).

*

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

Trước lúc tìm hiểu kỹ hơn, giỏi coi xem gần như máy trên có ý nghĩa gì. Khi một trong những phần tử được hiện trên screen, nó rất có thể được sinh sản vì những cái, phụ thuộc vào phạm vi của chính nó. Mỗi mẫu được tạo thành bởi một hay những bộ phận inline (thẻ HTML xuất xắc những phần tử inline vô danh nlỗi text) cùng từng loại này được hotline là một line-box. Chiều cao của một line-box dựa vào độ cao của những phần tử bé của chính nó. Do kia trình duyệt y sẽ tính toán thù độ cao của mỗi bộ phận inline, trường đoản cú đó tính ra chiều cao của line-box (tự điểm tối đa tới điểm thấp tốt nhất của các thành phần con). Kết trái là 1 trong những line-box luôn đủ cao để hoàn toàn có thể đựng toàn bộ các bộ phận con của chính nó (mặc định là vậy).

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

Nếu chúng ta sửa code HTML sinh hoạt trên thành thay này:

p> Good thiết kế will be better. span class="a">Baspan> span class="b">Baspan> span class="c">Baspan> We get to make a consequence.p>nó sẽ hình thành 3 line-box:

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

*

Một thẻ (đường viền đen) được sinh sản thành từ những line-box (đường viền trắng) chứa những phần tử inline (con đường viền trơn) với những thành phần inline vô danh (mặt đường viền nét đứt)

Chúng ta thấy rõ rằng line-box thứ 2 cao hơn những line-box không giống, vì chưng content-area của những thành phần con của nó, với chính xác hơn là phần tử sử dụng phông Catamaran.

Phần cực nhọc vào bài toán chế tạo ra thành line-box là bọn họ không thực thụ nhìn thấy hay kiểm soát được nó bằng CSS. ngay khi Việc vận 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 tiền về độ cao của line-box đầu tiên.

Xem thêm: Initialchatfriendslist Là Gì, Cách Xem Ai Hay Vào, Initialchatfriendslist

line-height: những vấn đề với không những thế nữa

Tới giờ, tôi sẽ reviews tới các bạn 2 khái niệm: content-arealine-box. Nếu chúng ta ghi nhớ, tôi vẫn bảo rằng chiều cao của một line-box được xem toán dựa vào độ cao của những bộ phận nhỏ của nó chứ không hề nói rằng nó được xem toán dựa vào chiều cao của content-area của những bộ phận bé kia. Vấn đề này tạo ra một khác hoàn toàn to.

Nghe có vẻ như lạ, nhưng 1 phần tử inline tất cả 2 chiều 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 có mang virtual-area để đại diện thay mặt mang đến độ cao mà lại họ thấy được được, bạn sẽ ko thấy vào đặc tả đâu).

chiều cao content-area được quan niệm do các chỉ số của font (nlỗi đã nói sinh hoạt trên).độ cao virtual-area là line-height, với nó là chiều cao được dùng làm tính toán thù chiều cao của line-box.

*

Các phần tử inline tất cả 2 chiều cao không giống nhau

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

*

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

Chiều cao khác nhau thân virtual-area với content-area được Điện thoại tư vấn là leading. Một nửa leading được thêm vào đó vào phía trên của content-area, nửa còn sót lại được cộng thêm vào phía dưới. Do đó content-area luôn luôn trọng điểm của virtual-area.

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

Còn bao gồm các các loại phần tử inline khác:

các phần tử inline sửa chữa (
*

Các thành phần inline thay thế, inline-block/inline-* với blocksified có content-area bởi cùng với độ cao, tốt line-height, của chúng

Tuy nhiên, vụ việc của bọn họ là quý giá normal của line-height là bao nhiêu? Và câu vấn đáp, như câu hỏi tính toán thù độ cao content-area, được kiếm tìm thấy trong các chỉ số của phông.

Vậy thì hãy quay lại cùng với FontForge. em-square của Catamaran là 1000, mà lại bọn họ thấy nhiều quý giá ascender/descender khác nhau:

Ascent/Descent thông thường: ascender là 770 với descender là 230. Được thực hiện để vẽ ký từ bỏ (bảng "OS/2")Các chỉ số Ascent/Descent: ascender là 1100 và descender là 540. Được thực hiện nhằm tính độ 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 quý giá này vào những chỉ số Ascent/Descent (bảng "hhea")

Trong ngôi trường hợp của họ, phông Catamaran quan niệm line gap với cái giá trị là 0, cần line-height: normal đang bởi với content-area, tức là 1640 đơn vị chức năng, hay như là 1.64.

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

Do đó, 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ý giá không đơn vị có tính tương so với font-kích cỡ, không tương đối với content-area, và ngôi trường thích hợp virtual-area rẻ rộng content-area là nguồn gốc của rất nhiều vụ việc.

*

Sử dụng line-height: 1 rất có thể tạo thành một line-box rẻ rộng content-area

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

Một chút chi tiết nữa về Việc tính tân oán line-box:

cùng với những phần tử inline, padding cùng border làm cho tăng vùng background, mà lại không có tác dụng tăng chiều cao content-area (cũng giống như chiều cao của line-box). Do kia content-area không hẳn thời điểm nào thì cũng là thứ chúng ta nhìn thấy trên screen. margin-top với margin-bottom không tồn tại công dụng.

Với những bộ phận inline sửa chữa thay thế, inline-bloông chồng và blocksified: padding, margin cùng border làm tăng height cần làm tăng độ cao content-area cùng line-box.

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 *