Tôi đã đưa ra một thứ đơn giản giúp tôi giải quyết vấn đề về đệm dựa trên kích thước phông chữ. Tôi muốn bù đắp một <td> dựa trên một tiền tố chuỗi trong hàng ở trên. Cliff ghi chú phiên bản, tôi thêm văn bản đại diện cho bù đắp mong muốn trong một khoảng và làm cho nó vô hình và không thể chọn. Giải pháp của tôi là ở đây:
.hiddenOffset {
opacity: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
<table>
<tr>
<td>NumElements</td>
</tr>
<tr>
<td><span class="hiddenOffset">Num</span>Offset Text</td>
</tr>
</table>
Điều này mang lại cho tôi khoảng trống hoàn hảo và tiền tố bị ẩn và không thể chọn. Trong mã thực tế của tôi, tôi sử dụng JavaScript thuần túy để chỉ định chuỗi tiền tố để nó không được mã hóa cứng và tôi sử dụng prefix.repeat(n) để đặt thụt lề lồng nhau.
function processRepeatingGroupInstance(indent, group) {
let prefix = 'No';
let html = '';
for (let i = 0; i < group.length; i++) {
let field = group[i];
if (field.hasOwnProperty('msgvaluedesc'))
html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value tooltip">${field.msgvaluedesc}<span class="tooltiptext">${field.msgvalue}</span></td></tr>`;
else
html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value">${field.msgvalue}</td></tr>`;
if (field.hasOwnProperty('repeating_group')) {
for (let j = 0; j < field.repeating_group.length; j++)
html += processRepeatingGroupInstance(indent + 1, field.repeating_group[j]);
}
}
return html;
}
Điều này đặc biệt kỳ lạ, tôi nghĩ rằng, kể từ khi sắp chữ dành rất nhiều thời gian về chủ đề lãnh đạo, kerning, word-spacing, letter-spacing, vv, tất cả dường như để đối phó với cách bố trí các chữ cái theo chiều dọc. Bạn sẽ nghĩ rằng ít nhất một trong số này sẽ phát triển một "khoảng cách của chiều rộng ký tự thực tế". – Anthony
Tôi thấy trong bài viết Wikipedia bạn đề cập đến rằng ** vi ** được định nghĩa là một nửa của 1 em, có nghĩa là bạn có thể sử dụng '0,5em' thay vì' 1en' (tôi không nghĩ * en * được hỗ trợ như đơn vị trong css). Bài viết nói rằng * nó cũng theo chiều rộng của chữ thường "n" *. – awe
Như một lưu ý: Lý do tại sao "không ai quan tâm" về chiều rộng của các phần tử chữ, là các ký tự có độ rộng khác nhau trong một phông chữ (trừ khi nó là một phông chữ monospace). Điều này có nghĩa rằng chiều rộng không phải là một thuộc tính phổ biến trên phông chữ, nhưng trên mỗi ký tự trong phông chữ. – awe