Văn bản được định dạng trước là gì?

Dưới đây là cách sử dụng thẻ Văn bản được định dạng trước trong mã HTML của bạn

Khi bạn thêm văn bản vào mã HTML cho một trang Web, nói trong một phần tử đoạn văn, bạn có rất ít hoặc không có quyền kiểm soát nơi các dòng văn bản đó sẽ bị phá vỡ hoặc khoảng cách sẽ được sử dụng. Điều này là do trình duyệt web sẽ chạy văn bản khi cần thiết dựa trên khu vực chứa văn bản đó. Điều này bao gồm các trang web đáp ứng sẽ có bố cục rất lỏng thay đổi dựa trên kích thước của màn hình đang được sử dụng để xem trang .

Văn bản HTML sẽ phá vỡ một dòng mà nó cần đến khi nó đã đến cuối vùng chứa của nó. Cuối cùng, trình duyệt đóng vai trò quan trọng hơn trong việc xác định cách văn bản bị hỏng so với bạn.

Về việc thêm khoảng cách để tạo ra một định dạng hoặc bố cục nhất định, HTML không nhận ra khoảng cách được thêm vào mã, bao gồm cả các phím cách, tab, hoặc trả về vận chuyển. Nếu bạn đặt hai mươi khoảng trống giữa một từ và từ đi kèm sau đó, trình duyệt sẽ chỉ hiển thị một khoảng trống duy nhất ở đó. Điều này được gọi là sự sụp đổ không gian màu trắng và nó thực sự là một trong những khái niệm về HTML mà nhiều người mới phải đối mặt với cuộc đấu tranh trong ngành với ban đầu. Họ mong đợi khoảng trắng HTML hoạt động theo cách của nó trong một chương trình như Microsoft Word, nhưng đó không phải là cách mà khoảng trắng HTML hoạt động.

Trong hầu hết các trường hợp, việc xử lý văn bản thông thường trong bất kỳ tài liệu HTML nào là chính xác những gì bạn cần, nhưng trong các trường hợp khác, bạn có thể thực sự muốn kiểm soát chính xác hơn cách không gian văn bản và vị trí của nó.

Điều này được biết là văn bản được định dạng trước (nói cách khác, bạn đọc định dạng). Bạn có thể thêm văn bản được định dạng trước vào các trang web của mình bằng cách sử dụng thẻ trước HTML.

Sử dụng thẻ

Nhiều năm trước, nó thường được sử dụng để xem các trang web với các khối văn bản được định dạng trước. Sử dụng thẻ trước để xác định các phần của trang như được định dạng bằng cách gõ chính nó là một cách nhanh chóng và dễ dàng cho các nhà thiết kế web để có được văn bản để hiển thị như họ muốn nó.

Điều này đã được trước khi sự gia tăng của CSS cho bố trí, khi các nhà thiết kế web đã thực sự bị mắc kẹt cố gắng để buộc bố trí bằng cách sử dụng bảng và các phương pháp chỉ HTML khác. Điều này (kinda) làm việc trở lại bởi vì văn bản được định dạng trước được định nghĩa là văn bản mà trong đó cấu trúc được xác định bởi các quy ước typographic chứ không phải bởi kết xuất HTML.

Ngày nay, thẻ này không được sử dụng nhiều vì CSS cho phép chúng ta đọc các phong cách trực quan theo cách hiệu quả hơn là cố gắng ép buộc HTML xuất hiện và vì các tiêu chuẩn web quyết định tách cấu trúc (HTML) và kiểu dáng (CSS) rõ ràng. Tuy nhiên, có thể có trường hợp văn bản được định dạng trước có ý nghĩa, giống như địa chỉ gửi thư mà bạn muốn bắt buộc ngắt dòng hoặc ví dụ về thơ, nơi ngắt dòng là điều cần thiết cho việc đọc và luồng tổng thể của nội dung.

Đây là một cách để sử dụng thẻ

 HTML: 

 
 Twas brillig và những con cóc slithey đã quay cuồng và gimble trong wabe  
 HTML điển hình thu hẹp khoảng trắng trong tài liệu. Điều này có nghĩa là vận chuyển trả về, dấu cách và các ký tự tab được sử dụng trong văn bản này sẽ được thu gọn thành một không gian. Nếu bạn đã nhập câu lệnh trên vào một thẻ HTML điển hình như thẻ p (đoạn), bạn sẽ kết thúc bằng một dòng văn bản, như sau: 
 Twas brillig và slithey toves Đã quay cuồng và gimble trong wabe 
 Thẻ trước để trống các ký tự khoảng trắng. Vì vậy, ngắt dòng, dấu cách và tab đều được duy trì trong việc hiển thị nội dung đó của trình duyệt. Đặt trích dẫn bên trong thẻ trước cho cùng một văn bản đó sẽ dẫn đến hiển thị này: 
 Twas brillig và slithey toves Đã quay cuồng và gimble trong wabe 
 Về phông chữ 
 Thẻ trước hoạt động nhiều hơn là chỉ duy trì khoảng trắng và ngắt cho văn bản bạn viết. Trong hầu hết các trình duyệt, nó được viết bằng phông chữ đơn cách. Điều này làm cho các ký tự trong văn bản đều bằng chiều rộng. Nói cách khác, chữ i chiếm nhiều không gian như chữ cái w. 
 Nếu bạn muốn sử dụng phông chữ khác thay cho phông chữ mặc định đơn nhất mà trình duyệt hiển thị, bạn vẫn có thể thay đổi điều này bằng các trang mẫu và chọn bất kỳ phông chữ nào khác mà bạn muốn văn bản hiển thị . 
 HTML5 
 Một điều cần chú ý là, trong HTML5, thuộc tính "chiều rộng" không còn được hỗ trợ cho phần tử 
. Trong HTML 4.01, chiều rộng đã xác định số ký tự mà một dòng sẽ chứa, nhưng điều này đã bị loại bỏ cho HTML5 và hơn thế nữa. 

 Biên tập bởi Jeremy Girard vào ngày 2/2/17