CSS3: text-transform

Khóa học qua video:

Tổng quan

text-transform dùng để quy định cách in hoa phần văn bản của một phần tử. Theo đó, phần văn bản có thể được thể hiện theo dạng chữ in hoa, in thường, hoặc in hoa ký tự đầu mỗi từ.

Dưới đây là một số quy tắc ánh xạ theo từng trườngh hợp ngôn ngữ:

Trong ngôn ngữ gốc Thổ Nhĩ Kỳ (tr), Azerbaijani (az), Crimean Tatar (crh), Volga Tatar (tt), và Bashkir (ba) thì có hai loại ký tự i là loại có và không có dấu chấm: i/İ và ı/I.
Trong tiếng Đức (de), ß thành SS in hoa.
Trong tiếng Hà Lan (nl), digraph ij trở thành IJ, ngay cả với lựa chọn là text-transform: capitalize, thì cũng chỉ đặt ký tự đầu tiên của mỗi từ thành in hoa.
Trong tiếng Hy Lạp (el), nguyên âm sẽ bị mất âm khi chuyển từ thành chữ in hoa (ά/Α), ngoại trừ các eta rời rạc (ή/Ή). Ngoài ra, nguyên âm đôi với một giọng trên nguyên âm đầu tiên bị mất giọng và trở thành dấu tách đôi trên nguyên âm thứ hai (άι/ΑΪ).
Cũng trong tiếng Hy Lạp (el), ký tự sigma in thường có hai dạng là σ và ς. ς chỉ được dùng khi sigma kết thúc một từ. Khi áp dụng text-transform: lowercase cho một sigma in hoa (Σ) thì trình duyệt phải dựa vào ngữ cảnh để lựa chọn dạng in thường cho đúng.

Cú pháp

/* Keyword values */

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

text-transform: full-width;

/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

Các giá trị

capitalize

Làm cho ký tự đầu tiên của mỗi từ trở thành in hoa.

uppercase

Làm cho tất cả các ký tự của đoạn văn bản tương ứng thành chữ in hoa.

lowercase

Làm cho tất cả các ký tự của đoạn văn bản tương ứng thành chữ in thường.

none

Không cho phép thay đổi dạng của bất kỳ ký tự nào trong văn bản tương ứng.

full-width

Dùng để quy định cách viết một ký tự, chủ yếu áp dụng cho chữ tượng hình và chữ latinh trong một ô vuông, cho phép kết hợp với các loại chữ Đông Á thông thường (như chữ Nhật chẳng hạn).

Ví dụ

`p { text-transform: none; }`
Chuỗi ban đầu	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Áp dụng	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Kết quả tham chiếu	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`

`p { text-transform: capitalize; }`
Chuỗi ban đầu	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Áp dụng	`Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...`
Kết quả tham chiếu	`Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...`

`p { text-transform: capitalize; }` Các biểu tượng trước mỗi từ không được tính đến.
Chuỗi ban đầu	`(this) “is” [a] –short– -test- «for» the _css_ ¿capitalize? ?¡transform!`
Áp dụng	`(This) “Is” [A] –Short– -Test- «For» The _css_ ¿Capitalize? ?¡Transform!`
Kết quả tham chiếu	`(This) “Is” [A] –Short– -Test- «For» The _Css_ ¿Capitalize? ?¡Transform!`

`p { text-transform: capitalize; }`
Chuỗi ban đầu	`ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl`
Áp dụng	`Ⓐⓑⓒ (Ⓓⓔⓕ) —Ⓖⓗⓘ— Ⓙkl`
Kết quả tham chiếu	`ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl`

`p { text-transform: capitalize; }` Digraph ij tiếng Hà Lan phải được xử lý như một ký tự đơn.
Chuỗi bạn đầu	`The Dutch word: "ijsland" starts with a digraph.`
Áp dụng	`The Dutch Word: "Ijsland" Starts With A Digraph.`
Kết quả tham chiếu	`The Dutch Word: "IJsland" Starts With A Digraph.`

`p { text-transform: uppercase; }`
Chuỗi ban đầu	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Áp dụng	`LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...`
Kết quả tham chiêu	`LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...`

`p { text-transform: uppercase; }` Nguyên âm tiếng Hy Lạp ngoại trừ eta rời rạc phải mất âm, và nhấn mạnh vào nguyên âm đầu tiên của cặp nguyên âm trở thành một dấu tách đôi trên nguyên âm thứ hai.
Chuỗi ban đầu	`Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";`
Áp dụng	`ΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΙΚΟ ΦΑΙ" Η ΣΤΗ "ΝΕΡΑΙΔΑ";`
Kết quả tham chiếu	`ΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΪΚΟ ΦΑΪ" Ή ΣΤΗ "ΝΕΡΑΪΔΑ";`

`p { text-transform: lowercase; }`
Chuỗi ban đầu	`Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Áp dụng	`lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`
Kết quả tham chiếu	`lorem ipsum dolor sit amet, consectetur adipisicing elit, ...`

`p { text-transform: lowercase; }` Ký tự sigma tiếng Hy Lạp (`Σ`) được chuyển thành dạng sigma in thường (`σ`) hoặc ký tự (`ς`), tùy thuộc vào ngử cảnh.
Chuỗi ban đầu	`Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.`
Áp dụng	`σ is a greek letter that appears several times in οδυσσευς.`
Kết quả tham chiếu	`σ is a greek letter that appears several times inοδυσσευς.`

`p { text-transform: full-width; }`
Chuỗi ban đầu	0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{\|}~
Áp dụng	0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{\|}~
Kết quả tham chiếu	０１２３４５６７８９ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ！＂＃＄％＆（）＊＋，－．／：；＜＝＞？＠｛｜｝～

» Tiếp: CSS: word-break

« Trước: CSS: volume

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên