Układ strony w internecie jak w formacie typowym dla czasopism z wykluczeniami i regionami CSS

Christian Cantrell
Christian Cantrell
X Strona główna

Wprowadzenie

Internet to niezwykle wydajna platforma do tworzenia tekstów, a Adobe ma w tej dziedzinie duże doświadczenie i wiedzę. Gdy szukaliśmy sposobów na rozwój internetu, oczywistym było, że powinniśmy zacząć od dalszego rozwijania możliwości tekstowych sieci. W internecie tekst jest zwykle ułożony w jednej kolumnie i wyrównany do pionu. Chociaż można układać tekst wokół grafiki, a nawet formatować go w wiele kolumny za pomocą CSS, nadal trudno jest uzyskać prawdziwy układ podobny do tego w magazynie. Dzięki regionom CSS i wykluczeniom CSS firma Adobe przoduje w dążeniu do udostępnienia możliwości publikacji na komputerze w nowoczesnych przeglądarkach. Na przykład na zrzucie ekranu poniżej użyto wykluczeń w arkuszu stylów CSS, aby tekst był wyświetlany wzdłuż konturu góry:

Przykład reguł wykluczenia w kodzie CSS
Przykład wykluczeń w usłudze porównywania cen

Dokument na zrzucie ekranu poniżej wykorzystuje też wykluczenia CSS, aby umożliwić przełamywanie tekstu wokół kształtów na obrazach, oraz regiony CSS, aby sformatować tekst w kolumny i wokół cytatu:

Przykład działania regionów CSS
Przykład działania usług porównywania cen w regionach

Regiony usługi porównywania cen

Zanim przejdziemy do szczegółów dotyczących regionów CSS, omówimy, jak włączyć regiony w Google Chrome. Po włączeniu regionów CSS możesz wypróbować niektóre przykłady wymienione w tym artykule i utworzyć własne.

Włączanie regionów CSS w Google Chrome

Od wersji 20 Chrome (dokładnie 20.0.1132.57) regiony usług porównywania cen są włączone w interfejsie chrome://flags. Aby włączyć regiony CSS:

  1. Otwórz nową kartę lub nowe okno w Chrome.
  2. Wpisz chrome://flags na pasku lokalizacji.
  3. Użyj funkcji znajdź na stronie (Control/Command + F) i znajdź sekcję „eksperymentalne funkcje platformy internetowej”.
  4. Kliknij link Włącz.
  5. U dołu kliknij przycisk Uruchom ponownie.

Więcej informacji o flagach Chrome znajdziesz w moim wpisie na blogu Wszystko o flagach Chrome.

Po ponownym uruchomieniu przeglądarki możesz zacząć eksperymentować z regionami porównywania cen.

Omówienie regionów CSS

Regiony CSS umożliwiają automatyczne przenoszenie bloku tekstu z semantyczną sygnaturą do „pudełek” (obecnie elementów). Diagram poniżej pokazuje oddzielenie tekstu (przepływu) i pól (obszarów, do których przepływa tekst):

Przepływ treści do zdefiniowanych regionów
Przesyłanie treści do zdefiniowanych regionów

Przyjrzyjmy się konkretnemu przypadkowi użycia regionów w CSS. Jestem programistką w firmie Adobe i pisuję fantastykę naukową. Często publikuję swoje prace online na licencji Creative Commons. Aby umożliwić ich działanie na jak największej liczbie urządzeń i w jak największej liczbie przeglądarek, często używam bardzo prostego formatu podobnego do tego:

Niesformatowany przykład projektu z wykorzystaniem starszej wersji funkcji Human
Przykład niestylizowanego projektu z ludźmi w wersji źródłowej

Dzięki CSS Regions udało mi się stworzyć bardziej atrakcyjny wizualnie i znacznie bardziej funkcjonalny interfejs, który jest łatwiejszy w obsłudze i wygodniejszy w czytaniu:

Human Legacy Project showing Region
Projekt z grupami użytkowników w starszych wersjach.

W tym celu dodałem możliwość wyświetlania regionów usług porównywania cen w tym prototypie. Zrzut ekranu poniżej pokazuje, jak ułożyć regiony, aby sprawiały wrażenie kolumn otaczających grafikę i cytat w środku:

Human Legacy Project pokazujący regiony
Projekt Human Legacy pokazujący regiony

Z prototypu (a także z kodu źródłowego) możesz korzystać tutaj. Do poruszania się po mapie używaj klawiszy strzałek, a aby wyświetlić regiony, naciśnij klawisz Esc. Wcześniejsze prototypy znajdziesz tutaj.

Tworzenie przepływu nazwanego

Kod CSS wymagany do przepływu bloku tekstu przez regiony jest bardzo prosty. Poniżej znajduje się fragment kodu, który przypisuje przepływ o nazwie „article” do elementu div o identyfikatorze „content”, a także przypisuje ten sam przepływ o nazwie „article” do dowolnego elementu z klasą „region”. W efekcie tekst zawarty w elemencie „content” będzie automatycznie przepływać przez dowolny element z klasą „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>

Wynik wygląda tak:

Wynik kodu powyżej
Wynik działania kodu

Pamiętaj, że tekst w elemencie div „content” nie ma żadnej wiedzy o swoim wyświetlaniu. Innymi słowy, może ona pozostać całkowicie nienaruszona pod względem semantycznym nawet wtedy, gdy przepływa przez różne regiony. Ponieważ regiony to tylko elementy, ich pozycja i rozmiar są określane za pomocą CSS tak samo jak w przypadku innych elementów, dzięki czemu są one w pełni zgodne z zasadami elastycznego projektowania. Oznacza to, że określony tekst jest automatycznie przenoszony przez te elementy.

Model obiektów porównywania cen

Model obiektów CSS (CSSOM) definiuje interfejsy JavaScript do pracy z kodem CSS. Poniżej znajdziesz listę nowych interfejsów API związanych z regionami usługi porównywania cen:

  • document.webkitGetNamedFlows(): funkcja zwracająca kolekcję nazwanych przepływów dostępnych w dokumencie.
  • document.webkitGetNamedFlows().namedItem("article"): funkcja, która zwraca odwołanie do konkretnego przepływu nazwanego. Argument odpowiada nazwie określonej jako wartość właściwości CSS flow-into i from-from. Aby uzyskać odwołanie do nazwanego procesu określonego w powyższym fragmencie kodu, należy przekazać ciąg znaków „article”.
  • WebKitNamedFlow: obiekt reprezentujący nazwany zbiór elementów z tymi właściwościami i funkcjami:
    • firstEmptyRegionIndex: wartość całkowita wskazująca indeks pierwszego pustego regionu powiązanego z nazwanym przepływem. Aby dowiedzieć się, jak uzyskać kolekcję regionów, zapoznaj się z sekcją getRegions() poniżej.
    • name: wartość ciągu znaków z nazwą procesu.
    • overset: wartość logiczna:
      • false gdy treść nazwanego procesu pasuje do powiązanych regionów
      • true gdy treści nie mieszczą się w ramach jednego regionu i potrzeba więcej regionów, aby pomieścić wszystkie treści.
    • getContent(): funkcja zwracająca kolekcję z odwołaniami do węzłów, które wpływają na przepływ o określonej nazwie.
    • getRegions(): funkcja zwracająca kolekcję z odwołaniami do regionów zawierających zawartość nazwanego procesu.
    • getRegionsByContentNode(node): funkcja, która zwraca odwołanie do regionu zawierającego określony węzeł. Jest to szczególnie przydatne w przypadku znajdowania regionów zawierających takie elementy jak nazwane kotwy.
  • webkitregionoversetchange zdarzenie. To zdarzenie jest wywoływane w przypadku elementu WebkitNamedFlow, gdy układ powiązanych danych ulegnie zmianie z dowolnego powodu (dodanie lub usunięcie danych, zmiana rozmiaru czcionki, kształtu regionu itp.) i powoduje zmianę właściwości webkitRegionOverset regionu. To zdarzenie jest przydatne do nasłuchiwania zmian w ogólnym układzie. Jest to wskaźnik, że stało się coś ważnego i układ może wymagać uwagi, np.: wymagane jest więcej regionów, niektóre regiony mogą być puste itp.
  • webkitregionfragmentchange zdarzenie. Niezaimplementowana w momencie wprowadzania tej zmiany. To zdarzenie jest wywoływane w przypadku WebkitNamedFlow, gdy układ powiązanych treści zmieni się z dowolnego powodu (podobnie jak w przypadku webkitregionoversetchange), ale niezależnie od zmian w właściwościach webkitRegionOverset. To zdarzenie jest przydatne do wykrywania szczegółowych zmian układu, które niekoniecznie wpływają na cały układ danego przepływu danych. Na przykład: treści są przenoszone z jednego regionu do innego, ale ogólnie nadal mieszczą się we wszystkich regionach.
  • Element.webkitRegionOverset: elementy stają się regionami, gdy ma być przypisana do nich właściwość CSS flow-from. Te elementy mają właściwość webkitRegionOverset, która w przypadku elementów należących do nazwanego przepływu danych wskazuje, czy treści z tego przepływu wykraczają poza region. Możliwe wartości webkitRegionOverset:
    • „przepełnienie”, jeśli jest więcej treści niż region może pomieścić;
    • „fit”, jeśli treści kończą się przed końcem regionu;
    • „empty” (pusty), jeśli treści nie dotarły do regionu;

Jednym z głównych zastosowań interfejsu CSSOM jest nasłuchiwanie zdarzeń webkitregionoversetchange i dynamiczne dodawanie lub usuwanie regionów w celu dostosowania się do zmiennej ilości tekstu. Jeśli na przykład ilość tekstu do sformatowania jest nieprzewidywalna (np. generowana przez użytkownika), jeśli rozmiar okna przeglądarki ulegnie zmianie lub jeśli zmieni się rozmiar czcionki, może być konieczne dodanie lub usunięcie regionów, aby dostosować przepływ. Jeśli chcesz uporządkować treści na stronach, musisz też mieć mechanizm dynamicznej modyfikacji modelu DOM i regionów.

Poniższy fragment kodu JavaScriptu pokazuje, jak za pomocą interfejsu CSSOM można dynamicznie dodawać regiony w miarę potrzeby. Pamiętaj, że ze względu na prostotę nie obsługuje on usuwania regionów ani definiowania ich rozmiarów i pozycji. Służy on tylko do celów demonstracyjnych.

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.
}

Więcej wersji demonstracyjnych znajdziesz na stronie z przykładami regionów usługi porównywania cen.

Szablony stron usługi porównywania cen

Korzystanie z CSSOM jest prawdopodobnie najbardziej zaawansowanym i elastycznym sposobem implementowania takich funkcji, jak strony i układy RWD, ale Adobe od dawna pracuje z narzędziami do tworzenia tekstu i edycji publikacji, więc wiemy, że projektanci i programiści chcą też mieć prostszy sposób na uzyskanie stosunkowo ogólnych funkcji stron. Dlatego pracujemy nad propozycją dotyczącą szablonów stron CSS, która umożliwia definiowanie zachowania stron w pełni w sposób deklaratywny.

Przyjrzyjmy się typowemu zastosowaniu szablonów stron CSS. Fragment kodu poniżej pokazuje użycie CSS do utworzenia 2 nazwanych przepływów: „article-flow” i „timeline-flow”. Dodatkowo definiuje on trzeci selektor o nazwie „combined-articles”, w którym będą zawarte te 2 przepływy. Proste uwzględnienie usługi overflow-style w selektorze „combined-articles” wskazuje, że treści powinny być automatycznie dzielone na strony wzdłuż osi x, czyli w kierunku poziomym:

<style>
    #article {
    { % mixin flow-into: article-flow; % }
    }

    #timeline {
    { % mixin flow-into: timeline-flow; % }
    }

    #combined-articles {
    overflow-style: paged-x;
    }
</style>

Teraz, gdy już zdefiniowaliśmy przepływy i określiliśmy pożądane zachowanie w przypadku przepełnienia, możemy utworzyć sam szablon strony:

@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; % }
    }
}

Szablony stron są definiowane za pomocą nowej składni „at”. W powyższym fragmencie kodu definiujemy 3 miejsca, z których każde odpowiada kolumnie. Tekst z elementu „przepływ tekstu w artykule” będzie wypełniać kolumny po lewej i po prawej stronie, a tekst z elementu „przepływ tekstu na osi czasu” będzie wypełniać kolumnę pośrodku. Wynik może wyglądać tak:

Przykład szablonów stron
Przykład szablonów stron

Pamiętaj, że tekst artykułu (w kolumnach po lewej i po prawej stronie) jest w języku angielskim, a oś czasu pośrodku – w języku niemieckim. Dodatkowo strony dokumentu są wyświetlane poziomo bez potrzeby stosowania kodu JavaScript. Wszystko zostało zrobione w pełni deklaratywnie w CSS.

Szablony stron CSS to wciąż propozycja, ale mamy prototyp, który korzysta z „shimu” JavaScriptu (czyli polyfilla), aby umożliwić Ci eksperymentowanie z tymi szablonami.

Więcej informacji o regionach usług porównywania cen znajdziesz na stronie Regiony usług porównywania cen na stronie html.adobe.com.

Wykluczenia w kodzie CSS

Aby uzyskać układ podobny do magazynu, nie wystarczy przepływ tekstu przez regiony. Kluczowym elementem wysokiej jakości i wizualnie interesującej publikacji jest możliwość płynnego przepływu tekstu wokół nieregularnych grafik i kształtów. Wykluczenia w usłudze porównywania cen zapewniają ten poziom jakości produkcji w internecie.

Zrzut ekranu poniżej pochodzi z prototypu wykluczeń CSS i pokazuje tekst, który dynamicznie przepływa po ścieżce odpowiadającej konturowi dużej formacji skalnej:

Przykład reguł wykluczenia w kodzie CSS
Przykład wykluczeń w usłudze porównywania cen

Na kolejnym zrzucie ekranu widać odwrotną sytuację: tekst płynący wewnątrz nieregularnych wielokątów:

Tekst przepływający w wielokąty o nieregularnych kształtach
Tekst przepływający w nieregularne wielokąty

Pierwszym krokiem do płynnego układania tekstu wokół dowolnych kształtów jest opracowanie i zoptymalizowanie wymaganych algorytmów. Firma Adobe pracuje obecnie nad wdrożeniami, które zostaną przekazane bezpośrednio do WebKit. Po optymalizacji te algorytmy staną się podstawą, na której opiera się reszta wykluczeń w porównywarce.

Więcej informacji o wykluczeniach w usłudze porównywania cen znajdziesz na stronie Wykluczenia w usłudze porównywania cen na stronie html.adobe.com, a więcej szczegółów o technologii podstawowej dla wykluczeń w usłudze porównywania cen znajdziesz w poście Hansa Mullera na blogu Horizontal Box: Polygon Intersection for CSS Exclusions (polski odpowiednik: „Opakowanie poziome: przecięcie wielokątów w wykluczeniach w usłudze porównywania cen”).

Obecny stan regionów usług porównywania cen i wykluczeń usług porównywania cen

Po raz pierwszy mówiłem publicznie o regionach usług porównywania cen i wykluczeniach usług porównywania cen podczas prezentacji Adobe Developer Pod na konferencji Google I/O 2011. W tamtym czasie prezentowałem wersje demonstracyjne w naszym własnym niestandardowym przeglądarce prototypów. Odbiór był bardzo entuzjastyczny, ale widzowie byli wyraźnie rozczarowani, gdy odkryli, że żadna z funkcji, które prezentowałem, nie była jeszcze dostępna w żadnej z głównych przeglądarek.

W tym roku (2012 r.) znów uczestniczyłem w konferencji Google I/O, tym razem jako prelegent wraz z moim współpracownikiem Vincentem Hardym i Alexem Danilo z Google (tutaj możesz obejrzeć prezentację). Zaledwie rok później około 80% specyfikacji CSS Regions zostało zaimplementowanych w WebKit i jest już dostępne w najnowszej wersji Google Chrome (pamiętaj, że CSS Regions musi być obecnie włączone za pomocą chrome://flags). Wstępne wsparcie dla CSS Regions zostało nawet wdrożone w Chrome na Androida:

Regiony w Chrome na Androida
Regiony w Chrome na Androida

Dodatkowo zarówno obszary CSS, jak i wykluczenia CSS są wdrażane w wersji podglądowej Internet Explorera 10 i obecnie znajdują się w planie działania Mozilli na rok 2012 dotyczącym Firefoksa. Następna główna wersja Safari powinna obsługiwać większość specyfikacji CSS Regions, a kolejne aktualizacje powinny obejmować pozostałe części.

Poniżej znajdziesz szczegółowy harmonogram postępów w przypadku regionów i wykluczeń usług porównywania cen od czasu naszej wstępnej propozycji przesłanej do W3C w kwietniu 2011 r.:

Postęp w wykluczaniu regionów
Postęp w przypadku regionów i wykluczeń

Podsumowanie

Adobe ma ogromne doświadczenie w zakresie tekstu, czcionek i ogółem publikacji cyfrowej dzięki takim narzędziom jak InDesign. Chociaż internet jest już bardzo wydajną platformą do wyświetlania tekstu, chcemy wykorzystać naszą wiedzę i doświadczenie, aby jeszcze bardziej ulepszyć prezentację tekstu. Regiony CSS i wykluczenia CSS pozwalają zachować semantyczne uporządkowanie treści, a zarazem umożliwiają tworzenie układów w stylu magazynowym i ostatecznie znacznie bardziej wyrazistych stron internetowych.