Schriften formatieren - Der elegante Weg?!

[Khan]

Kollegas ich hab da mal ein Anliegen, was mich schon immer beschäftigt hat. Wie formatiert man am sinnvollsten Schriften? Stellt Euch vor, ihr habt mehrere Textabsätze mit 3 unterschiedlichen Farben, jeder Absatz sieht von der Form und Farbe gleich aus, bis auf den Inhalt.

Habe mal 3 mir bekannte Varianten erstellt und Screenshots gemacht. Ich finde alle 3 Varianten sehr unprofessionel aber bin mir auch nicht sicher, ob es noch bessere gibt.

Schönes WE!

---

---

[Auge]

Hallo

Habe mal 3 mir bekannte Varianten erstellt und Screenshots gemacht. Ich finde alle 3 Varianten sehr unprofessionel aber bin mir auch nicht sicher, ob es noch bessere gibt.

Wenn, dann so oder zumindest ähnlich. Frage: Was empfindest du daran als „unprofessionell“?

Tschö, Auge

[Khan (Lösung?)]

Wenn, dann so oder zumindest ähnlich. Frage: Was empfindest du daran als „unprofessionell“?

Tschö, Auge

Für jeden Text der eine kleine Änderung in Form und Farbe hat, jedesmal eine Klasse zu erstellen, viel Arbeit. Stell dir einen Block vor/eine Spalte. Da steht drin:

HAMBURG 09. APRIL 2016 OLD SCHOOL RNB & HIP HOP REEPERBAHN CLUB HAMBURG

Die Schriften sollen variieren in:

Weiss Braun Weiss Braun immer abwechselnd. Dabei sollen aber die Schriftgrößen komplett anders sein, damit der ganze Block links und rechts anbinden und einige Schriften hervorgehoben werden, z. B. REEPERBAHN CLUB HAMBURG in kleinerer Schrift, als 09. APRIL 2016. Muß also für jede Zeile eine Klasse erstellt werden und dann im DIV Container per <span class=" formatiert werden.

[Jörg Reinholz]

Moin!

Na Prima!

HAMBURG
09. APRIL 2016
OLD SCHOOL RNB & HIP HOP
REEPERBAHN CLUB HAMBURG

Da lohnt es sich tatsächlich nicht, Klassen zu vergeben. Du hättest den recht speziellen Fall aber auch gleich darlegen können.

Jörg Reinholz

P.S. Mach hinter die Zeilenenden einfach 3 Leerzeichen …

[Khan (Lösung?)]

Was ist der Unterschied bei meinem Beispiel ob Klassen oder mit diesen n-th child? Welche Leerzeichen? Oder veralberst du mich gerade

Moin!

Na Prima!

HAMBURG
09. APRIL 2016
OLD SCHOOL RNB & HIP HOP
REEPERBAHN CLUB HAMBURG

Da lohnt es sich tatsächlich nicht, Klassen zu vergeben. Du hättest den recht speziellen Fall aber auch gleich darlegen können.

Jörg Reinholz

P.S. Mach hinter die Zeilenenden einfach 3 Leerzeichen …

[Jörg Reinholz]

Moin!

Was ist der Unterschied bei meinem Beispiel ob Klassen oder mit diesen n-th child?

Der ist egal. Nimm Gunnars Lösung, denn Du da hast da ein Ereignis und Google freut sich, was (eventuell) Deinen Kunde freut.

Welche Leerzeichen? Oder veralberst du mich gerade

Guckst Du einmal Ausgabe und einmal Inputtext hier im Forum (antworten klicken und dann Input markieren)

Mit Leerzeichen vier Zeilen in der Ausgabe:

HAMBURG
09. APRIL 2016
OLD SCHOOL RNB & HIP HOP
REEPERBAHN CLUB HAMBURG

Ohne Leerzeichen erfolgt die Ausgabe in einer Zeile:

HAMBURG 09. APRIL 2016 OLD SCHOOL RNB & HIP HOP REEPERBAHN CLUB HAMBURG

Jörg Reinholz

[Gunnar Bittersmann]

@@Khan (Lösung?)

Was ist der Unterschied bei meinem Beispiel ob Klassen oder mit diesen n-th child?

Klassen musst du im HTML selbst vergeben. CSS-Pseudoklassen sind einfach da.

Es wäre unsinnig, Elementen abwechselnd Klassen "ungerade" und "gerade" bzw. "odd" und "even" im HTML zu verpassen, weil genau diese Information mit :nth-child(odd) und :nth-child(even) schon zur Verfügung steht.

Und zwar dynamisch: Wenn ein Element wegfällt, würde

<span class="ungerade"></span>
<span class="gerade"></span>
<span class="gerade"></span>
<span class="ungerade"></span>

ja nicht mehr stimmen und man müsste alles von Hand ändern. Will man nicht. Muss man nicht.

LLAP 🖖

PS.

Welche Leerzeichen? Oder veralberst du mich gerade

Moin!

Na Prima!

HAMBURG

Bitte kein TOFU!

[woodfighter]

Tach,

<div>
<span>Hamburg</span>
<span>09. April 2016</span>
<span>Old School RNB &amp; Hip hop</span>
<span>Reeperbahn club Hamburg</span>
</div>

div und span als Platzhalteer für vermutlich existierende besser passende Elemente.

Die Schriften sollen variieren in:

Weiss Braun Weiss Braun immer abwechselnd. Dabei sollen aber die Schriftgrößen komplett anders sein, damit der ganze Block links und rechts anbinden und einige Schriften hervorgehoben werden, z. B. REEPERBAHN CLUB HAMBURG in kleinerer Schrift, als 09. APRIL 2016. Muß also für jede Zeile eine Klasse erstellt werden und dann im DIV Container per <span class=" formatiert werden.

div span { display:block; text-transform: uppercase; background-color:black}
div span:nth-child(odd) {color: white;}
div span:nth-child(even) {color: brown;}
div span:nth-child(2) {font-size:2em;}

http://dabblet.com/gist/61ac7a2f718a947a79c7

mfg
Woodfighter

[Gunnar Bittersmann]

@@woodfighter

<div>
<span>Hamburg</span>
<span>09. April 2016</span>
<span>Old School RNB &amp; Hip hop</span>
<span>Reeperbahn club Hamburg</span>
</div>

div und span als Platzhalteer für vermutlich existierende besser passende Elemente.

Fürs Datum das time-Element: <time datetime="2016-04-09">09. April 2016</time>, ansonsten OK.

Sematisch ginge so:

<div vocab="http://schema.org/" typeof="Event">
  <span>Hamburg</span>
  <time property="startDate" datetime="2016-04-09">09. April 2016</time>
  <span property="name">Old School RNB &amp; Hip hop</span>
  <span property="location">Reeperbahn Club Hamburg</span>
</div>

Gestylt per Attributselektoren:

[typeof="Event"] > * { display:block; text-transform: uppercase; background-color:black}
[typeof="Event"] > :nth-child(odd) {color: white;}
[typeof="Event"] > :nth-child(even) {color: brown;}
[typeof="Event"] > [property="startDate"] {font-size:2em;}

Ergänzung: Wayne’s interessiert: Die Auszeichnung einer Veranstaltung mit RDFa/Schema.org habe ich anhand Hamlets im klingonischen Original erklärt: Video, Folien.

LLAP 🖖

[Jörg Reinholz]

Moin!

Sematisch ginge so:

…

Gestylt per Attributselektoren:

Derzeit unmöglich zu verbessern.

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Derzeit unmöglich zu verbessern.

Na, vielleicht doch.

HAMBURG 09. APRIL 2016 OLD SCHOOL RNB & HIP HOP REEPERBAHN CLUB HAMBURG

Warum „Hamburg“ doppelt? Wenn’s vorne schon steht, reicht hinten doch „Reeperbahn Club“.

Bei anderen Event-Locations wird der Ortsname von vornherein hinten nicht nochmal auftauchen.

Wie „Reeperbahn Club“ dann mit „Hamburg“ als Location zusammenzufassen wäre: ab 22:51 im Video und ab Folie 102.

<div vocab="http://schema.org/" typeof="Event">
  <span property="location" typeof="Place" resource="_:ReeperbahnClubHamburg">
    <span property="address">Hamburg</span>
  </span>
  <time property="startDate" datetime="2016-04-09">09. April 2016</time>
  <span property="name">Old School RNB &amp; Hip hop</span>
  <span resource="_:ReeperbahnClubHamburg">
    <span property="name">Reeperbahn Club</span>
  </span>
</div>

Danke an Niklas Lindström, der mir das erklärt hatte.

LLAP 🖖

PS: Statt typeof="Place" darf’s auch etwas mehr (spezifisch) sein: typeof="EntertainmentBusiness".

Und statt typeof="Event" auch typeof="MusicEvent" (Live-Konzert) bzw. typeof="DanceEvent".

[Khan (Lösung?)]

Tach,

<div>
<span>Hamburg</span>
<span>09. April 2016</span>
<span>Old School RNB &amp; Hip hop</span>
<span>Reeperbahn club Hamburg</span>
</div>

div und span als Platzhalteer für vermutlich existierende besser passende Elemente.

Die Schriften sollen variieren in:

Weiss Braun Weiss Braun immer abwechselnd. Dabei sollen aber die Schriftgrößen komplett anders sein, damit der ganze Block links und rechts anbinden und einige Schriften hervorgehoben werden, z. B. REEPERBAHN CLUB HAMBURG in kleinerer Schrift, als 09. APRIL 2016. Muß also für jede Zeile eine Klasse erstellt werden und dann im DIV Container per <span class=" formatiert werden.

div span { display:block; text-transform: uppercase; background-color:black}
div span:nth-child(odd) {color: white;}
div span:nth-child(even) {color: brown;}
div span:nth-child(2) {font-size:2em;}

http://dabblet.com/gist/61ac7a2f718a947a79c7

mfg
Woodfighter

In Deinem Beispiel gibt man per CSS vor, das alle span in jeder DIV (in diesem Fall alle da keine ID oder Klasse für die DIV gesetzt) jeweilige Eigenschaften erhalten ja?

Was genau bedeutet nth-child und odd/even/2. Ich habe verstanden das jede span Zeile eine eigene Klasse haben muß, das sind wohl diese odd/even/2.

[Gunnar Bittersmann]

@@Khan (Lösung?)

Was genau bedeutet nth-child und odd/even/2.

Pseudoklasse :nth-child im Wiki

Ich habe verstanden das jede span Zeile eine eigene Klasse haben muß, das sind wohl diese odd/even/2.

odd: ungerade
even: gerade
2: das zweite

LLAP 🖖

[Gunnar Bittersmann]

@@Khan (Lösung?)

Dabei sollen aber die Schriftgrößen komplett anders sein, damit der ganze Block links und rechts anbinden

Du willst für jede Zeile die Schriftgröße so wählen, dass die Inhalte jeweils gleich breit sind (100% des umschließenden Blocks)? Dann brauchst du dafür JavaScript.

LLAP 🖖

[Jörg Reinholz]

Moin!

1. Der Ansatz mit den Klassen geht schon in die richtige Richtung.
2. Falsch ist es aber den Klassenname auf die Formatierung zu beziehen. Richtig ist es, den Klassenname auf den Inhalt zu beziehen.
3. Drei Absätze in drei Farben sind aus gestalterischer Perspektive schon mal Mist.

Ich nehme mal einen Artikel aus dem Bereich des Journalismus:

Einführende Literatur

Demnach besteht ein Artikel aus:

• Überschrift
• Wichtigstes
• Quelle
• Einzelheiten

Das fasse ich jetzt mal wie folgt zusammen:

• Überschrift
• Kernmeldung + Quelle
• Einzelheiten.

Ok: Beispiel:

Sack Reis in Norkorea umgefallen

In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet "Chinas letzte Wahrheit". Die Verluste belaufen sich auf ca. 25 Kg, Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.

Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.

(Blubber, Blubber, Blubber)

Jetzt formatiert:

<h1>Sack Reis in Norkorea umgefallen</h1>
<p class="kern">
In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet "Chinas letzte Wahrheit".  Die Verluste belaufen sich auf ca. 25 Kg, Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.
</p>

<p class="einzelheiten">
Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.
</p>

<p class="einzelheiten">
(Blubber, Blahfasel, Blubber)
</p>

Das geht noch ganz anders:

<article>
<header>
<h1>Sack Reis in Norkorea umgefallen</h1>
</header>
<div class="kern">
<p>In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet "Chinas letzte Wahrheit".  Die Verluste belaufen sich auf ca. 25 Kg, Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.
</p>
</div>

<div class="einzelheiten">
<p>
Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.
</p>

<p>
(Blubber, Blahfasel, Blubber)
</p>
</div>
</article>

Jetzt würde man

article h1 {;}
article .inhalt {;}
article .inhalt:first-child {}
article .einzelheiten {;}

formatieren. Z.B. um den ersten Absatz stets fett wieder zu geben.

Die Überschriften werden also NICHT als rote Klasse, der Kern nicht als blaue Klasse und die Einzelheiten nicht als grüne Klasse markiert, sondern diese Eigenschaften der Überschrift, dem Kern, den Einzelheiten zugeordnet.

Wenn es dem Verlag gefällt werden die Einzelheiten auf Mobilgeräten (genauer: solchen mit kleinem Bildschirm) nicht mehr angezeigt, es sei denn der Leser tippt nochmal auf "wirklich alles lesen". Vor allem aber: Und wenn es dem Verlag gefällt, dann sind mit einer Änderung im CSS die Überschriften ab 04:45 grün, die Kernmeldung dunkelgrau und die Einzelheiten rot.

Bei Deiner Methode hättest Du jetzt eine Klasse "rot" mit grünem Text - was nicht auf einen "eleganten Weg" hinweist.

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Das geht noch ganz anders:

Ja, die Klasse "einzelheiten" ist überflüssig:

<h1>Sack Reis in Norkorea umgefallen</h1>
<p class="vorspann">
In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet „Chinas letzte Wahrheit“. Die Verluste belaufen sich auf ca.&nbsp;25&nbsp;kg. Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.
</p>

<p>
Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. Nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.
</p>

<p>
(Blubber, Blahfasel, Blubber)
</p>

Andere Änderungen:

• Anführungszeichen „“
• geschützte Leerzeichen zwischen „ca.“ und Zahl sowie zwischen Zahl und Einheit

Es ginge auch ohne Klasse "vorspann":

<h1>Sack Reis in Norkorea umgefallen</h1>
<p>
<b>In Nordkorea, genauer in der Provinz Kan Ku, ist an gestrigen Mittwoch ein Sack Reis umgefallen, meldet „Chinas letzte Wahrheit“. Die Verluste belaufen sich auf ca.&nbsp;25&nbsp;kg. Menschen kamen, abgesehen von dem wegen Verletzung seiner Dienstpflichten erschossenen Verantwortlichen, nicht zu Schaden.</b>
</p>

<p>
Reis ist das Haupternährungsmittel der Bevölkerung Nordkoreas. Aus der Meldung, dass ein Sack Reis umfallen konnte, wird geschlossen, dass es noch welchen gibt. Nach deutschem Lebensmittelrecht gelten Reiskörner, die aus dem Sack gefallen sind, nicht mehr als verzehrbar, was in Nordkorea anders sein kann.
</p>

<p>
(Blubber, Blahfasel, Blubber)
</p>

LLAP 🖖