Šablona:0

Tuto stránku mohou editovat jen zavedení uživatelé a správci.
Z Wikipedie, otevřené encyklopedie

0

Šablona pomáhá zarovnávat čísla na desetinnou čárku, aby se zarovnala pod sebou, typicky pro sloupce řádů čísel v tabulkách. Vkládají se její pomocí za čísla nuly, místo chybějících řádů desetinných míst, a to jako skrytý text, který však při zobrazení ve stránce stále zabírá místo a tím pomáhá ke správnému rozprostření cifer pod sebou, stejnými řády pod sebe do sloupců.

Jsou dvě možnosti, kam k číslu umístit „zabírač místa“, typicky skryté cifry (nevýznamové nuly) a také mezery:

  • Typograficky správně se čísla zarovnávají doprava, pomocí této šablony se tedy chybějící desetinná místa nahrazují daným textem, typicky nulami. Zarovnávání vpravo je však potřeba nejprve aktivovat:  style="text-align: right;"
  • Ačkoli se čísla správně mají zarovnávat doprava, někde wikipedisté toto neaktivovali, ponechali zarovnávání doleva, a pomocí této šablony vkládají „placeholdery“ nalevo od formátovaných čísel, jako nahrazení tisíců/desetitisíců... na místa nejvyšších řádů.

Celá věc se ještě navíc komplikuje tím, že při formátování velkých a desetinných čísel přicházejí ke slovu i oddělovače tisíců. V české typografii jde o nezlomitelnou mezeru:  . V praxi tedy jde o kombinace nul a mezer, protože tyto znaky mají různé šířky. Naopak nic složitějšího už se pro zarovnávání čísel podle jejich řádů nepoužívá: Nuly a mezery stačí.

Funkce skrývání

Šablona pomocí stylování <span style="visibility:hidden;"> skrytě „zobrazuje“ zadaný text, který tedy není vidět, ale na stránce stále zabírá místo.

Parametr

{{{1|0}}}Text ke skrytí – zadává se pomocí jediného parametru, nepojmenovaného volitelného.

Text je nepovinný, vnitřně se v šabloně vždy nějaký použije: Defaultně přednastavenou výchozí hodnotou je „0“. Tyto tři případy tedy dávají stejný výsledek, jsou ekvivalentní: {{0}} = {{0|}} = {{0|0}}.

Možnosti zarovnávání čísel

Ačkoli se takto hodnoty a jejich popisné texty tváří jako sloupce, stále jde o řádkový zápis: O tom se lze po zobrazení přesvědčit tak, že při označení tohoto textu, nejspíše myší, se vybere nejdříve popisný text na stejném řádku, až pak hodnota z dalšího řádku. Celý řádek, hodnota a její popis, se v celé šíři označí jako jeden souvislý blok textu.

Jde o simulaci dvou sloupců, o zarovnání oddělovačů druhého sloupce ošetřením stejných šířek čísel na levé straně řádku, na stejný počet znaků: Při větším množství řádků a jejich číselných hodnot je údržba náročná, vše je řízeno ručně, nic „samo“.

Zarovnávání vlevo

Předsazení zleva

pro vstupy
{{0|00}}1 – jednotky
{{0}}10 – desítky
100 – stovky
dá výstupy
001 – jednotky
010 – desítky
100 – stovky

Pro celočíselné hodnoty se tato šablona {{0}} vůbec nemá používat. Systematičtější je prosté zarovnání doprava: "text-align: right;". Na to ale musí být zarovnávané celočíselné hodnoty v jednom bloku, aby se doprava zarovnávalo na pravý okraj jejich společného nadbloku-kontejneru.

Skrytý text z obou stran

Při zarovnávání vlevo musí zarovnávání čísel řešit editoři sami ručně, dokonce z obou stran čísel, pracně řídit začátky pro druhý sloupec udržováním konstantní délky číselného textu. Zde v příkladu zabírá číselný sloupec 11 znakových míst, což editor musí nejprve určit a pak ve všech řádcích udržovat sám ručně. Což se ještě více komplikuje, když čísla nemají stejné počty cifer ani zprava, ani zleva.

typograficky úplně
{{0|0&nbsp;00}}0,123&nbsp;4 – desetitisíciny
{{0|0&nbsp;0}}12,34{{0|0&nbsp;0}} – desítky
1&nbsp;234{{0|,000&nbsp;0}} – tisíce
oddělování tisíců prostými mezerami
{{0|0 00}}0,123 4 – desetitisíciny
{{0|0 0}}12,34{{0|0 0}} – desítky
1 234{{0|,000 0}} – tisíce
dá výstupy
0 000,123 4 – desetitisíciny
0 012,340 0 – desítky
1 234,000 0 – tisíce

Místo dvojího použití skrytého textu kolem jediného čísla je však lepší raději použít zarovnávání čísel doprava:

  • Pomocí CSS nastavit zarovnávání předmětného textu úplně doprava (tím odpadne skrytý text pro zarovnání tisíců),
  • čísla od pravého okraje pak případně zas odstrčit (aby se vyřešily různě dlouhé desetiny). I toho však může být možno dosáhnout i bez skrytého textu. (Viz dále: spočítané násobky velikostí „em“)

Čísla doprava, řádkově

Ačkoli pro CSS a prohlížeče již existuje předpis pro „zarovnávání na desetinnou čárku“, implementace v prohlížečích vázne. To je asi jediný „opodstatněný“ důvod pro hledání technického řešení problému „zarovnávání čísel“.

Skrytým textem za desetinami čísel

typograficky úplně
<div style="text-align: right;">
:desetitisíciny - 0,123&nbsp;4
:desítky - 12,34{{0|0&nbsp;0}}
:tisíce - 1&nbsp;234{{0|,000&nbsp;0}}
</div>
oddělování tisíců prostými mezerami
<div style="text-align: right;">
:desetitisíciny - 0,123 4
:desítky - 12,34{{0|0 0}}
:tisíce - 1 234{{0|,000 0}}
</div>
dá výstupy – u pravého okraje stránky
desetitisíciny – 0,123 4
desítky – 12,340 0
tisíce – 1 234,000 0

Popisky k číslům, kdyby byly po pravé straně čísel, by jejich „zarovnání na desetinnou čárku“ ovšem rozhodily. A samy „sloupce“ zarovnané opět nejsou: To už je vlastně dvojí zarovnávání:

  • zarovnávání čísel na desetinnou čárku,
  • zarovnávání sloupců na stejnou šířku.

Toto dvojí zarovnávání, napříč řádky, kdyby se mělo řešit řádkově – to už nedává příliš smysl.

Spočítané odsazení za desetinami čísel

Stejného efektu, zarovnání na desetinnou čárku, ovšem lze dosáhnout i použitím již existujících vlastností CSS stylování s běžnými blokovými značkami HTML:

Číselné hodnoty sice zarovnány doprava, ale stále je organizované řádkově, bez vzájemné a browserem automatizované interakce čísel samotných – K tomu je potřeba spousta ruční práce wikipedistů (vytváření a údržby), pro simulaci fixního rozměru „levého sloupce“ s čísly.

použitím odstrkávání stylováním – řádkově

Žádný skrytý text se jako „placeholder“ nevkládá, prázdné místo pro chybějící desetinné řády se zabírá spočítáním velikosti a dosazením hodnoty do CSS, pro rozšíření okrajů „padding“.

padding-left + na míru spočítané násobky velikostí „em“
"padding-left: 0.6em;", explicitně zadané násobky šířek znaků:

Metoda vhodná obvzlášť v kombinaci s fontem s neproměnlivou šířkou znaků.

1 – Jednotky
10 – Desítky
100 – Stovky
1000 – Tisíce

Jde o obdobné řešení jako je „vkládání skrytého textu, který zabírá místo“, jen místo aby místo zabíral skrytý text, místo se zabere mezerou dané velikosti, resp. rozšířením pravého vnitřního okraje směrem zprava ke středu.

Čísla doprava, blokově

Bloky vedle sebe floatingem

text-align:right + float:left – blokově
"text-align: right; float: left"

1
10
100
1000

– Jednotky
– Desítky
– Stovky
– Tisíce

text-align: right a skytým textem odtlačeno doleva, do sloupců bez tabulky pomocí float: left – blokově
"text-align: right; float: left"

0,123
1,230
12,300
123,000

– Jednotky
– Desítky
– Stovky
– Tisíce

<div style="padding:2px;">
<p style="padding:0px; padding-right:4px; text-align: right; float: left;">
0,123<br />
1,23{{0|0}}<br />
12,3{{0|00}}<br />
123{{0|,000}}<br />
</p>
– Jednotky<br />
– Desítky<br />
– Stovky<br />
– Tisíce
</div>

Bloky do sloupců tabulky

Prý pro použití pro textové zarovnávání textu, ačkoli pak vlastně jde o simulaci tabulky – tedy proč nepoužít opravdovou tabulku? A v ní pak třeba zarovnávání k pravému okraji buněk:  style="text-align: right;"

ostylováno doprava, v tabulce o dvou buňkách v řádku, bez určení velikosti
"text-align: right;"

0,123
1,230
12,300
123,000

– Jednotky
– Desítky
– Stovky
– Tisíce

{|style="border: 1px solid blue;"
|-
|style="text-align:right;"|
0,123<br />
1,23{{0|0}}<br />
12,3{{0|00}}<br />
123{{0|,000}}<br />
|
– Jednotky<br />
– Desítky<br />
– Stovky<br />
– Tisíce
|}

Technické pozadí

Už sám fakt, že znakem „0“ z této šablony lze nahrazovat všech deset cifer, je dán technickou realizací fontů v počítačích: Už zde jsou takto definovány, že i cifra „1“, intuitivně úzká, zabírá stejně místa jako cifra „0“, intuitivně široká. Toto je ve fontu úmyslně, původně ke zobrazování například písemného násobení, kde se čísla zapisují pod sebe, dnes obecně pro zarovnávání tabulkových zápisů. Poděkujme tedy tvůrcům fontů.

Definice CSS pro zadávání šířkových rozměrů zná jednotku „ch“ (jako „character“) o šířce jednoho znaku „0“:

  • 123456789012345678901234567890 – 123 45 67 890 – jako prostý text;
  • 123456789012345678901234567890 – 123 {{0|45 67}} 890 – jako prostý text se skrytou částí: vyzkoušejte si na stránce vyhledat řetězec „123456789012345678901234567890“;
  • 1234567890 – <span style="padding-right: 20ch;">123</span>4567890 – přes CCS vlastnost padding: 20ch; tedy jako 20x šířka cifry „0“, při vědomosti o stejné šířce všech cifer.[1][2]

Reference

  1. CSS Values and Units Module, Level 3. Font-relative lengths, csswg.org; „ch unit“: jednotky pro stylování, mj. i rozměry pro šířku, např. jednotka „ch“ pro rozměr délky-šířky znaku (nuly), relativně k rozměrům fontu.
  2. CSS Units, Browser Support, w3schools.com; podpora délkových-rozměrových jednotek v jednotlivých browserech, od jakých jejich verzí: „ch“ již rozšířená a podporována.

Související články

Související šablony