tailwindcss-capsize
Một plugin TailwindCSS tạo ra các lớp tiện ích leading-trim bằng cách sử dụng Capsize.
npm install --save-dev tailwindcss-capsize
leading-trim?
Một proposed CSS property để loại bỏ khoảng trống thừa từ hộp vật lý của văn bản, ảnh hưởng đến sự căn chỉnh quang học. Hướng dẫn này article from Microsoft Design mô tả vấn đề và cách giải quyết đề xuất hoạt động.
Cấu hình
Plugin này yêu cầu thêm một khóa fontMetrics vào chủ đề Tailwind của bạn. Nó nên là một đối tượng với các khóa phù hợp với các định nghĩa fontFamily của bạn, và mỗi khóa nên có một đối tượng có hình dạng như sau:
{
ascent: number
descent: number
lineGap: number
unitsPerEm: number
capHeight: number
}
Các giá trị này có thể xác định bằng cách sử dụng Capsize website, fontkit, FontDrop!, hoặc cách khác.
Ví dụ đầy đủ
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
fontMetrics: {
sans: {
capHeight: 2048,
ascent: 2728,
descent: -680,
lineGap: 0,
unitsPerEm: 2816,
},
},
fontSize: { ... },
lineHeight: { ... },
...
},
plugins: [require('tailwindcss-capsize')],
}
Sử dụng
Lớp tiện ích .capsize mới nên được áp dụng cho phần tử cha trực tiếp bao quanh một nút văn bản. Lớp này yêu cầu các tiện ích font-family, font-size, và line-height được áp dụng ở một số điểm trên bộ chuyển đổi để các thuộc tính tùy chỉnh cần được sử dụng.
<!-- Example using default TailwindCSS config -->
<p class="font-sans text-base leading-none capsize">Lorem ipsum dolor</p>
Tùy chọn
rootSize
kiểu: number (tùy chọn, mặc định: 16)
Plugin giả định một kích thước phông chữ gốc là 16px khi chuyển đổi từ giá trị rem. Để sử dụng một giá trị khác, hãy truyền nó (không có đơn vị) vào các tùy chọn plugin.
require('tailwindcss-capsize')({ rootSize: 12 })
className
kiểu: string (tùy chọn, mặc định: 'capsize')
Lớp tiện ích .capsize mặc định có thể được thay thế bằng tên lớp tùy chỉnh nếu bạn muốn.
require('tailwindcss-capsize')({ className: 'leading-trim' })
mode
kiểu: 'modern' | 'classic' (tùy chọn, mặc định: 'modern')
Theo mặc định, plugin thay thế các plugin core fontFamily, fontSize, và lineHeight, thêm các thuộc tính tùy chỉnh vào kết quả của mỗi plugin này, được sử dụng trong biểu thức calc() trong lớp tiện ích.
.font-sans {
+ --ascent-scale: 0.9688;
+ --descent-scale: 0.2415;
+ --cap-height-scale: 0.7273;
+ --line-gap-scale: 0;
+ --line-height-scale: 1.2102;
font-family: Inter, sans-serif;
}
Nếu bạn cần hỗ trợ các trình duyệt không hỗ trợ thuộc tính tùy chỉnh, việc đặt mode thành 'classic' sẽ xử lý toàn bộ tính toán vào thời gian xây dựng trước khi CSS được xuất ra. Điều này đòi hỏi rằng đánh dấu phải phù hợp với định dạng của một bộ chọn cụ thể.
require('tailwindcss-capsize')({ mode: 'classic' })
Mẹo và thủ thuật
Cắt ngắn văn bản và giới hạn dòng
Đôi khi giao diện yêu cầu cắt ngắn văn bản thành một dòng duy nhất hoặc giới hạn văn bản thành một số dòng cụ thể. Áp dụng các phương pháp này cho cùng một phần tử mà lớp .capsize mặc định được áp dụng sẽ gây ra vấn đề, vì lớp này gán các phần tử giả ::before và ::after cho phần tử đó.
<!-- ❌ Does NOT work -->
<p class="font-sans text-base leading-none capsize truncate">
Text to be truncated to a single line
</p>
Để giải quyết vấn đề này, một phần tử con của phần tử có lớp .capsize nên bao quanh văn bản. Phần tử này sẽ nhận các kiểu dáng để cắt ngắn hoặc giới hạn dòng.
<!-- ✅ Does work! -->
<p class="font-sans text-base leading-none capsize">
<span class="truncate">Text to be truncated to a single line</span>
</p>
Liên quan
🔡 tailwindcss-opentype — Các lớp tiện ích cho các tính năng chữ học tiên tiến.
Chi tiết tải xuống:
Tác giả: stormwarning
Nguồn: https://github.com/stormwarning/tailwindcss-capsize
Giấy phép: ISC license
