Wstęp
Internet to niezwykle zaawansowana platforma tekstu, w której Adobe ma ogromne doświadczenie i wiedzę. Gdy firma Adobe szukała sposobów na upowszechnienie sieci, dalsze rozszerzanie możliwości tekstowych w internecie wydawało się nam oczywistym punktem wyjścia. W przypadku tekstu sieć przyjmuje zwykle jedną kolumnę i orientację pionową. Chociaż można opływać tekst wokół grafiki, a nawet formatować go w wielu kolumnach za pomocą CSS, uzyskanie w internecie prawdziwego układu przypominającego czasopismo jest bardzo trudne. Dzięki regionom usług porównywania cen i wykluczeniom usług porównywania cen Adobe jest liderem w dziedzinie udostępniania treści na komputery w nowoczesnych przeglądarkach. Na przykład na zrzucie ekranu poniżej zastosowano wykluczenia CSS do przesuwania tekstu wzdłuż konturów góry:
W dokumencie na zrzucie ekranu poniżej także zastosowano wykluczenia CSS, które umożliwiają zawijanie tekstu wokół kształtów na obrazach, oraz funkcję „Regiony CSS” do formatowania tekstu w kolumnach i wokół cudzysłowu pull:
Regiony usługi porównywania cen
Zanim przejdziemy do szczegółów regionów usług porównywania cen, pokażę, jak można włączyć regiony w Google Chrome. Gdy włączysz regiony usług porównywania cen, możesz wypróbować przykłady wymienione w tym artykule i utworzyć własne.
Włączanie regionów usługi porównywania cen 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, wykonaj te czynności:
- Otwórz nową kartę lub nowe okno w Chrome.
- Wpisz
chrome://flagsna pasku lokalizacji. - Użyj Znajdź na stronie (Control/Command + F) i wyszukaj sekcję „eksperymentalne funkcje platformy internetowej”.
- Kliknij link Włącz.
- Kliknij przycisk Uruchom ponownie teraz na dole.
Więcej informacji o flagach Chrome znajdziesz w moim poście na blogu Wszystko o flagach Chrome.
Po ponownym uruchomieniu przeglądarki możesz zacząć eksperymentować z regionami CSS.
Omówienie regionów usługi porównywania cen
Regiony CSS umożliwiają automatyczne wstawienie tekstu oznaczonego semantycznie do „pudełek” (obecnie w elementach). Poniższy diagram przedstawia rozdzielenie tekstu (przepływu) od pól (regionów, do których napływa tekst):
Spójrzmy na rzeczywisty przypadek użycia funkcji Regiony usługi porównywania cen. Jestem nie tylko deweloperem w Adobe, ale też piszę książki science fiction. Często publikuję swoje prace online na licencji Creative Commons. Aby umożliwić działanie na jak największej liczbie urządzeń i przeglądarek, często używam bardzo prostego formatu, podobnego do tego:
Dzięki Regionom CSS udało mi się stworzyć witrynę, która jest bardziej atrakcyjna wizualnie i bardziej funkcjonalna, ponieważ jest łatwiejsza w nawigacji i czytaniu:
W celach demonstracyjnych dodaliśmy w tym prototypie możliwość ujawnienia regionów CSS. Na zrzucie ekranu poniżej widać układ obszarów w taki sposób, że sprawiają wrażenie kolumn otaczających grafikę i ciągły cytat na środku:
Możesz poeksperymentować z tym prototypem (oraz wyświetlić kod źródłowy) tutaj. Do nawigacji użyj klawiszy strzałek. Naciskając klawisz Esc, możesz odkrywać regiony. Wcześniejsze prototypy są również dostępne tutaj.
Tworzenie nazwanego przepływu
Kod CSS wymagany do przejścia bloku tekstu przez regiony jest bardzo prosty. Poniższy fragment kodu przypisuje nazwany przepływ o nazwie „article” do elementu div o identyfikatorze „content” oraz ten sam „article” (przepływ) do dowolnego elementu z klasą „region”. W efekcie tekst zawarty w elemencie „content” będzie automatycznie przechodził przez każdy 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:
Pamiętaj, że tekst w elemencie div „content” nie zawiera informacji o prezentacji. Oznacza to, że może ono pozostać całkowicie nienaruszone semantycznie, nawet jeśli przepływa przez różne regiony. Poza tym regiony są tylko elementami, więc są pozycjonowane i dopasowywane za pomocą CSS tak samo jak każdy inny element, a więc są całkowicie zgodne z zasadami elastycznego projektowania stron. Oznaczenie elementów w ramach nazwanego przepływu sprawia, że przechodzi przez nie automatycznie określony tekst.
Obiektowy model CSS
Model obiektu CSS (CSSOM) definiuje interfejsy API JavaScript do pracy z CSS. Poniżej znajdziesz listę nowych interfejsów API związanych z regionami usług porównywania cen:
document.webkitGetNamedFlows(): funkcja, która zwraca zbiór nazwanych przepływów dostępnych w dokumencie.document.webkitGetNamedFlows().namedItem("article")– funkcja, która zwraca odwołanie do określonego przepływu o nazwie. Argument odpowiada nazwie określonej jako wartość właściwości CSSflow-intoifrom-from. Aby uzyskać odniesienie do nazwanego przepływu określonego we fragmencie kodu powyżej, należy przekazać ciąg znaków „article”.WebKitNamedFlow: reprezentacja obiektowa floty z następującymi właściwościami i funkcjami:firstEmptyRegionIndex: wartość całkowita, która wskazuje indeks pierwszego pustego regionu powiązanego z nazwanym przepływem. Aby dowiedzieć się, jak pobrać dane o regionach, przeczytajgetRegions()poniżej.name: wartość ciągu z nazwą przepływu.overset: właściwość logiczna, która:false, gdy treść nazwanego przepływu pasuje do powiązanych regionówtrue, gdy treść nie pasuje i należy uwzględnić większą liczbę regionów.
getContent(): funkcja, która zwraca zbiór z odwołaniami do węzłów wchodzących do nazwanego przepływu.getRegions(): funkcja, która zwraca zbiór z odwołaniami do regionów, w których znajduje się zawartość nazwanego przepływu.getRegionsByContentNode(node): funkcja zwracająca odwołanie do regionu zawierającego określony węzeł. Jest to szczególnie przydatne w przypadku wyszukiwania regionów, które zawierają na przykład nazwane kotwice.
webkitregionoversetchange. To zdarzenie jest wywoływane w elemencieWebkitNamedFlowza każdym razem, gdy z jakiegokolwiek powodu zmieni się układ powiązanych treści (np. dodanie lub usunięcie treści, zmiana rozmiaru czcionki, zmiana kształtu regionu itd.) oraz zmianę właściwościwebkitRegionOversetregionu. To zdarzenie przydaje się do wyłapywania przybliżonych zmian układu. Wskazuje, że wydarzyło się coś ważnego i układ może wymagać uwagi – na przykład: wymaganych jest więcej regionów, niektóre regiony mogą być puste itp.webkitregionfragmentchange. Funkcja nie została zaimplementowana w momencie wprowadzania tej zmiany. To zdarzenie jest wywoływane w elemencieWebkitNamedFlowza każdym razem, gdy układ powiązanych treści z dowolnego powodu zmieni się (podobnie jakwebkitregionoversetchange), ale niezależnie od zmian w usługachwebkitRegionOverset. To zdarzenie przydaje się do wykrywania drobnych zmian układu, które nie muszą mieć wpływu na cały układ nazwanego przepływu. Na przykład: treści są przenoszone z jednego regionu do drugiego, ale cała zawartość mieści się we wszystkich regionach.Element.webkitRegionOverset: elementy stają się regionami, gdy mają przypisaną właściwość CSSflow-from. Te elementy mają właściwośćwebkitRegionOverset, która, jeśli są częścią nazwanego przepływu, wskazuje, czy treść z przepływu wykracza poza obszar. Możliwe wartości webkitRegionOverset:- „overflow”, jeśli treści jest więcej niż jest dostępne w regionie.
- „fit”, jeśli treści przestaną się wyświetlać przed końcem regionu.
- „puste”, jeśli treść nie dotarła do regionu.
Jednym z głównych zastosowań CSSOM jest nasłuchiwanie zdarzeń webkitregionoversetchange i dynamiczne dodawanie i usuwanie regionów w celu dostosowania do różnej ilości tekstu. Jeśli na przykład ilość tekstu do sformatowania jest nieprzewidywalna (np. generowana przez użytkownika), zmieni się rozmiar okna przeglądarki lub rozmiar czcionki zmieni się, może być konieczne dodanie lub usunięcie regionu, aby uwzględnić te zmiany w procesie. Jeśli chcesz uporządkować swoją zawartość na strony, potrzebny będzie mechanizm do dynamicznego modyfikowania DOM oraz regionów.
Poniższy fragment kodu JavaScript ilustruje użycie CSSOM do dynamicznego dodawania regionów w razie potrzeby. Należy pamiętać, że dla uproszczenia nie służy on do usuwania regionów ani definiowania ich rozmiarów i pozycji – służy jedynie 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ług porównywania cen.
Szablony stron usługi porównywania cen
Wykorzystanie CSSOM jest prawdopodobnie najskuteczniejszym i najbardziej elastycznym sposobem wdrażania elementów takich jak stronicowanie i układ elastyczny. Jednak firma Adobe współpracuje z narzędziami do publikowania tekstów i publikacji na komputer wystarczająco długo, by wiedzieć, że projektanci i deweloperzy będą też potrzebować łatwiejszego sposobu na stosunkowo ogólne możliwości stronicowania. Dlatego pracujemy nad rozwiązaniem nazywanym szablonami stron CSS, które umożliwiają w pełni deklaratywne zachowanie stronicowania.
Przyjrzyjmy się typowemu przypadkowi użycia szablonów stron CSS. Fragment kodu widoczny poniżej pokazuje, jak za pomocą CSS można utworzyć 2 nazwane przepływy: „article-flow” i „time-flow”. Dodatkowo definiuje trzeci selektor o nazwie „artykuły połączone”, w którym będą zawarte oba te przepływy. Proste uwzględnienie właściwości overflow-style w selektorze „artykułów połączonych” wskazuje, że treści powinny być automatycznie układane na stronach wzdłuż osi x, czyli w poziomie:
<style>
#article {
{ % mixin flow-into: article-flow; % }
}
#timeline {
{ % mixin flow-into: timeline-flow; % }
}
#combined-articles {
overflow-style: paged-x;
}
</style>
Po zdefiniowaniu przepływów i określeniu odpowiedniego działania nadmiarowego możesz 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”. We fragmencie kodu powyżej definiujemy 3 boksy, z których każdy odpowiada kolumnie. Tekst z przepływu artykułów będzie przechodzić przez kolumny po lewej i prawej stronie, a tekst z przepływu osi czasu wypełni kolumnę pośrodku. Wynik może wyglądać np. tak:
Zwróć uwagę, że tekst artykułu – tekst w kolumnach po lewej i prawej stronie – jest w języku angielskim, a oś czasu po środku jest niemiecka. Co więcej, możesz wyświetlać dokument w poziomie i nie musisz używać kodu JavaScript. Wszystko zostało wykonane w całości deklaratywnie w CSS.
Szablony stron CSS to wciąż propozycja, ale mamy prototyp, który korzysta z „podkładki” w języku JavaScript (nazywanej też polyfill), aby umożliwić Ci eksperymentowanie.
Więcej informacji o regionach usług porównywania cen znajdziesz na stronie regionów usług porównywania cen na stronie html.adobe.com.
Wykluczenia usług porównywania cen
Aby uzyskać układ przypominający czasopisma, nie potrzeba możliwości przepływu tekstu przez różne regiony. Ważnym elementem wysokiej jakości i ciekawego wizualnie programu wydawnictwa na komputery jest możliwość osunięcia tekstu wokół lub wewnątrz nieregularnych grafik i kształtów. Wykluczenia usług porównywania cen zapewniają w internecie taką jakość produkcji.
Poniższy zrzut ekranu przedstawia prototyp usługi porównywania cen, na którym widać tekst dynamicznie poruszający się wokół ścieżki odpowiadającej konturowi dużej formacji skalnej:
Odwrotność została przedstawiona na następnym zrzucie ekranu: tekst umieszczony wewnątrz wielokątów o nieregularnych kształtach:
Pierwszym krokiem do uzyskania możliwości opływania tekstu wokół dowolnych kształtów lub wewnątrz nich jest opracowanie i zoptymalizowanie wymaganych algorytmów. Adobe obecnie pracuje nad implementacjami, które zostaną dodane bezpośrednio do WebKit. Po zoptymalizowaniu tych algorytmów staną się one podstawą, na której tworzą się pozostałe wykluczenia usług porównywania cen.
Więcej informacji o wykluczeniach usług porównywania cen znajdziesz na stronie wykluczeń usług porównywania cen na stronie html.adobe.com. Natomiast w poście na blogu Hansa Mullera zatytułowanym Horizontal Box: Polygon Intersection for CSS Wykluczenia (Pozioma ramka: wielokąt na potrzeby wykluczeń CSS) dowiesz się więcej o pracy Adobe nad technologią wykluczania CSS.
Obecny stan regionów i wykluczeń usług porównywania cen
Pierwszy raz mówiłem o regionach i wykluczeniach usług porównywania cen podczas publicznego wydarzenia na konferencji Adobe Developer podczas konferencji Google I/O 2011. Wyświetlaliśmy wtedy wersje demonstracyjne w naszej własnej przeglądarce prototypów. Odbiór był pełen entuzjazmu, jednak dało się wyczuć rozczarowanie, gdy widzowie odkryli, że żadna z funkcji, które pokazuję, nie jest jeszcze dostępna w żadnej z popularnych przeglądarek.
W tym roku (2012) po raz kolejny byłam na Google I/O, tym razem jako prezenter z moim kolegą Vincentem Hardym i Alexem Danilo z Google (prezentację możesz obejrzeć tutaj). Zaledwie rok później około 80% specyfikacji regionów usług porównywania cen zostało wdrożonych w WebKit i znajduje się już w najnowszej wersji Google Chrome (przypominamy, że regiony usług porównywania cen trzeba obecnie włączyć w chrome://flags). Wstępna obsługa regionów usług porównywania cen jest już dostępna w Chrome na Androida:
Ponadto regiony i wykluczenia usług porównywania cen są wdrażane w wersji testowej przeglądarki Internet Explorer 10 i są obecnie uwzględnione w planie działań Mozilli na 2012 r. dotyczącym przeglądarki Firefox. Kolejna główna wersja Safari powinna obsługiwać większość specyfikacji regionów usług porównywania cen, a kolejne aktualizacje powinny uwzględniać pozostałe wartości.
Poniżej znajdziesz szczegółowy harmonogram postępów, jakie zrobiliśmy w kwietniu 2011 r. w zakresie regionów i wykluczeń usług porównywania cen:
Podsumowanie
Firma Adobe ma ogromne doświadczenie w zakresie tekstu i czcionek, a także w zakresie publikowania treści na komputerach dzięki takim narzędziom jak Indesign. Mimo że internet jest już potężną platformą tekstową, chcemy wykorzystać naszą wiedzę i doświadczenie, aby jeszcze bardziej rozwinąć prezentację tekstową. Regiony usług porównywania cen i wykluczenia usług porównywania cen pozwalają utrzymać porządek semantyczny treści, a także zapewniają układ przypominający czasopisma.