Giới thiệu
Web là một nền tảng cực kỳ mạnh mẽ cho văn bản, một lĩnh vực mà Adobe có nhiều kinh nghiệm và chuyên môn. Khi Adobe tìm cách giúp web phát triển, việc nâng cao các tính năng văn bản của web dường như là một điểm khởi đầu rõ ràng. Web thường giả định một cột, hướng dọc cho văn bản. Mặc dù có thể sắp xếp văn bản xung quanh đồ hoạ và thậm chí định dạng văn bản thành nhiều cột bằng CSS, nhưng vẫn rất khó để đạt được bố cục giống tạp chí thực sự trên web. Với Khu vực CSS và Phạm vi loại trừ CSS, Adobe đang đi đầu trong nỗ lực mang sức mạnh của công nghệ xuất bản trên máy tính đến với các trình duyệt hiện đại. Ví dụ: trong ảnh chụp màn hình bên dưới, CSS Exclusions (Từ chối CSS) đang được dùng để hiển thị văn bản dọc theo đường viền của ngọn núi:
Tài liệu trong ảnh chụp màn hình bên dưới cũng sử dụng CSS Exclusions để cho phép văn bản bao quanh các hình dạng trong hình ảnh, cũng như CSS Regions để định dạng văn bản thành các cột và xung quanh trích dẫn:
Vùng CSS
Trước khi đi vào chi tiết về Khu vực CSS, tôi muốn đề cập đến cách bật khu vực trong Google Chrome. Sau khi bật Khu vực CSS, bạn có thể thử một số mẫu được tham chiếu trong bài viết này và tạo mẫu của riêng mình.
Bật vùng CSS trong Google Chrome
Kể từ phiên bản 20 của Chrome (chính xác là phiên bản 20.0.1132.57), các Khu vực CSS được bật thông qua giao diện chrome://flags. Để bật Khu vực CSS, hãy làm theo các bước sau:
- Mở một thẻ hoặc một cửa sổ mới trên Chrome.
- Nhập
chrome://flagsvào thanh vị trí. - Sử dụng tính năng tìm trong trang (control/command + f) rồi tìm phần "các tính năng thử nghiệm của Nền tảng web".
- Nhấp vào đường liên kết Bật.
- Nhấp vào nút Chạy lại ngay ở dưới cùng.
Để biết thêm thông tin về cờ của Chrome, hãy xem bài đăng trên blog của tôi về Tất cả về cờ Chrome.
Sau khi khởi chạy lại trình duyệt, bạn có thể bắt đầu thử nghiệm với các Vùng CSS.
Tổng quan về vùng CSS
Vùng CSS cho phép một khối văn bản được đánh dấu ngữ nghĩa tự động chuyển vào "hộp" (hiện là các phần tử). Sơ đồ dưới đây minh hoạ việc phân tách văn bản (luồng) và hộp (các vùng mà văn bản chảy vào):
Hãy xem một trường hợp sử dụng thực tế của Khu vực CSS. Ngoài việc là một nhà phát triển tại Adobe, tôi còn là một nhà văn khoa học viễn tưởng. Tôi thường xuất bản tác phẩm của mình trên mạng theo giấy phép Creative Commons. Để tác phẩm hoạt động trên số lượng thiết bị và trình duyệt tối đa, tôi thường sử dụng một định dạng cực kỳ đơn giản tương tự như sau:
Khi sử dụng Vùng CSS, tôi có thể tạo ra một trải nghiệm vừa thú vị hơn về mặt hình ảnh vừa hữu ích hơn nhiều vì dễ thao tác và dễ đọc hơn:
Để minh hoạ, tôi đã thêm khả năng hiển thị các Vùng CSS trong nguyên mẫu này. Ảnh chụp màn hình bên dưới cho thấy cách sắp xếp các vùng để tạo cảm giác như các cột bao quanh một hình ảnh và một trích dẫn ở giữa:
Bạn có thể thử nghiệm với nguyên mẫu này (cũng như xem mã nguồn) tại đây. Sử dụng các phím mũi tên để di chuyển và nhấn phím Esc để hiển thị các vùng. Bạn cũng có thể xem các nguyên mẫu trước đó tại đây.
Tạo Flow được đặt tên
CSS cần thiết để một khối văn bản chảy qua các vùng rất đơn giản. Đoạn mã bên dưới gán một flow có tên là "article" cho một div có id là "content" và gán cùng một flow có tên "article" cho bất kỳ phần tử nào có lớp "region". Kết quả là văn bản nằm bên trong phần tử "content" sẽ tự động chảy qua mọi phần tử có lớp "region".
<!DOCTYPE html>
<html>
<head>
<style>
#content {
{ % mixin flow-into: article; % }
}
.region {
{ % mixin flow-from: article; % }
box-sizing: border-box;
position: absolute;
width: 200px;
height: 200px;
padding: 10px;
}
#box-a {
border: 1px solid red;
top: 10px;
left: 10px;
}
#box-b {
border: 1px solid green;
top: 210px;
left: 210px;
}
#box-c {
border: 1px solid blue;
top: 410px;
left: 410px;
}
</style>
</head>
<body>
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="box-c" class="region"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eleifend dapibus felis, a consectetur nisl aliquam at. Aliquam quam augue, molestie a scelerisque nec, accumsan non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus euismod nisi, a egestas sem rhoncus eget. Mauris non tortor arcu. Pellentesque in odio at leo volutpat consequat....
</div>
</body>
</html>
Kết quả sẽ có dạng như sau:
Xin lưu ý rằng văn bản bên trong div "content" không có bất kỳ thông tin nào về cách trình bày. Nói cách khác, ngữ nghĩa của nội dung có thể vẫn được giữ nguyên ngay cả khi nội dung đó được truyền qua nhiều khu vực. Ngoài ra, vì các vùng chỉ là các phần tử nên chúng được định vị và định cỡ bằng CSS giống như mọi phần tử khác, do đó, các vùng này tương thích hoàn hảo với các nguyên tắc thiết kế thích ứng. Việc chỉ định các phần tử là một phần của luồng được đặt tên chỉ đơn giản có nghĩa là văn bản được chỉ định sẽ tự động chảy qua các phần tử đó.
Mô hình đối tượng CSS
Mô hình đối tượng CSS (CSSOM) xác định các API JavaScript để xử lý CSS. Dưới đây là danh sách các API mới liên quan đến Vùng CSS:
document.webkitGetNamedFlows(): Hàm trả về tập hợp các luồng được đặt tên có trong tài liệu.document.webkitGetNamedFlows().namedItem("article"): Hàm trả về tham chiếu đến một flow có tên cụ thể. Đối số này tương ứng với tên được chỉ định làm giá trị của thuộc tính CSSflow-intovàfrom-from. Để tham chiếu đến flow được đặt tên được chỉ định trong đoạn mã ở trên, bạn sẽ truyền vào chuỗi "article".WebKitNamedFlow: Đối tượng đại diện cho một tảng băng trôi có tên với các thuộc tính và hàm sau:firstEmptyRegionIndex: Một giá trị số nguyên trỏ đến chỉ mục của vùng trống đầu tiên được liên kết với luồng được đặt tên. Hãy xemgetRegions()bên dưới để tìm hiểu cách lấy tập hợp các khu vực.name: Giá trị chuỗi có tên của flow.overset: Một thuộc tính boolean có giá trị:falsekhi nội dung của luồng được đặt tên phù hợp với các khu vực được liên kếttruekhi nội dung không vừa và cần thêm vùng để chứa tất cả nội dung.
getContent(): Hàm trả về một tập hợp có tham chiếu đến các nút chảy vào flow đã đặt tên.getRegions(): Hàm trả về một tập hợp có tham chiếu đến các vùng chứa nội dung của luồng được đặt tên.getRegionsByContentNode(node): Hàm trả về một tệp tham chiếu đến vùng chứa nút đã chỉ định. Điều này đặc biệt hữu ích khi tìm các vùng chứa những nội dung như neo được đặt tên.
- Sự kiện
webkitregionoversetchange. Sự kiện này được kích hoạt trênWebkitNamedFlowbất cứ khi nào bố cục của nội dung được liên kết thay đổi vì bất kỳ lý do gì (nội dung được thêm hoặc xoá, kích thước phông chữ thay đổi, hình dạng của vùng thay đổi, v.v.) và khiến thuộc tínhwebkitRegionOversetcủa một vùng thay đổi. Sự kiện này rất hữu ích trong việc theo dõi các thay đổi về bố cục thô. Đây là chỉ báo cho biết có điều gì đó quan trọng đã xảy ra và bố cục có thể cần được chú ý, chẳng hạn như: cần thêm vùng, một số vùng có thể trống, v.v. - Sự kiện
webkitregionfragmentchange. Chưa được triển khai tại thời điểm chỉnh sửa này. Sự kiện này được kích hoạt trênWebkitNamedFlowbất cứ khi nào bố cục của nội dung được liên kết thay đổi vì bất kỳ lý do gì, tương tự nhưwebkitregionoversetchange, nhưng bất kể có thay đổi nào trong các thuộc tínhwebkitRegionOverset. Sự kiện này hữu ích cho việc theo dõi các thay đổi chi tiết về bố cục không nhất thiết ảnh hưởng đến toàn bộ bố cục của luồng được đặt tên, ví dụ: nội dung di chuyển từ khu vực này sang khu vực khác, nhưng nội dung tổng thể vẫn phù hợp với tất cả các khu vực. Element.webkitRegionOverset: Các phần tử trở thành vùng khi được chỉ định thuộc tính CSSflow-from. Các phần tử này có thuộc tínhwebkitRegionOverset. Nếu thuộc tính này là một phần của luồng được đặt tên, thì thuộc tính này sẽ cho biết liệu nội dung của luồng có tràn ra khu vực hay không. Các giá trị có thể có của webkitRegionOverset là:- "lưu trữ ngoại vùng" nếu có nhiều nội dung hơn vùng có thể lưu trữ
- "fit" (phù hợp) nếu nội dung dừng trước khi kết thúc khu vực
- "trống" nếu nội dung chưa đến khu vực
Một trong những mục đích sử dụng chính của CSSOM là nghe các sự kiện webkitregionoversetchange và tự động thêm hoặc xoá các vùng để phù hợp với nhiều lượng văn bản. Ví dụ: nếu không thể dự đoán lượng văn bản cần định dạng (có thể do người dùng tạo), nếu cửa sổ trình duyệt được đổi kích thước hoặc nếu kích thước phông chữ thay đổi, thì bạn có thể cần thêm hoặc xoá các vùng để phù hợp với sự thay đổi trong luồng. Ngoài ra, nếu muốn sắp xếp nội dung thành các trang, bạn sẽ cần một cơ chế để sửa đổi linh động DOM cũng như các vùng của mình.
Đoạn mã JavaScript sau đây minh hoạ cách sử dụng CSSOM để thêm các vùng một cách linh động nếu cần. Xin lưu ý rằng để đơn giản, lớp này không xử lý việc xoá vùng hoặc xác định kích thước và vị trí của vùng; lớp này chỉ dành cho mục đích minh hoạ.
var flow = document.webkitGetNamedFlows().namedItem("article")
flow.addEventListener("webkitregionoversetchange", onLayoutUpdate);
function onLayoutUpdate(event) {
var flow = event.target;
// The content does not fit
if (flow.overset === true) {
addRegion();
} else {
regionLayoutComplete();
}
}
function addRegion() {
var region = document.createElement("div");
region.style = "flow-from: article";
document.body.appendChild(region);
}
function regionLayoutComplete() {
// Finish up your layout.
}
Bạn có thể xem thêm các bản minh hoạ trên trang Mẫu Khu vực CSS.
Mẫu trang CSS
Việc tận dụng CSSOM có thể là cách mạnh mẽ và linh hoạt nhất để triển khai các tính năng như phân trang và bố cục thích ứng, nhưng Adobe đã làm việc với các công cụ xuất bản trên máy tính và văn bản đủ lâu để biết rằng các nhà thiết kế và nhà phát triển cũng sẽ muốn có một cách dễ dàng hơn để có được các chức năng phân trang tương đối chung. Do đó, chúng tôi đang làm việc trên một đề xuất có tên là Mẫu trang CSS, cho phép xác định hành vi phân trang hoàn toàn theo cách khai báo.
Hãy cùng xem một trường hợp sử dụng phổ biến cho Mẫu trang CSS. Đoạn mã dưới đây cho thấy cách sử dụng CSS để tạo hai luồng có tên: "article-flow" và "timeline-flow". Ngoài ra, tệp này xác định một bộ chọn thứ ba có tên là "combined-articles" (bài viết kết hợp) bên trong đó chứa hai luồng. Việc chỉ cần đưa thuộc tính overflow-style vào bộ chọn "combined-articles" (bài viết kết hợp) cho biết rằng nội dung sẽ tự động được phân trang dọc theo trục x hoặc theo chiều ngang:
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Giờ đây, khi đã xác định luồng và chỉ định hành vi tràn mong muốn, chúng ta có thể tự tạo mẫu trang:
@template {
@slot left {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
@slot time {
width: 25%;
float: left;
{ % mixin flow-from: timeline-flow; % }
}
@slot right {
width: 35%;
float: left;
{ % mixin flow-from: article-flow; % }
}
}
Mẫu trang được xác định bằng cú pháp "at" mới. Trong đoạn mã ở trên, chúng ta xác định ba khe, mỗi khe tương ứng với một cột. Văn bản từ "article-flow" sẽ chạy qua các cột ở bên trái và bên phải, còn văn bản từ "timeline-flow" sẽ điền vào cột ở giữa. Kết quả có thể có dạng như sau:
Xin lưu ý rằng văn bản bài viết (văn bản trong cột bên trái và bên phải) là tiếng Anh, còn dòng thời gian ở giữa là tiếng Đức. Ngoài ra, các trang tài liệu được hiển thị theo chiều ngang mà không cần mã JavaScript nào. Mọi thứ đều được thực hiện hoàn toàn theo cách khai báo trong CSS.
Mẫu trang CSS vẫn là một đề xuất, tuy nhiên, chúng tôi có một nguyên mẫu sử dụng "shim" JavaScript (còn gọi là polyfill) để cho phép bạn thử nghiệm với các mẫu này ngay bây giờ.
Để tìm hiểu thêm về các Khu vực CSS nói chung, hãy xem trang Khu vực CSS trên html.adobe.com.
Tiêu chí loại trừ CSS
Để đạt được bố cục giống như tạp chí thực sự, bạn không chỉ có thể luồng văn bản qua các vùng. Một yếu tố quan trọng của việc xuất bản trên máy tính để bàn chất lượng cao và thú vị về mặt hình ảnh là khả năng tạo dòng văn bản xung quanh hoặc bên trong các hình ảnh và hình dạng không đều. CSS Exclusions sẽ mang lại chất lượng sản xuất này cho web.
Ảnh chụp màn hình bên dưới là của một nguyên mẫu CSS Exclusions (Loại trừ CSS) và cho thấy văn bản tự động chảy xung quanh một đường dẫn khớp với đường viền của một khối đá lớn:
Hình ảnh ngược lại được minh hoạ trong ảnh chụp màn hình tiếp theo: văn bản chảy bên trong các đa giác có hình dạng bất thường:
Bước đầu tiên để có thể hiển thị văn bản xung quanh hoặc bên trong các hình dạng tuỳ ý là phát triển và tối ưu hoá các thuật toán cần thiết. Adobe hiện đang triển khai các tính năng sẽ được đóng góp trực tiếp cho WebKit. Sau khi được tối ưu hoá, các thuật toán này sẽ trở thành nền tảng để xây dựng phần còn lại của các tiêu chí loại trừ CSS.
Để biết thêm thông tin về CSS Exclusions, hãy xem trang CSS Exclusions trên html.adobe.com. Để xem chi tiết hơn về công việc của Adobe về công nghệ cơ bản cho CSS Exclusions, hãy xem bài đăng trên blog của Hans Muller có tiêu đề Horizontal Box: Polygon Intersection for CSS Exclusions (Hộp ngang: Giao điểm đa giác cho CSS Exclusions).
Trạng thái hiện tại của các khu vực CSS và các tiêu chí loại trừ CSS
Lần đầu tiên tôi công khai nói về Vùng CSS và CSS Exclusions là tại Adobe Developer Pod tại Google I/O 2011. Vào thời điểm đó, tôi đang trình bày các bản minh hoạ trong trình duyệt nguyên mẫu tuỳ chỉnh của riêng chúng tôi. Sự kiện diễn ra vô cùng sôi nổi, tuy nhiên, có một cảm giác thất vọng rõ ràng khi người xem phát hiện ra rằng chưa có trình duyệt lớn nào có chức năng mà tôi đang trình bày.
Tôi lại tham dự Google I/O năm nay (2012), lần này với vai trò là người trình bày cùng với đồng nghiệp Vincent Hardy và Alex Danilo của Google (bạn có thể xem bản trình bày tại đây). Chỉ một năm sau, khoảng 80% thông số kỹ thuật của CSS Regions đã được triển khai trong WebKit và đã có trong phiên bản Google Chrome mới nhất (lưu ý rằng bạn hiện phải bật CSS Regions thông qua chrome://flags). Tính năng hỗ trợ sơ bộ cho CSS Regions thậm chí đã có trong Chrome dành cho Android:
Ngoài ra, cả Khu vực CSS và CSS Exclusions đều được triển khai trong bản xem trước Internet Explorer 10 và hiện đang nằm trong lộ trình 2012 của Mozilla cho Firefox. Phiên bản chính tiếp theo của Safari sẽ hỗ trợ phần lớn thông số kỹ thuật của Vùng CSS và các bản cập nhật tiếp theo sẽ bao gồm phần còn lại.
Dưới đây là tiến trình chi tiết của chúng tôi đối với các Khu vực CSS và CSS Exclusions kể từ đề xuất ban đầu của chúng tôi cho W3C vào tháng 4 năm 2011:
Kết luận
Adobe có rất nhiều kinh nghiệm về văn bản, phông chữ và nói chung là về hoạt động xuất bản trên máy tính để bàn thông qua các công cụ như InDesign. Mặc dù web đã là một nền tảng rất mạnh mẽ cho văn bản, nhưng chúng tôi muốn sử dụng kiến thức và kinh nghiệm của mình để đẩy mạnh hơn nữa việc trình bày văn bản. Các vùng CSS và các phần loại trừ CSS cho phép nội dung vẫn được cấu trúc theo ngữ nghĩa, đồng thời cho phép bố cục giống như tạp chí thực sự và cuối cùng là một trang web biểu đạt hơn nhiều.