verschiedene Schriftgrößen und -farben ohne <font> ?

[Michail]

Guten Morgen,

font scheint ja in letzter Zeit als "böse" zu gelten.
Wie sollte man einen Text XHTML-konform gestalten, der eine ganze Reihe unterschiedlicher Text-Farben und Schriftgrößen enthält?

Vielen Dank
Michail

P.S.: ist b i und u (natürlich in Form von HTML-Tags) auch "böse" ? Vielleicht kennt jemand eine Seite, die übersichtlich darstellt, wie man heutzutage die gängigen "bösen" Schreibweisen von früher ersetzen sollte.

[Jimmy]

Wie sollte man einen Text XHTML-konform gestalten, der eine ganze Reihe unterschiedlicher Text-Farben und Schriftgrößen enthält?

Mit CSS

P.S.: ist b i und u (natürlich in Form von HTML-Tags) auch "böse" ? Vielleicht kennt jemand eine Seite, die übersichtlich darstellt, wie man heutzutage die gängigen "bösen" Schreibweisen von früher ersetzen sollte.

b, i und u erhachte ich selber nicht als problematisch, sofern sie sauber in einem p-tag vorkommen. b wird allerdings oft durch STRONG erhsetzt.

Jimmy

[Hopsel]

Hi Jimmy!

b, i und u erhachte ich selber nicht als problematisch, sofern sie sauber in einem p-tag vorkommen. b wird allerdings oft durch STRONG erhsetzt.

Ich benutze b, i und u, die sogenannten physischen Auszeichnungen, nicht. Damit beeinflusst man die Darstellung eines Elements bewusst.
Besser benutzt man strong, em und andere logische Elemente. So hat man eine logische und semantisch bessere Seitenstruktur. Das Aussehen kann man immer noch mit CSS verändern.

MfG H☼psel

[Timo "God's Boss" Reitz]

b, i und u erhachte ich selber nicht als problematisch, sofern sie sauber in einem p-tag vorkommen.

Und wo ist der Unterschied zu font? Alle drei sind lediglich Layout-Elemente und inhaltlich bedeutungslos.

b wird allerdings oft durch STRONG erhsetzt.

Und i durch em, was daran liegen dürfte, dass bei einigen grafischen Browsern das Standard-Stylesheet (wie auch im Beispiel-Stylesheet von CSS 2) i und em sowie b und strong ziemlich gleich aussehen.

[Color]

Guten Morgen,

font scheint ja in letzter Zeit als "böse" zu gelten.
Wie sollte man einen Text XHTML-konform gestalten, der eine ganze Reihe unterschiedlicher Text-Farben und Schriftgrößen enthält?

Vielen Dank
Michail

P.S.: ist b i und u (natürlich in Form von HTML-Tags) auch "böse" ? Vielleicht kennt jemand eine Seite, die übersichtlich darstellt, wie man heutzutage die gängigen "bösen" Schreibweisen von früher ersetzen sollte.

Hier einpaar beispiele
[link http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family]beispiei[/link]

[Michail]

Guten Morgen,

font scheint ja in letzter Zeit als "böse" zu gelten.
Wie sollte man einen Text XHTML-konform gestalten, der eine ganze Reihe unterschiedlicher Text-Farben und Schriftgrößen enthält?

Vielen Dank
Michail

P.S.: ist b i und u (natürlich in Form von HTML-Tags) auch "böse" ? Vielleicht kennt jemand eine Seite, die übersichtlich darstellt, wie man heutzutage die gängigen "bösen" Schreibweisen von früher ersetzen sollte.

Hier einpaar beispiele
[link http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family]beispiei[/link]

Versteh ich nicht. War der Zweck von XHTML nicht unter anderem der, den Quellcode mit mehr Inhalt und weniger Formatierungen zu gestalten? Über span hab ich aber schlussendlich noch mehr inhaltsleeren Text als mit font ?!

[Jonathan]

Versteh ich nicht. War der Zweck von XHTML nicht unter anderem der, den Quellcode mit mehr Inhalt und weniger Formatierungen zu gestalten? Über span hab ich aber schlussendlich noch mehr inhaltsleeren Text als mit font ?!

Das mit dem <span> ist natürlich nur ein allgemeines Beispiel. Im realen Anwendungsfall würde man die Style-Angaben in einen <style>-bereich oder besser ein separates Stylesheet packen und u.U. statt <span> je nach Anwendungsfall etwas anderes nehmen, z.B. <strong>, <em>, <a>, etc...

Das Selfhtml-Beispiel hat ja nicht wirklich Inhalt, den man durch Semantischen Code ausdrücken könnte. Deshalb wurde dort allgemein <span> verwendet.

[stareagle]

Moin,

font scheint ja in letzter Zeit als "böse" zu gelten.
Wie sollte man einen Text XHTML-konform gestalten, der eine ganze Reihe unterschiedlicher Text-Farben und Schriftgrößen enthält?

Per CSS und geeigneter HTML-Elemente.

P.S.: ist b i und u (natürlich in Form von HTML-Tags) auch "böse" ?

In der Strict-Variante von XHTML sind <i> und <u> nicht mehr vorhanden. <b> ist noch drin.

Meiner persönlichen Meinung nach sollte man eine logische Textauszeichnung (Überschrift, betont etc.) der physischen jedoch vorziehen.

Gruß

Stareagle

[Michail]

font scheint ja in letzter Zeit als "böse" zu gelten.
Wie sollte man einen Text XHTML-konform gestalten, der eine ganze Reihe unterschiedlicher Text-Farben und Schriftgrößen enthält?

Per CSS und geeigneter HTML-Elemente.

und wie sieht das konkret aus? Angenommen ich habe eine A4-Seite Text, in der Schlagwörter in drei verschiedenen Farben vorkommen. Sagen wir pro Farbe 10 Stück. Wie gestaltet man das sinnvoll, ohne absoluten Wust zu bekommen?

Vielen Dank
Michail

[Der Martin]

Hallo Michail,

Angenommen ich habe eine A4-Seite Text, in der Schlagwörter in drei verschiedenen Farben vorkommen. Sagen wir pro Farbe 10 Stück. Wie gestaltet man das sinnvoll, ohne absoluten Wust zu bekommen?

zum Beispiel so:

--8<--HTML----
 ... text text text <span class="stichwort">Stichwort</span> text text ...

--8<--CSS----
span.stichwort
 { color: #FF6060;
 }

Vorteil: Im HTML-Code hast du nur noch Informationen, die die Bedeutung des hervorgehobenen Teils angeben ("Stichwort"), nicht aber, wie es aussieht.
Im CSS hast du dagegen an genau *einer Stelle* die Information, wie das Merkmal "Stichwort" aussehen soll. Dadurch werden auch Änderungen z.B. der Hervorhebungsfarbe sehr leicht, weil du nur an einer Stelle ändern musst.

Ich kenne die Struktur deines Dokuments nicht, aber möglicherweise kann man sogar auf die Klassen verzichten - dann nämlich, wenn die Elemente, die Stichwort sein sollen, in einer eindeutigen Verschachtelung vorkommen. Hast du beispielsweise eine Struktur wie diese:

--8<--HTML----
 <p id="kurztext">
 ... text text text <span>Stichwort</span> text text ...
 </p>

dann ist die Klasse überflüssig, weil es genügt, "span-Elemente, die in einem Absatz mit der ID 'kurztext' stehen", zu selektieren, in CSS also

p#kurztext span { }

Am Anfang mag der Umgang mit CSS etwas komliziert und umständlich wirken, man kommt aber schnell dahinter. Wenn du den Sinn mal verstanden hast, wirst du dich fragen, wie du jahrelang ohne CSS auskommen konntest. ;-)

So long,
 Martin

[Jeena Paradies]

Hallo,

... text text text <span class="stichwort">Stichwort</span> text text ...

span ist da unglaublich schlecht an dieser Stelle, wo ist da jetzt der Unterschied zu: ... text text text <font class="stichwort">Stichwort</font> text text ...?

die die Bedeutung des hervorgehobenen Teils angeben

du schreibst es doch schon selbst "hervorgehobenen", und mit was hebt man in HTML etwas hervor? Richtig, <strong> und <em>.

Grüße
Jeena Paradies

[Timo "God's Boss" Reitz]

... text text text <span class="stichwort">Stichwort</span> text text ...
span ist da unglaublich schlecht an dieser Stelle, wo ist da jetzt der Unterschied zu: ... text text text <font class="stichwort">Stichwort</font> text text ...?

Ganz einfach: <font> dient explizit der Schriftformatierung (daher ja auch der Name), <span> hingegen ist ein generisches strukturierendes Element, das immer dann genommen werden sollte, wenn kein anderes Element passt, sofern natürlich ein Inline-Kontext vorliegt.

die die Bedeutung des hervorgehobenen Teils angeben
du schreibst es doch schon selbst "hervorgehobenen", und mit was hebt man in HTML etwas hervor? Richtig, <strong> und <em>.

Ich denke, es handelt sich hier um ein "grafisch" gemeintes "hervorgehoben". Man könnte auch Zitate mittels roter Schrift "hervorheben", das rechtfertigt noch lange nicht das Ersetzen der Zitat-Elemente mit <strong> und/oder <em>.
Ob die Stichworte nun wirklich betont sein sollen, wäre fraglich und käme auf den Text an.

[Jeena Paradies]

Hallo,

und wie sieht das konkret aus? Angenommen ich habe eine A4-Seite Text,

Bist du dir sicher dass du nicht zur Gestaltung einer A4-Papier-Textseite nicht lieber Word oder so nutzen möchtest?

in der Schlagwörter in drei verschiedenen Farben vorkommen.

Ein Schlagwort willst du ja sicherlich betonen, für Betonungen sind <strong> und <em> gedacht, siehe auch andere: HTML-Elemente für logische Auszeichnung im Text.

Sagen wir pro Farbe 10 Stück. Wie gestaltet man das sinnvoll, ohne absoluten Wust zu bekommen?

Wenn die Farben verschiedene Klassen an Schlagworten darstellen bietet sich das Attribut "class" an. Die Schlagwörter möchtest du ja besonders betonen, und nutzt dazu zum Beispiel <strong>, hier ein Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
 <title>Test verschiedener Betonungen</title>  
 <link rel="stylesheet" href="/css/print.css"  type="text/css" media="print" />  
 <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />  
</head>  
<body>  
 <p>Lorem ipsum dolor sit amet, consectetuer <strong class="wasser">adipiscing</strong>  
    elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna  
    <strong class="erde">aliquam</strong> erat volutpat. Ut wisi enim ad minim  
    <strong class="wasser">veniam</strong>, quis nostrud exerci tation ullamcorper  
    <strong class="feuer">suscipit</strong> lobortis nisl ut aliquip ex ea commodo  
    consequat.</p>  
 <p>Duis autem vel eum iriure dolor in <strong class="wasser">hendrerit</strong> in  
    vulputate velit esse molestie consequat, vel <strong class="feuer">suscipitillum</strong>  
    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim  
    qui blandit praesent luptatum zzril <strong class="erde">delenit</erde> augue duis  
    dolore te feugait nulla facilisi.</p>  
 <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id  
    quod mazim <strong class="wasser">placerat</strong> facer possim  
    <strong class="feuer">suscipitassum</strong>. Typi non habent claritatem insitam; est  
    usus legentis in iis qui facit eorum claritatem. Investigationes  
    <strong class="feuer">suscipitdemonstraverunt</strong> lectores legere me lius quod  
    ii legunt saepius.</p>  
 <p>Claritas est etiam processus dynamicus, qui sequitur mutationem <strong class="wasser">consuetudium</strong>  
    lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram,  
    anteposuerit <strong class="erde">litterarum</strong> formas humanitatis per seacula  
    quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari,  
    fiant sollemnes in futurum.</p>  
</body>  
</html>

Hier die screen.css Datei:

body {  
 color: black;  
 background: white;  
}  
.feuer {  
 color: red;  
}  
.wasser {  
 color: blue;  
}  
.erde {  
 color: brown;  
}

und hier die print.css Datei:

body {  
 color: black;  
 background: white;  
}  
.feuer {  
 font-weight: normal;  
 font-variant: small-caps;  
}  
.wasser {  
 font-weight: normal;  
 font-style: italic;  
}  
.erde {  
 font-weight: normal;  
 font-weight: bold;  
}

Wenn du deinen Code nun für alle 1000 Seiten deiner Web-Präsentation so aufbaust musst du nur einmalig Zentral das Aussehen definieren (in den ausgelagerten CSS-Dateien) und kannst es für alle Seiten zentral verwalten. Wie du siehst kann man damit auch wunderbar für den Drucker anders stylen, der meist nur schwarz-weiß druckt und sonst die Informationen die normalerweise über die Farbe rübergebracht worden wären verlieren würde.

Übrigens könnte man sich auch überlegen die "andere Formatierung" auch für den Screen zu machen, um Farbenblinden Menschen diese Unterschiedlichen Klassen auch zugänglich zu machen. Das schöne dabei ist, dass man das auch wunderbar schnell im nachhinein erledigen kann, da man im Inhaltsbereich das aussehen nicht reingeschrieben hat, sondern nur beschrieben hat welche Art von Text es ist.

Grüße
Jeena Paradies

[Michail]

Top-Antwort

Vielen Dank

[Johannes Zeller]

Hallo stareagle,

In der Strict-Variante von XHTML sind <i> und <u> nicht mehr vorhanden.

Das stimmt so nicht, das gilt nur für das U-Element.

Schöne Grüße,

Johannes