Miejsce na tabulatory zamiast wielu spacji nierozdzielających („nbsp”)?


958

Czy można wstawić znak tabulacji w HTML zamiast wpisywać  cztery razy?


20
Przydaje mi się użycie <PRE> podczas używania czasu wielokrotnego tabulacji na początku wiersza (na przykład przy wykreślaniu kodu C)
Guy Kovel

TABCharakter ... do czego?
Michel de Ruiter,

możesz zdefiniować własny znacznik <tab>, a następnie użyć funkcji jQuery w readycelu zastąpienia lub uzupełnienia żądaną liczbą równoważnych spacji.
Khaled.K

Jeśli naprawdę potrzebujesz kart, spróbujwhite-space
Buksy

6
Do Twojej wiadomości - Jeśli statyczny 4x &nbsp;(lub pojedynczy &emsp;) go nie wycina i chcesz, aby ustawił się w linii do następnej kolumny z „4 odstępami”, jak może to zrobić tabulator (co oznaczałoby czasami, że w rzeczywistości ma 0 lub 1 lub 2 lub 3 spacje w kolejce) .. jak na przykład ... powiedzmy, niektóre edytory tekstu .. Niestety, nie możesz w HTML ... bez <table>s ... a także, używając pewnej ilości spacji, aby go zhakować ... będzie wymagać stałej czcionki .... Myślę, że większość problemów leży pomiędzy potrzebą stałej czcionki a tym, że HTML uwielbia usuwać białe znaki.
Pimp Trizkit

Odpowiedzi:


582

Korzystanie z CSS jest znacznie czystsze. Zamiast tego spróbuj padding-left:5emlub margin-left:5emodpowiednio.


13
@Alohci Wypełnienie IMHO z CSS nie jest tak dobre, ponieważ kiedy powiększysz tekst w przeglądarce, rozmiar tekstu wzrośnie, ale nie wypełnianie AFAIK.
AlexV

16
@AlexV - Jeśli użyjesz emwymiaru, tak jak ja, powinien on rozszerzyć się o rozmiar tekstu. Nawet jeśli tego nie zrobisz, będzie to zależeć od charakteru zastosowanego mechanizmu powiększania.
Alohci

2
@DavidThielen - HTML 3, w którym pojawił się element TAB, nie był uruchamiany przez twórców przeglądarki, a element TAB nigdy nie został zaimplementowany. Zamiast tego utworzono HTML 3.2, który był nieco prostszy i został zaimplementowany.
Alohci

2
@Eoin - rzeczywiście. Czyli co naprawdę chcesz w tych przypadkach są zakładka przystanki . Ale nie o to pytał OP. OP poprosił o zastąpienie wielu sekwencyjnych spacji, które nie łamią się, co również nie wyrównałoby rzędów. CSS ma tab-sizewłaściwość, której naprawdę chcesz, ale obsługa przeglądarki była niepoprawna. Jeśli tego nie zrobisz, układ stołu lub może Flexbox to twoje najlepsze zakłady.
Alohci

5
to nie odpowiada na pytanie. odpowiedź poniżej autorstwa Kristian dotyczy problemu, o którym pisał użytkownik
Pranavan Maru

1264

To zależy od zestawu znaków, którego chcesz użyć.

Nie ma jednostka zakładce zdefiniowane w ISO-8859-1 HTML - ale istnieje kilka białych znaków innych niż &nbsp;takie, jak &thinsp;, &ensp;i &emsp;.

W ASCII &#09;jest zakładką.

Oto pełna lista encji HTML i przydatna dyskusja na temat białych znaków na Wikipedii .


2
Jaka jest różnica między &ensp;i &emsp;? Testowałem, oba mają dokładnie taką samą przestrzeń ..!
Shafizadeh,

3
Tajny sos do robienia & # 09; wyświetlana w HTML jako tabulacja jest białą definicją CSS. <p style = "display: inline-block; white-space: pre-wrap;"> & # 09; ¡Muy bien! Tabbing działa dla mnie w języku hiszpańskim i angielskim </p>. biała spacja: przed; działa również. Możesz także użyć znacznika „tab” <tab /> wraz z CSS :: before Tab Selector :: before {content: "\ 0009";}, ale nie wyświetla się jako karta podczas wyróżniania, wycinania i wklejania .
Jules Bartow

3
@Shafizadeh Ze specyfikacji W3 : odstęp en jest o połowę mniejszy niż rozmiar punktu, a odstęp em jest równy rozmiarowi punktu bieżącej czcionki. &emsp;jest nieco większy. Widzę różnicę w Chrome 64 i FireFox 58.
Dmitry

Szukałem tego podczas budowania dużego zapytania concat () w MySQL do użycia w raporcie Crystal. ASCII (& # 09;) wykonał robotę doskonale!
Mike D Wakelyn

Właśnie tego szukałem. Rozłożyłem niektóre tytuły za pomocą atrybutu justowania w ostatnim wierszu, ale nie chcę, aby niektóre z nich się rozdzieliły. The & ensp; zapobiegł temu.
Alex Banman


195

& emsp; jest odpowiedzią.

Nie będą one jednak tak funkcjonalne, jak można się spodziewać, jeśli przyzwyczaisz się do korzystania z poziomych tabel w edytorach tekstu, np. Word, Wordperfect, Open Office, Wordworth itp. Są one o stałej szerokości i nie można ich dostosowywać.

CSS daje o wiele większą kontrolę i stanowi alternatywę, dopóki W3C nie zapewni oficjalnego rozwiązania.

Przykład:

padding-left:4em 

..lub..

margin-left:4em 

..właściwe

To zależy od zestawu znaków, którego chcesz użyć.

Możesz ustawić niektóre tabulatory i używać ich podobnie do tagów h.

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... i używaj ich w ten sposób:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>

Uruchom fragment powyżej, aby zobaczyć wizualny przykład.

Dodatkowa dyskusja

W ISO-8859-1 HTML nie ma horyzontalnych elementów tabulacji, jednak na przykład dostępne są inne znaki białych znaków niż zwykle &nbsp; &thinsp;, &ensp;I wspomniana&emsp; .

Warto również wspomnieć, że w ASCII i Unicode &#09;jest to tabulacja pozioma.


2
To nie jest poprawne XHTMLwedług walidatora W3
Buksy

To tylko połowa prawdy, ponieważ & emsp; jest prawdziwym narzutem W3C. Ale wyraźnie odnosisz się do korzystnego przykładu CSS. W tym przypadku wykorzystujemy tagi niestandardowe, które są nowym narzutem i nie są częścią zestawu W3C. Walidator W3C jest ścisły do ​​tego stopnia, że ​​zawsze oznacza niestandardowe tagi jako błędy. To zależy od Ciebie, co jest ważniejsze. Najwyższy czas, abyśmy otrzymali przyzwoitą oficjalną implementację zakładek dodanych do zestawu znaczników HTML. Mam nadzieję że to pomoże.
WonderWorker

2
Użyłem tego w przypadku nagłówków Swing JTable z wartością String i znakiem strzałek HTML, gdzie potrzebowałem tego znaku jako separatora. Działa świetnie! Dzięki!
Blake Neal

2
„Co dziwne, w html nie ma poziomej tabulacji”. Nie jest to wcale dziwne, ponieważ formatowanie konsekwentnie odchodzi od HTMLa i css, a tabulator nie jest elementem wizualnym, tylko elementem formatującym, ale dobrą odpowiedzią i wyjaśnieniem
MikeT

75

Poniżej znajdują się 3 różne sposoby wstawiania pustej przestrzeni przez HTML

  1. Wpisz, &nbsp;aby dodać pojedynczą spację.
  2. Wpisz, &ensp;aby dodać 2 spacje.
  3. Wpisz, &emsp;aby dodać 4 spacje.

3
Po prostu ;do nich też dodaj . Lubię&nbsp;
Amio.io,

2
Ta odpowiedź faktycznie odpowiada na pytanie. To głupie, jak odpowiedź CSS jest oznaczona jako odpowiedź.
Mani,

@Mani Pytanie zostało zadane w 2009 r., A zaakceptowana odpowiedź pochodzi z 2009 r. Ta odpowiedź została dodana w 2018 r. Patrząc na to w ten sposób, nie jest głupia.
ᴛʜᴇᴘᴀᴛᴇʟ

@ ᴛʜᴇᴘᴀᴛᴇʟ Zapomnij, czy to faktycznie odpowiada na pytanie, czy nie, ale zaznaczone, które nie odpowiada dokładnie, jest punktem, który próbuję zrobić.
Mani,

To jest właściwa właściwa odpowiedź. Dzięki!
Ariel Monaco

67

Próbować &emsp;

Jest to równoważne z czterema &nbsp;s.


W rzeczywistości nie jest poprawną odpowiedzią jak w3.org/MarkUp/html3/specialchars.html . wyraźnie mówi, że zależy to od rodzaju użytej czcionki, również spacja jest równa rozmiarowi czcionki bieżącej, a spacja jest równoważna dwóm
spacjom

52

Naprawdę nie ma łatwego sposobu wstawienia wielu spacji wewnątrz (lub w środku) akapitu. Ci, którzy sugerują użycie CSS, nie mają sensu. Nie zawsze możesz próbować wciąć akapit z boku, ale w rzeczywistości próbujesz wstawić dodatkowe spacje w danym miejscu.

Zasadniczo w tym przypadku przestrzenie stają się treścią, a nie stylem. Nie wiem, dlaczego tak wielu ludzi tego nie widzi. Wydaje mi się, że sztywność, z jaką starają się wymusić separację stylu i reguły treści (HTML został zaprojektowany, aby robić to od samego początku - nie ma nic złego w definiowaniu stylu unikalnego elementu przy użyciu odpowiednich tagów bez konieczności wydawania dużo więcej czas na tworzenie arkuszy stylów CSS i nie ma absolutnie nic nieczytelnego, gdy jest używany z umiarem. Można też powiedzieć, że można szybko coś zrobić.) tłumaczy, w jaki sposób mogą oni traktować tylko białe znaki jako używane tylko do styl i wcięcie.

A kiedy nie ma wdzięcznego sposobu wstawiania spacji bez konieczności polegania na &emsp;i&nbsp; tagów, będę argumentować, że otrzymany kod staje się znacznie bardziej unreadible niż gdyby nie było odpowiednio o nazwie tag, który byłby pozwalał na szybkie wstawianie wielu pomieszczeń (lub, jeśli wiesz, miejsca nie były niepotrzebnie zajmowane).

Jak jednak wspomniano powyżej, najlepszym rozwiązaniem byłoby użycie &emsp;wkładki w odpowiednim miejscu.


1
HTML od samego początku nie był zaprojektowany z myślą o niestandardowym stylu.
Markus Unterwaditzer

Uwielbiam twoje zdanie na temat tego, że wcięcie nie zawsze jest tym, czego ludzie chcą!
Programy Redwolf

46

Lepiej jest użyć tagu wstępnego . Na wstępnie definiuje tag wstępnie sformatowany tekst.

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

Dowiedz się więcej o tagu wstępnym pod tym linkiem


1
@HuzaifaSaifuddin co masz na myśli? <pre>jest znormalizowany w HTML5 z takim samym zachowaniem jak w HTML4.
Sumit

Przepraszam, nie wiem, że napisałem to. Zgadzam się z tym, co mówisz .. Przepraszam za złe informacje
Huzaifa Saifuddin,

Formatowałem dane wyjściowe do wklejenia w arkuszach kalkulacyjnych, co pozwoliło mi wstawić \ t znaków do tabulacji. Zdecydowanie była to moja odpowiedź. Dobrze idzie.
Craig Brett

1
To najlepsza opcja IMHO. Możemy również zastosować definicję stylu do <pre>, aby w razie potrzeby mieć poprawną czcionkę „monospace”. Przykład: pre {rodzina czcionek: „Lucida Console”, Monako, monospace; rozmiar czcionki: 90%; }
reverpie

41

Natknąłem się na to, szukając metody i ostatecznie wymyśliłem własną, która wydaje się działać z łatwością dla tego, co jest potrzebne. Jestem nowy w publikowaniu tutaj, więc mam nadzieję, że to zadziała ... Ale miej to w CSS:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

Następnie w swoim HTML niech to będzie „długa karta” w połowie zdania, tak jak potrzebowałem:

<span class="tab"></span>

Oszczędności w stosunku do kwoty &nbsp;lub &emsp;potrzebnej.

Mam nadzieję, że to komuś pomaga, na zdrowie!


3
Spowoduje to dodanie 80px po lewej i 80px po prawej stronie spantagu, a nie do końca karty.
mcont

Nadal sprytna odpowiedź, ponieważ dodajesz tylko krótki znacznik, pozwalając CSS na wykonanie stylizacji.
wywołują



9

Jeśli białe znaki stają się tak ważne, lepiej użyć wstępnie sformatowanego tekstu i znacznika <pre>.


OP nie jest tak szczególny w kwestii białych znaków, zapytał tylko o skróty do wielu znaków &nbsp;. Wywołanie <pre>tagu spowoduje wiele dodatkowej pracy.
izomorfizmy

Aby uniknąć czcionki
Monospace

Biała spacja nie jest that importantniczym. To fakt z życia.
Programy Redwolf

9

Jeśli chcesz po prostu wciąć pierwsze zdanie w akapicie, możesz to zrobić za pomocą małej sztuczki CSS:

p:first-letter {
    margin-left: 5em;
}

Tak. To też zadziała. Pamiętaj tylko, aby go włączyć, :first-letterjeśli chodzi o wcięcie tylko pierwszego zdania.
peirix

9

Tag <tab> nigdy nie trafił do przeglądarek, mimo że został wprowadzony w HTML3. Zawsze myślałem, że to prawdziwa szkoda, ponieważ życie byłoby łatwiejsze w wielu okolicznościach, gdybyśmy mieli do dyspozycji. Ale możesz łatwo temu zaradzić, aby uzyskać fałszywy tag <tab>. Dodaj następujące elementy w nagłówku kodu HTML lub bez tagów stylu do swojego CSS:

<style>
    tab { padding-left: 4em; }
</style>

Od tego momentu, kiedy potrzebujesz karty w dokumencie, umieść tam <tab>. To nie jest prawdziwa karta, ponieważ nie wyrównuje się do znaków tabulacji, ale działa dla większości potrzeb, bez konieczności roztrząsania nieporadnych postaci lub rozpiętości znaków. To naprawdę ułatwia sprawdzenie źródła i szybkie sformatowanie prostych rzeczy, w których nie chcesz przechodzić przez kłopoty ze stołami lub innymi bardziej złożonymi „rozwiązaniami”.

Jednym z fajnych aspektów tego rozwiązania jest to, że możesz szybko wyszukać / zamienić dokument tekstowy, aby zastąpić wszystkie tabele znacznikiem <tab>.

Być może będziesz w stanie zdefiniować kilka prawdziwych TAB pozycji bezwzględnej, a następnie użyj odpowiedniej karty (np. <tab2> lub <tab5> lub cokolwiek innego) tam, gdzie to konieczne, ale nie znalazłem sposobu, aby to zrobić bez wcięcia kolejnych wierszy .


7

Możesz użyć tabeli i zastosować widthatrybut do pierwszego <td>.

Kod:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

Wynik

Content1       Content2
Content3       Content4

Dzięki!! Jest to najlepsze i najbardziej ogólne rozwiązanie w sytuacjach, w których CSS nie jest możliwy.
John Henckel,

6

Użyłem rozpiętości ze stylizacją w linii. Musiałem to zrobić, ponieważ przetwarzam ciąg zwykłego tekstu i muszę zastąpić \ t 4 spacjami (appx). Nie mogłem użyć&nbsp; dalej w procesie, w którym były one interpretowane, tak że ostateczna ocena miała wolne miejsca.

HTML:

<span style="padding: 0 40px">&nbsp;</span>

Użyłem go w funkcji php takiej jak ta:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

6

Jeśli potrzebujesz tylko jednej karty, poniższe działały dla mnie.

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

z HTML coś w stylu:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p> 

Możesz dodać więcej „zakładek”, dodając dodatkowe style „zakładek” i zmieniając HTML, np .:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

z HTML coś w stylu:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

4

Jeśli używasz CSS, proponuję następujące:

p:first-letter { text-indent:1em; }

To spowoduje wcięcie pierwszego wiersza, jak w tradycyjnych publikacjach.


4

Jest do tego prosty css:

white-space: pre;

Zachowuje spacje, które dodajesz w kodzie HTML, zamiast je ujednolicać.


3
<span style="margin-left:64px"></span>  

Rozważ to tak: jedna karta jest równa 64 pikselom. To jest przestrzeń, którą możemy dać CSS.


3

możemy użyć style = "white-space: pre" w następujący sposób:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

puste miejsce w środku jest wypełnione tabulatorami, ilość tabulatorów zależy od tekstu.

będzie to wyglądać tak:

Text    : value
Text2   : value2
Text32  : value32

3

Idealny kod CSS, który powinien zostać użyty, powinien być kombinacją właściwości „display” i „min-width” ...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

2

Cóż, jeśli potrzebujemy długiej spacji na początku jednej linii tylko z całego akapitu, może to być rozwiązanie:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

Jeśli jest to zbyt wiele do napisania lub w wielu miejscach potrzebne są takie zakładki, możesz to zrobić

<span class='tab'>&nbsp;</span>

Następnie dołącz to do CSS:

span.tab {display:inline-block;height:1em;width:4em;}

2

Używam listy bez punktorów, aby nadać wygląd „tabulacji”. (To właśnie czasami robię, używając MS Word)

W pliku CSS:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

A w pliku HTML użyj nieuporządkowanych list:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

Zaletą tego rozwiązania jest to, że można tworzyć kolejne wcięcia za pomocą zagnieżdżonych list.

Noob tutaj mówi, więc jeśli są jakieś błędy, proszę o komentarz.


(x) HTML powinien określać treść dokumentu, sposób wyświetlania powinien być obsługiwany przez CSS. Istnieją powody, dla których układanie stron internetowych przy użyciu tabel nigdy nie powinno być stosowane w przypadku danych nie tabelarycznych.
Nielsvh

1

używamy niestandardowej klasy rozpiętości przestrzeni

<span class='space'></span>

Uwzględnij klasę przestrzeni w CSS.

.space 
{
   margin-left:45px;
}

1
Tak jak w odpowiedzi Alohci, użyj em/ rempomiary, aby umożliwić powiększenie tekstu w przeglądarce.
Charlie Harding

0

Korzystając z CSS i najlepszych praktyk, dynamiczne tworzenie zagnieżdżonych, wciętych menu wyglądałoby następująco:

  1. Utwórz styl dla każdego zagnieżdżenia, taki jak wcięcie1, wcięcie2 itp., Z każdym określającym własny lewy margines. Struktura witryny rzadko powinna przekraczać trzy poziomy zagnieżdżenia.
  2. Użyj zmiennej statycznej (liczby całkowitej) w ramach funkcji autorekurencyjnej, aby śledzić rekurencję.
  3. Do każdej pętli dodaj numer pętli do słowa indent, używając skryptów po stronie serwera, takich jak PHP lub ASP, aby menu te były odpowiednio sformatowane przez CSS.

Ewentualnie można przejść przez zmienną statyczną, aby dodać odstępy za pomocą wielu &nbsp;lub <pre>znaczników lub innych znaków, odpowiednio.

Po przetestowaniu znaku tabulacji poziomej &#09;odkryłem, że nie działa on jako zamiennik wielokrotności &nbsp;w opisanym scenariuszu. Możesz mieć różne wyniki.


0

To trochę brzydkie rozwiązanie, ale możesz to zrobić

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

A następnie użyj zmiennej tab w swoich ciągach.


0

Tylko tag „przed”:

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

Możesz zastosować dowolną klasę CSS do tego znacznika.


0

Po prostu poleciłbym:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>

0
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

Upewnij się, że kod koloru pasuje do tła, w którym px jest zmienny do pożądanej długości karty.

Następnie dodaj tekst po <t>. </ T>

Kropka służy jako miejsce do przechowywania i łatwiej jest pisać, ale „& # 160;” może być stosowany zamiast kropki, dzięki czemu kodowanie kolorów nie ma znaczenia.

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

Jest to przydatne głównie do wyświetlania akapitów tekstu, chociaż może być przydatne w innych częściach skryptów.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.