Vorlage:InlineBlock/Doku

Aus MosaPedia

Diese Seite ist die Dokumentations-Unterseite der Vorlage:InlineBlock.

Die Vorlage InlineBlock stellt eine Formatierungshilfe für Textblöcke in fließenden Layouts bereit.

Inhaltsverzeichnis 1 Anwendung 2 Benutzung 2.1 Kopiervorlage 2.2 Parameter 3 Beispiele 3.1 Hervorgehobene Bereiche im Fließtext 3.2 Fließendes Layout 4 Technische Details 4.1 Interna 4.2 Kompatibilität 4.3 Quelltext der Vorlage

Anwendung

Die Verwendung der Vorlage bietet sich unter anderem für zweierlei Anwendungen an:

• für komplexere Varianten der Hervorhebung von Text, sowie
• zur Realisierung von Layouts basierend auf kompakten Blöcken, deren Anordnung sich in Abhängigkeit von der Breite des zur Verfügung stehenden Raumes ändert.

Die Wirkung der Vorlage ist die folgende:

• Der Text innerhalb des Blockes wird so formatiert, als ob der Block die gesamte Seite bilden würde: Der Text wird entsprechend der Breite umgebrochen, Bilder werden ggf. am linken oder rechten Rand innerhalb des Blockes angeordnet, usw. (Unter anderem sehen Tabellenzellen "von innen" ebenso aus.)
• Der Block als Ganzes wird "inline" im umgebenden Text, d.h. wie ein einzelnes Zeichen innerhalb der laufenden Zeile im Fließtext angeordnet.

Benutzung

Kopiervorlage

Einfache Version:

{{InlineBlock
 | width = 
 | style = 
 | {Inhalt}
}}

Ausführlich, mit allen Parametern:

{{InlineBlock
 | width = 
 | style = 
 | vertical-align = 
 | text-align = 
 | background = 
 | padding = 
 | border = 
 | margin = 
 | {Inhalt}
}}

Parameter

• Die Breite des Blockes ist als width inklusive Einheit anzugeben (erlaubt sind neben Pixeln "px" auch fontspezifische Einheiten wie "em", sowie relative Angaben in "%" usw.)
• Als style können bei Bedarf zusätzliche CSS-Attribute (ohne die einschließenden "Anführungszeichen") angegeben werden.
• Zur Bequemlichkeit bzw. Übersichtlichkeit können Werte für die häufiger benötigten CSS-Attribute vertical-align, text-align, background, padding, margin und border auch im Wiki-Style übergeben werden:
  Anstelle von ...|style = border: 1px solid red; background: #fee|... kann auch ...|border=1px solid red|background=#fee|... geschrieben werden.
• Der Inhalt der Box wird als namenloser (letzter) Parameter übergeben.

Beispiele

Um die volle Wirkung des "variablen Layouts" zu demonstrieren, bitte die Größe des Browserfensters ändern!

Hervorgehobene Bereiche im Fließtext

Beispieltext

Wir haben heute viel zu erzählen. Dies hier ist eine {{InlineBlock|width=100px|border=1px solid red|text-align=center
|wichtige}} Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine {{InlineBlock
|border=1px solid green|background=#efe|text-align=center|padding=0.3em 0.3em 0 0.3em
|[[Datei:Hapfff.png|left]] [[Datei:Hapfff.png|right]] schöne}} Sache.
<noinclude>[[Kategorie:Vorlage:nur Dokumentation]]</noinclude>

Wir haben heute viel zu erzählen. Dies hier ist eine Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine Sache.

Demonstration

{| {{Prettytable}}
| colspan="3" | {{Beispieltext}}
|-
| style="width:22%" | {{Beispieltext}}
| style="width:33%" | {{Beispieltext}}
| style="width:44%" | {{Beispieltext}}
|}

Wir haben heute viel zu erzählen. Dies hier ist eine wichtige Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine schöne Sache.
Wir haben heute viel zu erzählen. Dies hier ist eine wichtige Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine schöne Sache.	Wir haben heute viel zu erzählen. Dies hier ist eine wichtige Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine schöne Sache.	Wir haben heute viel zu erzählen. Dies hier ist eine wichtige Mitteilung. Und dass Sie den ganzen Text bis zum bitteren Ende lesen, ist wirklich eine schöne Sache.

Fließendes Layout

Beispieltext

{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_385.jpg|border|right|x100px]] Mosaik [[385]]<br />Feuer, Würste und Skandale<br />Brabax  und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_386.jpg|border|right|x100px]] Mosaik [[386]]<br />Im finstern Walde<br />Johanna  und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_387.jpg|border|right|x100px]] Mosaik [[387]]<br />Eine haarige Angelegenheit<br />Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna  und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_388.jpg|border|right|x100px]] Mosaik [[388]]<br />Über den Dächern von Magdeburg<br />Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_389.jpg|border|right|x100px]] Mosaik [[389]]<br />Der Wassergeist<br />Die Abrafaxe, Johanna  und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das...}}
{{InlineBlock|width=180px|vertical-align=top|padding=0.5em| [[Datei:Tb_390.jpg|border|right|x100px]] Mosaik [[390]]<br />Johannas Vision<br />Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...}}
<noinclude>[[Kategorie:Vorlage:nur Dokumentation]]</noinclude>

Demonstration

{| {{Prettytable}}
| colspan="2" | {{Beispieltext}}
|-
| style="width:65%" | {{Beispieltext}}
| style="width:35%" | {{Beispieltext}}
|}

Mosaik 385 Feuer, Würste und Skandale Brabax und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ... Mosaik 386 Im finstern Walde Johanna und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ... Mosaik 387 Eine haarige Angelegenheit Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ... Mosaik 388 Über den Dächern von Magdeburg Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit... Mosaik 389 Der Wassergeist Die Abrafaxe, Johanna und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das... Mosaik 390 Johannas Vision Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...

Mosaik 385 Feuer, Würste und Skandale Brabax und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ... Mosaik 386 Im finstern Walde Johanna und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ... Mosaik 387 Eine haarige Angelegenheit Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ... Mosaik 388 Über den Dächern von Magdeburg Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit... Mosaik 389 Der Wassergeist Die Abrafaxe, Johanna und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das... Mosaik 390 Johannas Vision Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...

Mosaik 385 Feuer, Würste und Skandale Brabax und Johanna erreichen Halberstadt. Die Straßen zur Stadt sind verstopft, nicht zuletzt weil ein langsamer Bänkelsänger mit seinem Eselskarren einen ... Mosaik 386 Im finstern Walde Johanna und die Abrafaxe reisen durch den finstren Wald von Halberstadt nach Magdeburg. Aus begründeter Vorsicht haben sie sich von einem "Bauern" - der sich ... Mosaik 387 Eine haarige Angelegenheit Graf Arnulf von Wolfenstein und seine Leute haben Magdeburg erfolglos nach Johanna und Magister Claudius durchkämmt. Da erreicht den Grafen die Nachricht, ... Mosaik 388 Über den Dächern von Magdeburg Den Köhler vom Verdacht des Pferdediebstahls zu befreien, ist eine Aufgabe für den einfallsreichen Brabax. Während Fennrich von Rabenhorst durch die Anwesenheit... Mosaik 389 Der Wassergeist Die Abrafaxe, Johanna und der Bänkelsänger rasten nach ihrer Flucht aus Magdeburg im Wald. Im Scheine des wärmenden Lagerfeuers besprechen sie das... Mosaik 390 Johannas Vision Die Waldenfelder Bauern warten auf Brabax, doch am Morgen ist er immer noch nicht zurück. Abrax macht sich Sorgen und Michel glaubt nicht mehr an das Gelingen...

Technische Details

Interna

Die Vorlage ist eigentlich (fast) trivial, sie kapselt lediglich <div style="display: inline-block; ...">...</div> in eine Wiki-Vorlage. Die Bedeutung der Vorlage besteht vor allem darin, die realisierte Art der Formatierung auch mit HTML weniger vertrauten Autoren verfügbar zu machen.

Kompatibilität

Hinweis: Auf (sehr) alten Browsern wird die "inline-block"-Formatierung nicht unterstützt. Dort wird "inline-block" i.d.R. durch eine "block"-Darstellung ersetzt, d.h. ein InlineBlock-Element nimmt in diesem Fall die gesamte zur Verfügung stehende Breite ein.

Quelltext der Vorlage

<includeonly><div 
  style="display: inline-block; 
         {{#if: {{{style         |}}} | {{{style}}};                          }}
         {{#if: {{{width         |}}} | width:          {{{width}}};          }}
         {{#if: {{{vertical-align|}}} | vertical-align: {{{vertical-align}}}; }}
         {{#if: {{{text-align    |}}} | text-align:     {{{text-align}}};     }}
         {{#if: {{{background    |}}} | background:     {{{background}}};     }}
         {{#if: {{{padding       |}}} | padding:        {{{padding}}};        }}
         {{#if: {{{border        |}}} | border:         {{{border}}};         }}
         {{#if: {{{margin        |}}} | margin:         {{{margin}}};         }}
">{{{1}}}</div></includeonly><noinclude>{{Dokumentation}}</noinclude>