Przejdź do zawartości

Szablon:Font

Z Wikibooks, biblioteki wolnych podręczników.
 Dokumentacja szablonu [zobacz] [edytuj] [historia] [odśwież]

Użycie

[edytuj]

Znacznik liniowy umieszczany w tekście pozwalający nadać temu elementowi pewne cechy, oparty na obsłudze tagów: <span style="font-family:coś;font-size:coś;line-height:coś;color:coś">...</span> (jest to element liniowy) - (tagi języka HTML), oraz identyfikatorów: id, styli: style (właściwości i ich zawartości przedstawiający język CSS), klas: class (reguł w kaskadowych arkuszach stylów) i atrybutów (inne niż: id, style i class), elementu HTML. Użycie: {{Font|kod}}, gdy w kodzie znajdują się znaki "=", to w nim należy stosować szablon {{=}}. Tekst jest umieszczany, wewnątrz tego szablonu, pomiędzy tymi tagami.

Opis parametrów

[edytuj]
Wywołanie
{{Font|1=|face=|size=|weight=|variant=|style=|line=|color=|spacing=|background=|border=|display=|id=|styl=|klasa=|atrybuty=}}

Szablon {{Font}}, przyjmuje argumenty, którego wartości wraz z odpowiednimi nazwami, oprócz zmiennej 1, w nim, wsadza on do tagu, coś w rodzaju: <tag nazwa="wartość">...</tag>, obsługiwanego przez niego znacznika, przez którego on jest oparty, a oto lista tych zmiennych poniżej.

Parametry
  • 1 - zawartość tekstu pomiędzy znacznikami - wymagany,
  • face (font-family w atrybucie: style) - rodzina czcionek według CSS, domyślna wartość: inherit - sugerowany,
  • size (font-size w atrybucie: style) - rozmiar czcionki, domyślna wartość: inherit - sugerowany,
    • wartość: | size = coś, gdzie to coś może przyjmować wartości dodatnie jak i ujemne, ze znakiem, liczb całkowitych, czy ułamkowych, takie jak: +4, czy -2, a nawet +2.3 - (w analogii do przestarzałego znacznika, np.: <font size="+5">...</font>, czy: <font size="-2">...</font>), a nawet liczby całkowite, czy ułakowe, bez znaku, takie jak: 6, bądź 4.7 - (w analogii tego znacznika, np.: <font size="6">...</font>), albo w jednostkach właściwości: font-size, w postaci jednostek bezwzględnych, jak: 15px, jak i względnych jak: 3em, lub może przyjmować inną wartość charakterystyczną dla tej właściwości, niebędące poprzednimi, ten parametr może być opisany też innymi formami zapisu niż: | size = , które są typowo chcarakterystyczne dla font-size, lub dla wszystkich właściwości, coś w rodzaju: unset, initial, czy inherit;
  • weight (font-weight w atrybucie style) - określa grubość czcionki, domyślna wartość: inherit - sugerowany,
  • variant (font-variant w atrybucie style) - dodatkowy wariant czcionki, normalny (normal) lub gdzie małe litery są wielkie, lecz ich wysokośc jest taka jak małe, domyślna wartość: inherit - sugerowany,
  • style (font-style) w atrybucie style) - określa styl normalny (normal) lub pochylony, domyślna wartość: inherit - sugerowany,
  • line (line-height w atrybucie: style) - wysokość czcionki, domyślna wartość: inherit - sugerowany,
  • color (color w atrybucie: style) - kolor czcionki, domyślna wartość: inherit - sugerowany,
  • spacing (letter-spacing w atrybucie style) - odległość pomiędzy literami w wyrazie, domyślna wartość: inherit - sugerowany,
  • background (background-color w atrybucie: style) - kolor tła, domyślna wartość: transparent - sugerowany,
  • border (border-color w atrybucie style) - kolor obramowania, domyślna wartość: transparent - sugerowany,
  • display (display w atrybucie style) - co znacznik <span>...</span> ma symulować, w szablonie {{Font}} symbolizujący znacznik <font>...</font>, jaki element, domyślna wartość: inline - sugerowany,
  • id - unikatowy identyfikator, znacznika - sugerowany,
  • styl - styl CSS znacznika - właściwości i ich wartości - opcjonalny,
  • klasa - reguły CSS, do klasy znacznika, czyli zbioru właściwości i ich wartości - opcjonalny,
  • atrybuty - atrybuty znacznika (inne niż: id, styl i class) - opcjonalny.

Powyższe parametry oprócz pierwszego są opcjonalne za wyjątkiem parametrów: id oraz face, size, weight, variant, style, line i color, które są sugerowane.

Wikikod, zbudowany za pomocą szablonu znaczników (kombajnu)

[edytuj]

Szablon {{Font}} ma kod w zależności od znacznika: {{Znacznik}}, przedstawiający się:

Szablon {{Font}}
<!--
-->{{Znacznik| tag = span
      | id = {{{id|}}}
      | styl = font-family:{{{face|inherit}}};
               font-size:{{#if:{{#invoke:Parametry|Or
                                          |{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]?%d+$}}
                                          |{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]?%d+%.%d*$}}
                                          |{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]?%d*%.%d+$}}
                                     }}
                                     |{{#switch:{{Maksimum| 1 = 1
                                                   | 2 = {{Minimum| 1 = 7
                                                             | 2 = {{#if:{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]}}
                                                                             |{{#expr:floor({{{size|inherit}}}+3)}}
                                                                             |{{#expr:floor({{{size|inherit}}})}}
                                                                }}
                                                      }}
                                               }}
                                               | 1 = {{#expr:2*({{Maksimum|1|{{Minimum|2|{{#if:{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]}}|{{#expr:({{{size|inherit}}}+3)}}|{{{size|inherit}}}}}}}}}-1)+8}}px
                                               | 2 = {{#expr:2*({{Maksimum|2|{{Minimum|3|{{#if:{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]}}|{{#expr:({{{size|inherit}}}+3)}}|{{{size|inherit}}}}}}}}}-2)+10}}px
                                               | 3 = {{#expr:2*({{Maksimum|3|{{Minimum|4|{{#if:{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]}}|{{#expr:({{{size|inherit}}}+3)}}|{{{size|inherit}}}}}}}}}-3)+12}}px
                                               | 4 = {{#expr:4*({{Maksimum|4|{{Minimum|5|{{#if:{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]}}|{{#expr:({{{size|inherit}}}+3)}}|{{{size|inherit}}}}}}}}}-4)+14}}px
                                               | 5 = {{#expr:6*({{Maksimum|5|{{Minimum|6|{{#if:{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]}}|{{#expr:({{{size|inherit}}}+3)}}|{{{size|inherit}}}}}}}}}-5)+18}}px
                                               | 6 = {{#expr:12*({{Maksimum|6|{{Minimum|7|{{#if:{{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%-%+]}}|{{#expr:({{{size|inherit}}}+3)}}|{{{size|inherit}}}}}}}}}-6)+24}}px
                                               | 7 = 36px
                                               |#default={{{size|inherit}}}
                                     }}
                                     |{{#if:{{#invoke:Parametry|Or
                                                    |1={{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%+%-]?%d+%.?%d*%s*%a+$}}
                                                    |2={{Dopasuj|ciąg={{{size|inherit}}}|wzór=^[%+%-]?%.%d+%s*(%a+)$}}
                                                    |3={{Dopasuj|ciąg={{{size|inherit}}}|wzór=^%d+%.?%d*%s*(%%)$}}
                                                    |4={{Dopasuj|ciąg={{{size|inherit}}}|wzór=^%.%d+%s*(%%)$}}
                                            }}
                                            |{{{size|inherit}}}
                                            |{{#switch:{{{size|inherit}}}|inherit|unset|imitial|xx-small|x-small|small|medium|large|x-large|xx-large={{{size|inherit}}}|#default={{{size|inherit}}}em}}
                                     }}
                       }};
               font-weight:{{{weight|inherit}}};
               font-variant:{{{variant|inherit}}};
               font-style:{{{style|inherit}}};
               line-height:{{{line|inherit}}};
               color:{{{color|inherit}}};
               letter-spacing:{{{spacing|inherit}}};
               background-color:{{{background|transparent}}};
               border:{{#switch:{{{border|transparent}}}|transparent|initial|unset|=0|1px}} solid {{{border|transparent}}};
               display:{{{display|inline}}};
               box-sizing:border-box;position:relative;
               {{{styl|}}}
      | klasa    = {{{klasa|}}}
      | atrybuty = {{{atrybuty|}}}
      |{{{1}}}<!--
 -->}}

Przykłady

[edytuj]

Najprostszym możliwym przypadkiem jest nieużycie żadnego parametry tego szablonu.

Przykład
Oto jest tekst przed tym szablonem: {{Font|face=Times New Roman|size=+3|color=blue|Oto jest tekst do analizy}}, a tutaj po.
Wynik
Oto jest tekst przed tym szablonem: Oto jest tekst do analizy, a tutaj po.

Tabelka z przykładami dla szablonu: {{Font}}, czyli przy znaczniku: <span style="font-family:coś;font-size:coś;line-height:coś;color:coś">...</span>

[edytuj]

Style są w oparciu o kaskadowe arkusze stylów, które są napisane w stylach przykładów: Szablon:Znacznik/przykłady.css. W poniższych przykładach należy pamiętać o napisaniu:

<templatestyles src="Szablon:Znacznik/przykłady.css" />

Zatem:

Wywołanie Efekt
Tekst przed.{{Font|Oto jest tekst do analizy|face=sans-serif|line=1.4em|size=1.0em|color=darkslategray;|styl=background-color:ivory;border:darkblue 1px solid;}}Tekst po. Tekst przed.Oto jest tekst do analizyTekst po.
Tekst przed.{{Font|Oto jest tekst do analizy|color=darkslategray;|styl=background-color:ivory;border:darkblue 1px solid;|klasa=czcionka}}Tekst po. Tekst przed.Oto jest tekst do analizyTekst po.
Tekst przed.{{Font|Oto jest tekst do analizy|color=darkslategray;|klasa=czcionka|id=przykład2}}Tekst po. Tekst przed.Oto jest tekst do analizyTekst po.
Tekst przed.{{Font|Oto jest tekst do analizy|color=darkslategray;|klasa=tło obramowanie|id=przykład1}}Tekst po. Tekst przed.Oto jest tekst do analizyTekst po.
Tekst przed.{{Font|Oto jest tekst do analizy|color=darkslategray;|klasa=czcionka kolor tło obramowanie}}Tekst po. Tekst przed.Oto jest tekst do analizyTekst po.
Tekst przed.{{Font|Oto jest tekst do analizy|color=darkslategray;|id=przykład}}Tekst po. Tekst przed.Oto jest tekst do analizyTekst po.

Widzimy w powyższej tabelce, że niezależnie jak napiszemy znacznik: <span style="font-family:coś;font-size:coś;line-height:coś;color:coś">...</span>, to wynik otrzymujemy taki sam, a to rozplanowanie stylów zrobiliśmy poprzez rozdzielenie stylów pomiędzy atrybutami: style, class lub id.

Błędy

[edytuj]

Błędy należy zgłaszać na stronie Wikibooks:Kwestie techniczne.

Szablon nadającej tekstowi, w tekście, pewne cechy, za pomocą stylów, w elemencie: <span style="font-family:coś;size:coś|color:coś">...</span>.

Parametry szablonu[Zarządzaj danymi szablonu]

ParametrOpisTypStatus
11

Tekst, któremu można nadać pewne cechy.

Ciąg znakówwymagany
faceface

font-family w atrybucie: style - rodzina czcionek.

Wartość domyślna
inherit
Ciąg znakówsugerowany
sizesize

font-size w atrybucie: style - rozmiar czcionki.

Wartość domyślna
inherit
Ciąg znakówsugerowany
weightweight

font-weight w atrybucie style - określa grubość czcionki.

Wartość domyślna
inherit
Ciąg znakówsugerowany
variantvariant

font-variant w atrybucie style - dodatkowy wariant czcionki, normalny (normal) lub gdzie małe litery są wielkie, lecz ich wysokośc jest taka jak małe.

Wartość domyślna
inherit
Ciąg znakówsugerowany
stylestyle

font-style w atrybucie style)- określa styl normalny (normal) lub pochylony.

Wartość domyślna
inherit
Ciąg znakówsugerowany
lineline

line-height w atrybucie: style - wysokość czcionki.

Wartość domyślna
inherit
Ciąg znakówsugerowany
colorcolor

color w atrybucie: style - kolor czcionki.

Wartość domyślna
inherit
Ciąg znakówsugerowany
idid

Unikatowy identyfikator.

Ciąg znakówsugerowany
stylstyl

Styl CSS, właściwości i ich wartości.

Ciąg znakówopcjonalny
klasaklasa

Reguły CSS, do klasy, kaskadowych arkuszy stylów.

Ciąg znakówopcjonalny
atrybutyatrybuty

Atrybuty, inne niż: id, style i class.

Ciąg znakówopcjonalny

Zobacz też

[edytuj]
  • {{Znacznik}} - szablon, o który ten szablon, jest zbudowany, w oparciu o element liniowy: <span>...</span>, o tekście umieszczanego, wewnątrz tego szablonu, pomiędzy tymi tagami.