NộI Dung
- Kiến thức cần thiết: CSS, jQuery cơ bản
- Đòi hỏi: jQuery, CSS, HTML
- Thời gian dự án: 30 phút
- Tải xuống các tệp nguồn
Giả sử bạn thiết kế từ nội dung ra ngoài, quyết định đầu tiên để thiết kế của bạn có hiệu lực có để được loại liên quan. Thậm chí bằng không phải chọn kiểu chữ mà bạn đã làm điều gì đó ảnh hưởng đến trang web của mình. Loại là cốt lõi để in và thiết kế web, và nó phức tạp; có rất nhiều thuật ngữ, thông lệ, quy tắc và kỹ thuật được tích lũy được sử dụng tốt. Bài viết này liên quan đến một kỹ thuật để quản lý một khía cạnh của loại hình, một kỹ thuật khó thực hiện trực tuyến nhưng lại phổ biến trong bản in: duy trì nhịp điệu dọc nhất quán, do đó cho phép chúng tôi đạt được bố cục chuyên nghiệp.
Laying out type
Trong in ấn, đối với bất kỳ mục nào có lượng văn bản lớn, nền tảng của thiết kế có thể là một lưới đường cơ sở. Nó được sử dụng để mang lại cấu trúc cho trang và hướng dẫn dòng nội dung theo chiều dọc. Hầu hết mọi thứ đều được đặt đối với lưới đường cơ sở đó. Đừng lo lắng nếu bạn không nhận ra các điều khoản, không ai xa lạ với các đường cơ sở hoặc lưới cơ sở; bạn đã biết về chúng. Hãy nhớ lại trường học, khi bạn chắc chắn viết trên giấy lót - khi bạn viết, bạn đặt phần dưới của các chữ cái của mình ngay ngắn vào từng dòng trên giấy. Đường cơ sở và lưới đường cơ sở đang hoạt động. Đường cơ sở là một đường tưởng tượng mà ở dưới cùng của các chữ cái sẽ căn chỉnh.Nếu bạn xem bài viết này ngay bây giờ, bạn sẽ "thấy" một đường cơ sở, mặc dù không thực sự có một đường thẳng. Bộ não của bạn đặt một cái ở đó cho bạn, đó là lý do tại sao bạn có thể đọc các câu. Các dòng trên giấy lót? Chúng là một lưới đường cơ sở. Thẳng thắn để các câu của bạn thẳng hàng và đặt cách quãng đều nhau để văn bản của bạn có nhịp điệu thẳng đứng đều đặn.
Nhịp dọc
Nhịp điệu dọc quy định vị trí của văn bản trên trang. Nó là một thành phần ảnh hưởng đến khả năng quét và đọc các khối văn bản của chúng ta, và nó giúp thông báo các phản ứng cảm xúc của chúng ta. Khi văn bản có nhịp điệu dọc mạnh mẽ và khoảng cách tốt, chúng ta cảm thấy nó chuyên nghiệp, được cân nhắc, có thẩm quyền và thoải mái khi đọc. Khi văn bản có nhịp điệu và khoảng cách kém, chúng ta cảm thấy nó ít được cân nhắc hơn, kém chuyên nghiệp hơn và thường khó đọc hơn. Nhịp điệu dọc là một phần khả năng sử dụng và một phần tính thẩm mỹ.
Tiến hành nhịp điệu
Thật không may, web vẫn là người anh em kém cỏi của báo in về khả năng ban hành một số thông lệ cơ bản liên quan đến loại hình. Trên web, chúng tôi không thể sử dụng lưới đường cơ sở giống như cách một nhà thiết kế in ấn (hoặc trẻ ở trường) làm - chúng tôi không thể căn chỉnh đường cơ sở của văn bản với lưới đường cơ sở của tài liệu. CSS không có khái niệm về lưới đường cơ sở. Vì vậy, văn bản của chúng tôi sẽ không nằm chính xác trên các dòng của lưới cơ sở. Thay vào đó, nó sẽ được căn giữa theo chiều dọc trong khoảng cách giữa các dòng. Đó là điều tốt nhất mà web có thể làm.
Hãy trở nên thiết thực với một tài liệu ví dụ. Đầu tiên, chúng tôi sẽ thiết lập nhịp bằng cách tạo một lưới đường cơ sở có thể nhìn thấy được. Để làm điều này, chúng tôi sẽ sử dụng hình nền lặp lại để vẽ các đường ngang thông thường cách nhau 22px:
- html {background: #fff url (baseline_22.png); }
Hurray, chúng tôi có giấy lót của chúng tôi!
Bạn sẽ lưu ý rằng không có gì xếp hàng. Để làm cho mọi thứ thẳng hàng, chúng ta muốn cạnh dưới cùng của tất cả các phần tử chạm vào một trong các đường đó. Cách dễ nhất để làm điều đó là đảm bảo tất cả các phần tử chiếm chiều cao thẳng đứng (bao gồm cả lề) là bội số của 22. Dưới đây là một số CSS thực hiện điều đó. Tôi đang sử dụng đơn vị REM, nhưng đưa ra dự phòng EM cho các trình duyệt không hiểu REM. Tôi cũng bao gồm đơn vị PX tương đương trong các nhận xét. Nếu bạn chưa hiểu REM / EM thì thay vào đó bạn có thể sử dụng các giá trị px - tất cả chúng đều tương đương:
- html {/ * font-size: 16px, line-height: 22px * /
- phông chữ: 100% / 1.375 "Helvetica Neue", Helvetica, Arial, sans-serif;
- background: #fff url (baseline_22.png); }
- h1, h2, h3, h4, h5, h6 {/ * margin-top và bottom đều 22px * /
- / * em dự phòng * / margin: 1.375em 0;
- lề: 1.375rem 0; }
- h1 {/ * font-size là 32px, line-height là 44px * /
- / * em dự phòng * / font-size: 2em;
- kích thước phông chữ: 2rem; chiều cao dòng: 1.375; }
- h2 {/ * font-size là 26px, line-height là 44px * /
- / * em dự phòng * / font-size: 1.75em;
- kích thước phông chữ: 1.75rem; chiều cao dòng: 1.5714285714; }
- h3, h4, h5, h6 {/ * kích thước phông chữ là 22px, chiều cao dòng là 22px * /
- / * em dự phòng * / font-size: 1.375em;
- kích thước phông chữ: 1.375rem; chiều cao dòng: 1; }
- p, ul, blockquote {/ * lề dưới là 22px, chiều cao dòng được kế thừa từ html (22px) * /
- / * em dự phòng * / margin-top: 0; margin-bottom: 1.375em;
- margin-top: 0; margin-bottom: 1.375rem; }
Hãy xem điều đó mang lại cho chúng ta những gì. Hãy để ý xem tất cả các văn bản đều được căn chỉnh đẹp mắt như thế nào? Nó không nằm trên đường cơ sở, nhưng nó có nhịp điệu theo chiều dọc có thể dự đoán được. Nó đẹp và gọn gàng.
Xử lý hình ảnh
Hình ảnh làm cho mọi thứ trở nên phức tạp hơn. Hãy xem điều gì sẽ xảy ra với nhịp điệu của chúng ta khi chúng ta bao gồm một số. Họ phá vỡ nó giống như bỏ qua trong một bản ghi - nhịp độ phù hợp nhưng thời gian bị tắt. Sự liên kết trở nên thay đổi. Đó là vì hình ảnh không có khả năng có chiều cao bằng bội số của đường cơ sở, vì vậy cạnh dưới cùng không thẳng hàng với lưới đường cơ sở của chúng tôi.
Để khắc phục, tất cả những gì chúng ta thực sự cần làm là thêm một lề vào mỗi hình ảnh, làm cho phần dưới của lề thẳng hàng với lưới của chúng ta. Nó đủ đơn giản để tự động hóa với một chút JavaScript. Đây là kế hoạch cơ bản của chúng tôi:
- Tìm ra chiều cao của mỗi hình ảnh.
- Xem số lần giá trị đường cơ sở chia thành không gian dọc mà hình ảnh hiện đang chiếm và lấy phần còn lại.
- Trừ phần còn lại khỏi đường cơ sở để tạo ra độ lệch mà chúng ta cần áp dụng trên hình ảnh.
- Áp dụng phần bù làm lề cho phần dưới cùng của hình ảnh.
Phần dưới cùng của không gian dọc của hình ảnh giờ đây sẽ căn chỉnh chính xác với lưới đường cơ sở. Đây là một hàm cơ bản trong jQuery thực hiện điều này:
- $ (cửa sổ) .bind ('load', function () {
- $ ("img"). each (function () {
- /* biến */
- var this_img = $ (this);
- var baseline = 22;
- var img_height = this_img.height ();
- / * làm toán * /
- var remainder = parseFloat (img_height% baseline);
- / * chúng ta cần thêm bao nhiêu? * /
- var offset = parseFloat (baseline-remainder);
- / * áp dụng lề cho hình ảnh * /
- this_img.css ("margin-bottom", offset + "px");
- });
- });
Tại sao window.bind hàng? Bởi vì chúng tôi phải đợi cho đến khi hình ảnh được tải trước khi chúng tôi có thể nhận được kích thước của chúng một cách đáng tin cậy. Dưới đây là một ví dụ về mã cơ bản này đang chạy.
Cải thiện jQuery
Thế giới hiếm khi diễn ra thẳng thắn, và vì vậy nó xuất hiện ở đây - chúng ta phải giải quyết một số chi tiết triển khai. Có gì sai với chức năng chúng tôi có? Rất nhiều:
- Nó tạo ra kết quả khó chịu với hình ảnh nằm trong dòng chứ không phải là nổi hoặc khối.
- Có vẻ như có lỗi trên một số hình ảnh, đặc biệt là những hình ảnh trong thùng chứa.
- Nó không liên quan đến bố cục lỏng.
- Nó không thể tái sử dụng được.
Chúng tôi không muốn áp dụng hành vi này cho những hình ảnh có đường thẳng, như hình mặt cười trong ví dụ. Hình ảnh nội tuyến được căn chỉnh để cạnh dưới cùng nằm trên cùng một đường cơ sở với văn bản (không phải lưới đường cơ sở). Điều đó có nghĩa là hình ảnh được bù đắp theo chiều dọc. Cả CSS và JS đều không cung cấp cho chúng tôi cách để tìm ra đâu là đường cơ sở cho một phần tử văn bản, vì vậy chúng tôi không biết phần bù đắp. Chúng tôi phải bỏ qua hình ảnh nội tuyến và chỉ áp dụng bản sửa lỗi của chúng tôi cho những hình ảnh được đặt thành hiển thị: khối (may mắn thay, bất kỳ hình ảnh nổi nào cũng được tự động đặt thành khối hiển thị).
Nếu hình ảnh nằm trong vùng chứa, lề áp dụng cho hình ảnh có thể bị ẩn do cài đặt tràn trên vùng chứa. Ngoài ra, chúng tôi có thể không muốn lề trên hình ảnh mà thay vào đó là phần tử vùng chứa. Trong ví dụ này, chúng tôi muốn đặt lề trên hộp màu trắng hơn là trên hình ảnh bên trong hộp, vì vậy chúng tôi có thể tránh nhận được các khoảng trống kỳ lạ xuất hiện trong hộp.
Chức năng chỉ chạy một lần, nhưng trên thiết kế lỏng, hình ảnh thay đổi chiều cao khi trình duyệt được kích thước lại (hãy thử đổi kích thước ví dụ thành một thứ gì đó khá hẹp để xem điều này). Thay đổi kích thước lại phá vỡ nhịp điệu. Chúng tôi cần chức năng chạy sau khi thay đổi kích thước của trình duyệt cũng như sau khi tải trang. Bố cục chất lỏng cũng giới thiệu các vấn đề khác; hình ảnh có thể cao pixel phân số, ví dụ 132,34px. Điều đó ngược lại có thể gây ra kết quả không mong muốn, ngay cả khi chúng tôi áp dụng lợi nhuận theo tỷ lệ (nếu bạn quan tâm, đây là lý do: trac.webkit.org/wiki/LayoutUnit). Vì vậy, chúng tôi sẽ cần chỉnh sửa hình ảnh thành chiều cao toàn bộ pixel để tránh lỗi bố cục do pixel phân đoạn gây ra.
Cuối cùng, chúng ta nên biến nó thành một chức năng có thể tái sử dụng nhiều hơn. Trên thực tế, với sự phức tạp mà một giải pháp thực tế cần hơn giải pháp lý thuyết, chúng ta nên tạo một trình cắm thêm có thể được sử dụng lại trong các dự án khác.
Trong ví dụ cuối cùng, bạn sẽ tìm thấy mã đạt được tất cả những điều này. JavaScript plug-in được nhận xét rất nhiều để bạn có thể theo dõi. Bạn có thể sử dụng trình cắm này bằng cách gọi nó như sau:
- $ (window) .bind ('load', function () {
- $ ("img"). baselineAlign ();
- });
Hoặc, bạn có thể yêu cầu trình cắm áp dụng lề cho vùng chứa đã đặt tên, nếu vùng chứa tồn tại dưới dạng cha của hình ảnh:
- $ (window) .bind ('load', function () {
- $ ("img"). baselineAlign ({container: ’. popup’});
- });
Phần kết luận
Giữ nhịp điệu dọc tốt là một phương pháp thiết kế tinh tế nhưng hiệu quả được sử dụng thường xuyên trong in ấn. Bây giờ bạn đã biết các nguyên tắc cơ bản, có kiến thức làm việc về đường cơ sở và lưới đường cơ sở, cũng như biết một số hạn chế của bố cục văn bản CSS so với bản in. Bạn cũng biết cách khắc phục những hạn chế đó, soạn tài liệu theo bất kỳ nhịp độ dọc nào mà bạn thích và bạn có một công cụ giúp xử lý nội dung hình ảnh gây rối.
Khi CSS hoàn thiện hơn, chúng tôi tiếp tục có thêm nhiều tính năng phù hợp với những người anh em in ấn của mình, vì vậy hiểu rõ về loại sẽ trở nên quan trọng hơn để tạo các trang web chất lượng. Nếu bạn muốn tìm hiểu thêm về loại nói chung, tôi thực sự khuyên bạn nên dùng www.thinkingwithtype.com (và mua sách để đi cùng với nó). Nếu bạn đang theo dõi các bài viết CSS về xử lý kiểu thì có rất nhiều bài báo cả ở đây và ở những nơi khác trên web. Tôi cũng khuyên bạn nên cập nhật thông tin mới nhất từ Mark Boulton và Elliot Jay Stocks, cả hai đều thường xuyên nói về loại hình liên quan đến thiết kế web cụ thể.
Chúc vui vẻ!
