Példa cikk: minden tipográfiai elem egy helyen

Az alábbi szöveg kitalált, magyar nyelvű töltelék. Célja, hogy a cikkoldal minden tipográfiai elemét egyszerre lehessen ellenőrizni: félkövér, dőlt, félkövér és dőlt, aláhúzott, törölt és beszúrt szöveg, kiemelt rész, beágyazott kód, Ctrl + S billentyűkombináció, valamint program kimenete.

A belső hivatkozás és a külső hivatkozás egyaránt aláhúzott, hogy ne csak a színük különböztesse meg őket a szövegtől. Az W3C rövidítés magyarázata egérrel és billentyűzettel is elérhető, a H₂O alsó és az m² felső indexe nem töri meg a sormagasságot. A kisebb betűs megjegyzés és az idézőjelek közé tett rövid idézet a mondaton belül marad. Egy definiált fogalom és egy műcím is megkapja a maga jelölését.

Hosszú, szóközt nem tartalmazó szavak sem törhetik meg az elrendezést: megszentségteleníthetetlenségeskedéseitekért, valamint https://példa.hu/egy/nagyon/hosszú/elérési/út/amely/nem/fér/ki/egyetlen/sorba/mobilon.

Második szintű cím: a cikk fő fejezete

A hosszú cikkek fejezetekre bomlanak, a fejezetcímek pedig a tartalomjegyzék és a képernyőolvasók címsorlistájának gerincét adják. A bekezdések között egységes térköz van, a sorhossz pedig olvasható marad, mert a cikk keskeny oszlopban jelenik meg. A harmadik mondat azért készült, hogy a bekezdés néhány sorosra nyúljon, és látszódjon a sormagasság.

Harmadik szintű cím

Nem minden szöveg ér véget egy bekezdéssel. A rövid alfejezetek segítenek eligazodni, ha valaki csak átfutja az oldalt. Ez a bekezdés azt mutatja meg, hogyan néz ki egy cím után az első sor, és hogyan viszonyul a címhez a térköz.

Negyedik szintű cím

Ez a bekezdés a negyedik szintű cím alatt áll, és rövid, egymondatos.

Ötödik szintű cím

Ez a bekezdés az ötödik szintű cím alatt áll.

Hatodik szintű cím

Ez a bekezdés a hatodik szintű cím alatt áll.

Hosszabb folyószöveg

A hosszú cikkeknél derül ki, hogy a tipográfia valóban olvasható-e. Ez a rész kitalált magyar szöveg, amelynek egyetlen feladata, hogy kitöltse a helyet, és megmutassa, hogyan fut a sor, hogyan tördelődnek a bekezdések, és mennyire fárasztó vagy nyugodt az oldal képe néhány képernyőnyi szöveg után. A tartalomnak ehhez nincs jelentősége, a ritmusa viszont számít.

Az első bekezdés után jön a második, amely szándékosan nem mond semmit. Az alma nem esik messze a fájától, a gyors víz partot mos, a hallgatás pedig sokszor többet ér, mint a felesleges szó. Mindezt csak azért írjuk le, hogy legyen mit olvasni: a szöveg hossza, a mondatok váltakozó tempója és a vesszők sűrűsége együtt adja azt az érzetet, amelyet egy valódi cikk is keltene.

Harmadik bekezdés, rövidebb. Nem baj, ha a sorok hossza változik, a lényeg, hogy a bal oldali szegély egyenes marad, a jobb oldali pedig természetesen hullámzik. Az ékezetes betűk, mint az á, é, í, ó, ö, ő, ú, ü és ű, mind helyesen jelennek meg, és a sormagasságot sem nyújtják meg.

Negyedik bekezdés. Ha ennyi szöveg után is kényelmes az olvasás, akkor a betűméret, a sormagasság és az oszlopszélesség jól van eltalálva. Ha nem, akkor a tokeneken, nem pedig az egyes komponenseken kell változtatni, mert minden cikk ugyanabból a készletből építkezik. Ez a mondat azért hosszabb a többinél, hogy a bekezdés újra kitöltse a teljes szélességet, és látszódjon, hol törik a sor.

Ötödik bekezdés. A szöveg a mondatok közt váltogatja a hosszt: rövid. Hosszabb, több tagmondatból álló, vesszőkkel tagolt, kicsit kanyargós. Megint rövid. Egy ilyen váltakozás tapasztalatból élvezhetőbb, mint az egyforma hosszúságú mondatok egymás után.

Hatodik bekezdés. Nem történik benne semmi, és ez így van rendjén. A töltelékszöveg dolga az, hogy ne vonja el a figyelmet a formáról: ha valamelyik mondat izgalmas, az már hiba. Hetedik, nyolcadik és kilencedik mondat következik még ugyanebben a bekezdésben, hogy ez is legalább négy-öt sorra nyúljon, és a sortávolság jól látszódjon a szomszédos bekezdések között.

Hetedik bekezdés. A kitalált szöveg itt véget ér, a cikk többi része ismét az elemeket mutatja: képeket, kiemeléseket, táblázatot és kódot. Ha mindegyik egységes képet ad, akkor a cikkoldal elkészült, és a valódi tartalom bármikor betölthető helyette.

Listák

Felsorolás beágyazott elemekkel:

• Első elem
• Második elem, amely tovább bontható
  • Beágyazott elem
  • Még egy beágyazott elem
    • Harmadik szint
• Harmadik elem egy kicsit hosszabb szöveggel, hogy látszódjon, hogyan tördelődik a sor a lista behúzása alatt, és hogyan igazodik a következő sor az elem első betűjéhez.

Számozott lista:

1. Első lépés
2. Második lépés
   1. Alpont
   2. Újabb alpont
3. Harmadik lépés

Számozott lista, amely a 5. ponttól indul:

5. Ötödik pont
6. Hatodik pont

Feladatlista (Markdownból):

• Elkészült feladat
• Még nyitott feladat

Definíciós lista:

Első fogalom

Az első fogalom rövid magyarázata.

Második fogalom

A második fogalom magyarázata.

A második fogalomnak egy másik jelentése is van.

Idézetek

Az egyszerű idézet egy vagy több bekezdésből állhat. A bal oldali vonal és a nagyobb betűméret emeli ki a környező szövegből.

Idézet forrásmegjelöléssel, ahogy a klasszikus szerkesztő és a Markdown is előállítja.

Külső idézet, amelyben egy másik idézet is szerepel:

Beágyazott idézet, kisebb betűmérettel és halványabb vonallal.

Kód és előformázott szöveg

Kódblokk nyelvmegjelöléssel, amely keskeny képernyőn vízszintesen görgethető és billentyűzettel is elérhető:

// Egy rövid példa
function osszeg(a, b) {
  const eredmeny = a + b; // ez egy elég hosszú sor, amely keskeny képernyőn már nem fér ki, ezért görgetni kell
  return eredmeny;
}

console.log(osszeg(2, 3));

Egyszerű előformázott szöveg kód nélkül:

Első sor
    Behúzott sor
        Még jobban behúzott sor

---

Táblázat

Képek

Teljes szélességű kép felirattal:

Középre igazított kép:

Ez a bekezdés a balra igazított kép mellett folyik. Széles képernyőn a szöveg körbefolyja a képet, keskeny képernyőn a kép külön sorba kerül, és teljes szélességben jelenik meg. A szöveg addig tart, amíg a kép el nem fogy mellőle, ezért ennek a bekezdésnek elég hosszúnak kell lennie: a próbaszöveg ezért ismétli magát, ismétli magát, és még egyszer ismétli magát, hogy a körbefolyás jól látszódjon, és a következő sor már a kép alatt induljon.

Ez a bekezdés a jobbra igazított kép mellett folyik. A két igazítás tükörképe egymásnak, és a szöveghez ugyanakkora távolság tartozik. A kitalált mondatok itt is csak azért hosszúak, hogy a körbefolyás látszódjon: még egy mondat, aztán még egy, amíg a kép mellett elfogy a hely.

Képgaléria három oszlopban (mobilon kettőben):

Szövegbe ágyazott, kicsi kép: a sor közepén.

Egyéb elemek

Lenyitható rész (details és summary)

A lenyitható tartalom alapból zárt, billentyűzettel is nyitható, és nem igényel JavaScriptet.

Kitalált Kft.
1234 Példaváros, Minta utca 1.
pelda@example.com

Egy mondat lábjegyzettel^[1], és egy másikkal^[2]. Kemény sortörés két sor között:
ez már az új sor.

Lábjegyzetek

1. Az első lábjegyzet szövege. ↩
2. A második lábjegyzet szövege. ↩