Siêu ký tự chỉ trong CSS?

Làm thế nào tôi có thể thực hiện siêu ký tự, chỉ trong CSS?

Tôi có một bản định kiểu nơi tôi đánh dấu các liên kết bên ngoài bằng một ký tự siêu ký tự, nhưng tôi gặp khó khăn trong việc sắp xếp chính xác ký tự.

Những gì tôi có hiện tại, trông như thế này:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

nhưng nó không hoạt động.

Đương nhiên, tôi sẽ sử dụng <sup>-tag, chỉ khi contentnào cho phép HTML ...

Bạn có thể thực hiện siêu ký tự với vertical-align: super, (cộng với font-sizeviệc giảm đi kèm ).

Tuy nhiên, hãy chắc chắn đọc các câu trả lời khác ở đây, đặc biệt là những câu trả lời của paulm bồ và cletus , để biết thông tin hữu ích.

Thành thật mà nói, tôi không thấy điểm nào trong việc thực hiện siêu ký tự / chỉ mục trong CSS. Không có thuộc tính CSS tiện dụng nào cho nó, chỉ có một loạt các triển khai trong nhà bao gồm:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

hoặc sử dụng căn chỉnh dọc hoặc tôi chắc chắn các cách khác. Điều đó là, nó bắt đầu trở nên phức tạp:

• Khoảng cách siêu ký tự CSS trên chiều cao dòng;
• Hãy coi chừng CSS cho Nằm ở trên / Subcript về lý do tại sao bạn cho là không nên phong cách superscript / subscript với CSS ở tất cả ;

Điểm thứ hai là đáng nhấn mạnh. Thông thường, siêu ký tự / chỉ mục không thực sự là một vấn đề về kiểu dáng mà là biểu thị cho ý nghĩa.

Lưu ý bên lề: Đáng để đề cập đến danh sách các thực thể này cho các biểu thức siêu ký tự và ký hiệu toán học phổ biến mặc dù câu hỏi này không liên quan đến điều đó.

Các thẻ phụ / sup nằm trong HTML và XHTML. Tôi sẽ chỉ sử dụng những người.

Đối với phần còn lại của CSS của bạn, các thuộc tính nội dung và phần tử giả không được hỗ trợ rộng rãi. Nếu bạn thực sự không muốn đưa thủ công này vào HTML, tôi nghĩ rằng một giải pháp dựa trên Javascript là đặt cược tốt nhất tiếp theo của bạn. Với jQuery, điều này đơn giản như:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

Tài liệu CSS chứa tương đương CSS tiêu chuẩn công nghiệp cho tất cả các cấu trúc HTML. Đó là: hầu hết các trình duyệt web những ngày này không rõ ràng xử lý SUB, SUP, B, Ivà vân vân - họ (kinda sorta) được chuyển đổi thành SPANcác yếu tố với các thuộc tính CSS thích hợp, và các công cụ rendering chỉ thoả thuận với điều đó.

Trang này là Phụ lục D. Biểu định kiểu mặc định cho HTML 4

Các bit bạn muốn là:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Tôi đã làm việc trên một trang với mục đích có văn bản rõ ràng dễ đọc, với các yếu tố siêu ký tự KHÔNG thay đổi lề trên và dưới của dòng - với các quan sát sau:

Nếu đối với văn bản chính của bạn line-height: 1.5em, ví dụ, bạn nên giảm chiều cao dòng của văn bản siêu ký tự để nó xuất hiện chính xác. Tôi đã sử dụng line-height: 0.5em.

Ngoài ra, vertical-align: superhoạt động tốt trong hầu hết các trình duyệt nhưng trong IE8 khi bạn có phần tử siêu ký tự, phần còn lại của dòng đó được đẩy xuống. Vì vậy, thay vào đó tôi đã sử dụng vertical-align: baselinecùng với một tiêu cực topvà position: relativeđể đạt được hiệu quả tương tự, dường như hoạt động tốt hơn trên các trình duyệt.

Vì vậy, để thêm vào "triển khai cây nhà lá vườn":

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

http://htminois.com/articles/superscript/ Về cơ bản:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Hoạt động tốt trong thực tế, như tôi có thể nói.

Phần sau đây được lấy từ html.css nội bộ của Mozilla Firefox:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Vì vậy, trong trường hợp của bạn, nó sẽ là một cái gì đó, như:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Đây là một giải pháp sạch khác:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

Theo cách này, bạn vẫn có thể sử dụng thẻ sup / sub nhưng bạn đã sửa lỗi hành vi nhàn rỗi của chúng để luôn làm tăng chiều cao của đoạn văn .

Vì vậy, bây giờ bạn có thể làm:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

Và chiều cao dòng đoạn văn của bạn không nên bị vặn lên.

Đã thử nghiệm trên IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Tôi đã thử nghiệm bằng cách sử dụng p {line-height: 1.3;}(đó là chiều cao của dòng tốt trừ khi bạn muốn các dòng của mình quá gần) và nó vẫn hoạt động, vì "-0.6em" là một lượng nhỏ như vậy với chiều cao của dòng đó, văn bản phụ / phụ sẽ phù hợp và đừng đi qua nhau.

Quên một chi tiết có thể có liên quan Tôi luôn sử dụng DOCTYPE trong dòng đầu tiên của trang của mình (cụ thể là tôi sử dụng HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Vì vậy, tôi không biết liệu giải pháp này có hoạt động tốt khi trình duyệt ở chế độ quirkmode (hoặc không phải chế độ tiêu chuẩn) do thiếu DOCTYPE hoặc do DOCTYPE không kích hoạt chế độ Tiêu chuẩn / Hầu như Tiêu chuẩn.

Nếu bạn đang thay đổi kích thước phông chữ, bạn có thể muốn ngừng thu nhỏ kích thước theo quy tắc này:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Tôi không chắc điều này có liên quan hay không nhưng tôi đã giải quyết vấn đề của mình với ²các thực thể HTML vì tôi không thể thêm bất kỳ thẻ html nào khác trong <label>thẻ. Vì vậy, ý tưởng đã sử dụng mã ASCII thay vì thẻ css hoặc HTML.

Hãy xem: http://www.cssdesignpotypes.com/Ch CHƯƠNG% 20122

nếu có vẻ như bạn muốn "vertical-align: text-top"

Thuộc tính CSS font-variant-positionđang được xem xét và cuối cùng có thể là câu trả lời cho câu hỏi này. Kể từ đầu năm 2017, chỉ có Firefox hỗ trợ nó.

.super {
    font-variant-position: super;
}

Xem MDN .

Liên quan hoặc có thể không liên quan, sử dụng siêu ký tự làm thành phần HTML hoặc dưới dạng span + css trong văn bản có thể gây ra sự cố với nội địa hóa - trong các chương trình bản địa hóa.

Ví dụ: giả sử " phần mềm bên ^thứ 3 ":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

Làm thế nào các dịch giả có thể dịch "nd"? Họ có thể để trống cho một số ngôn ngữ cyrrilic, nhưng còn các ngôn ngữ RTL kỳ lạ hoặc khác thì sao?

Trong trường hợp này, tốt hơn là tránh sử dụng các siêu ký tự và sử dụng một từ ngữ đầy đủ như "phần mềm của bên thứ ba". Hoặc, như đã đề cập ở đây trong các bình luận khác, thêm dấu cộng vào siêu ký tự thông qua jQuery.

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Đây là cách chính xác mà sup sử dụng:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Tìm thấy điều này thông qua google chrome kiểm tra yếu tố.