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

Beitrag lesen

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

--
LoadRemoteHTML() - Daten einfach nachladen | Jlog | Gourmetica Mentiri