A Bejegyzések Stílus tesztje

Kellett egy hely ahol kipróbálhatom az oldalon található szöveganyag megjelenését és tipográfiáját.

Bevezető

A következő sorokban rendre átvesszük majd az összes stíluselemet amit ez az oldal támogat. Ez nem oktatóanyag, nem tanít meg a markdown használatára és nem is példaértékű, csupán egy kötetlen teszt, hogy megbizonyosodjunk afelől, minden rendben működik-e.

Bekezdések

Ezek talán a legtöbbet alkalmazott stíluselemek az oldalon. Ők alkotják a folyószöveget, szabad soros. Fontos hogy soraik olvashatóak legyenek, szellős sortávokkal, de ne legyenek túl széttartóak sem.

Ez itt egy bekezdés kezdete. Célszerű őket röviden tartani, pár sor – úgy négy vagy legfeljebb öt, éppen elég. A szövegekben használható a kvírtminusz, félkvírtminusz és egyéb különleges jelölők is: — – - … szó’ ‘szó’ “szó”. Ha nem fér ki egy szó, az szépen a következő sorba törik megfelelő szótagolással.

Az oldalon használt egyik betű típus, az Inter ⎋ alkotja a folyószöveget. Ez egy több szempontból is érdekes választás volt részemről, ugyan is egyedi kialakításának köszönhetően első sorban nem nyomtatásra, hanem pontosan erre a közegre készült, képes adaptálni a különböző méretek, súlyok, karakter és sortávok között, e-mellett támogatja az optikai méret váltásokat és számos stilisztikai karakter alternatívával is rendelkezik amik által így a legtöbb helyzetben rendkívül olvasható marad.

Horizontális Lénia

Ez itt pontosan az lesz aminek látszik, bár nem egy átlagos lénia, csupán egy dologra hivatott elválasztja a bekezdéseket egymástól.

Vizuális határolóként nem csak stílusos, de sok üres teret is ad a bekezdések szellős különválasztására.

Címsorok

Ezeket már láttuk korábban. Nos, néhányat igen, egytől egészen hatos szintig terjed, fokozatosan csökkenve méretben. A hatos a legkisebb A negyedik szinten alul nem igazán fogok menni szerintem, de alcímekhez jó lehet. Az ötödik és hatodik szint azon felül hogy kisebbek mint a folyószöveg, halványabb a színük is.

A folyószöveg a négyes címsor méretét használja a bekezdésekben. Az egyes és kettes szintet átugrom már kipróbáltam őket fentebb. Folytassuk tovább:

Címsor 3

Címsor 4

Címsor 5

Címsor 6

A címsorok betűtípusa a már említett Inter, Display változata, szabályosabb, geometrikusabb, kevesebb olvasást segítő praktikával, amik többnyire amúgy is csak kisebb méretnél fontosak.

Kiemelések

Ez a szövegrész dőlt lesz. Ez meg itt nem. Ez itt pedig újból dőlten fog megjelenni. Ez pedig nem. Ez a szöveg vastag betűvel van szedve. Ez itt meg nem. Ez pedig úgyszintén vastagabb lesz. A két szövegstílus még keverhető is. Ez itt dőlt a á e é y.

Listák

Ebből három nagy típust támogat az oldal. A rendezetlen listák előtt nincs számozás, a rendezett előtt van. Attól függően, hogy a markdown forrásban hagyok e ki sort a lista elemei között, lehet kompakt és szellős, mely utóbbinál minden lista elem új bekezdésbe kerül majd.

Rendezetlen lista

Kompakt

• Első elem
• Második elem
  • Második elem, első al-eleme
  • Második elem, második al-eleme
• Harmadik elem

Szellős

• Első elem

• Második elem

  • Második elem, első al-eleme

  • Második elem, második al-eleme

• Harmadik elem

Rendezett lista

A számozást igyekeztem rendkívül logikusan tartani, az alrészeket tört szám jelöli. Az elrendezést tekintve a számok jobbra vannak igazítva. A túl hosszú sorok pedig behúzva, az előző sor elejéhez igazítva törnek ahogy kell.

Kompakt

1. Első elem elég hosszú szöveggel ellátva
2. Második elem elég hosszú szöveggel ellátva
   1. A második elem, első al-eleme elég hosszú szöveggel ellátva
   2. A második al-elem
   3. A harmadik al-elem
   4. A negyedik al-elem
   5. Az ötödik al-elem
   6. A hatodik al-elem
   7. A hetedik al-elem
   8. A nyolcadik al-elem
   9. A kilencedik al-elem
   10. A második elem, tizedik al-eleme elég hosszú szöveggel ellátva
3. Harmadik elem
4. Negyedik elem
5. Ötödik elem
6. Hatodik elem
7. Hetedik elem
8. Nyolcadik elem
9. Kilencedik elem
10. Tizedik elem elég hosszú szöveggel ellátva

Szellős

1. Első elem elég hosszú szöveggel ellátva

2. Második elem elég hosszú szöveggel ellátva

   1. A második elem, első al-eleme elég hosszú szöveggel ellátva

   2. A második al-elem

   3. A harmadik al-elem

3. Harmadik elem

Kifejezés lista

A harmadik típus, a kifejezés lista használható például szótárazásra, olyan esetekre amikor el kell magyarázni egy szó jelentését.

Egy kifejezés

Rövid leírás arról mit jelent a fentebb kiemelt kifejezés.

Egy másik kifejezés

Újabb rövid leírás arról mit jelent a következő kiemelt kifejezés.

Linkek

Ez itt egy külső link. ⎋ A külső- és belső linkeket az különbözteti meg hogy az utóbbi kapott egy jelölőt, hogy megkülönböztethetőek legyenek. Ez itt egy belső link, ami a kezdőoldalra visz.

Beágyazott kód

A másik betű típus amit az oldalon használtam a JetBrains Mono ⎋ mely egyéb hasznos képességei mellett, megannyi programkód-olvasást segítő ligatúrát is tartalmaz meg persze azonos szélességű is ami a gépi tartalomnál jól jön: fmt.Println("beágyazott kód");. Kiemelés teszt azonos szélességű, sima, vastag, dőlt és kevert.

Az Interhez hasonlóan, a JetBrains Mono is egy geometrikus betű, a programozói ligatúrák mellett számtalan stilisztikai alternatívát és valódi dőlteket is tartalmaz. Ez itt dőlt és azonos szélességű a á e é y.

Média

A média elemek mint a képek és videók responzívan, sarokkerekített konténerekben jelennek meg. Opcionális magyarázó leírással ami valódi kurzív dölt betűvel van szedve.

Kép

Isometrikus 3D tér kompozíció. 10-es szoba: A sötét oldal.

A média elemek közül a képek linkként is funkcionálnak, külső oldalon megjelenített teljes képernyős változataikra mutatva.

Isometrikus 3D tér kompozíció első részlet a 10-es szobából.

Isometrikus 3D tér kompozíció második részlet a 10-es szobából.

Isometrikus 3D tér kompozíció harmadik részlet a 10-es szobából.

Idézet blokk

Ez a bekezdés egy idézet blokkban olvasható, a szöveget kissé bentebb kezdi, halványabb, enyhén dőlten szedett betűvel. Ez itt dőlt a á e é y. Ez is dőlt a e é y. A többi kiemelés is működik. Kiemelés teszt egyszerű szöveg, vastag, dőlt, kevert, azonos szélességű, vastag, dőlt és kevert.

Tartalmazhat címsort is

Ez egy másik bekezdés az idézet blokkon belül, ez a forma használható például gondolatok és megjegyzések számára vagy abban az esetben, ha azt szeretném kommunikálni, a belül elhelyezett szövegrész elolvasása nem kötelező, csupán hasznos lehet tudni róla.

Ráadásul többszintes is, ha még egy – vagy több, logikai mélységre lenne szükség.

Kód blokk

Amíg a szövegbe ágyazott azonos szélességű betűvel szedett kódrészleteknél lényeges a szövegegység, egy hosszabb terjedelmű gépi tartalom esetén már indokoltabb valami egzotikusabbal élni.

package main

import "fmt"

func main() {
  // Comment
  fmt.Println("Hello, World!")
}

Ez az ún. kód blokk, több mint 200 nyelvet támogat, fontos szempont volt a gépi nyelvek minél szélesebb palettájának lefedése. Továbbá a felhasznált azonos szélességű betű tulajdonságaival is erőteljesen játszok a szintaktikai kiemelésekhez.

Néhány gyakori nyelvi példa:

<!DOCTYPE html>
<html lang="hu">
  <head>
    <meta charset="utf-8" />
  </head>

  <!-- Comment -->
  <body class="d-grid">
    <p>Paragraph &nbsp;.</p>
  </body>
</html>

console.log("Hello World!");

var a = 12;
let b = true;
const c = /ab+c/;

function f(a, b) {
  return a + b;
}

f(a, 24);

// Comment
const f = (a, b) => {
  console.log(`${a + b}`);
};

#include <stdio>

// Comment
int main(int argv, argc[]) {
  printf("Hello World!\n");
}

# H1

## H2

### H3

#### H4

##### H5

###### H6

Paragraph.

**Bold**, _italic_, _**mixed italic**_ and **_mixed bold_** emphasis on text.

`Inline code`

[link](https://example.com)

Színek

A színek tekintetében nem elhanyagolandó a megközelíthetőség és univerzalitás, ezért a Harmony ⎋ szín-családot választottam. Ez nagyjából ~275 színt foglal magában, 11 tónus értéket 25 árnyalaton keresztül egyenként.

Ezt a szín-családot a legfrissebb szín-technológiai innovációk edzették, felvértezve a nagyszerű APCA ⎋ kontraszt algoritmussal, az OKLCH ⎋ színtérrel és a tipikusan Apple monitorok magas színlefedettségének (P3) támogatásával.