Einzelne Zeichen in einem Absatz unterschiedlich darstellen

[Heiko Warnken]

Hallo,

wer kann mir einen Tipp geben, wo ich Informationen zu CSS finden kann,
mit denen es möglich ist, einzelne Zeichen in einem Fließtext oder
Absatz unterschiedlich darzustellen?

Beispiel:
Im Text "StädteTour" sollen die beiden Großbuchstaben "S" und "T" in rot
dargestellt werden, während der übrige Text in Schwarz dargestellt wird.
Das Ganze soll dann aber auch so aussehen, als würde es sich um einen
normalen Fließtext innerhalb eines Absatzes handeln.

Dank Euch,
Heiko
--
http://spandaunet.de | master...@spandaunet.de

[Martin Honnen]

Heiko Warnken wrote:

> wer kann mir einen Tipp geben, wo ich Informationen zu CSS finden kann,
> mit denen es möglich ist, einzelne Zeichen in einem Fließtext oder
> Absatz unterschiedlich darzustellen?
>
> Beispiel:
> Im Text "StädteTour" sollen die beiden Großbuchstaben "S" und "T" in rot
> dargestellt werden, während der übrige Text in Schwarz dargestellt wird.
> Das Ganze soll dann aber auch so aussehen, als würde es sich um einen
> normalen Fließtext innerhalb eines Absatzes handeln.

<style>
.red { color: red; }
</style>

<p><span class="red">S</span>tädte<span class="red">T</span>our</p>

sollte doch reichen.

[Susanne Jäger]

Heiko Warnken schrieb am 11.04.2013 10:59:

> wer kann mir einen Tipp geben, wo ich Informationen zu CSS finden kann,
> mit denen es möglich ist, einzelne Zeichen in einem Fließtext oder
> Absatz unterschiedlich darzustellen?
>
> Beispiel:
> Im Text "StädteTour" sollen die beiden Großbuchstaben "S" und "T" in rot
> dargestellt werden, während der übrige Text in Schwarz dargestellt wird.
> Das Ganze soll dann aber auch so aussehen, als würde es sich um einen
> normalen Fließtext innerhalb eines Absatzes handeln.
>

na ja, du brauchst irgendwas im Markup um die Zielworte/-zeichen
anzusprechen und solltest dafür bevorzugt ein Element nutzen, das von
Hause aus inline formatiert wird. Neutral ohne semantischen Bedeutung
wäre das span.

1) <span class="markit">S</span>tädte<span class="markit">T</span>our

.markit {color: red;}

2) ich fände es auch ok, hier zu sparen und das semantisch kaum
belastete <b> zu miss/gebrauchen.

<b>S</b>tädte<b>T</b>our

da würde ich dann aber die Selektorwirkung auf einen Dokumentbereich
eingrenzen.

#inhalt b {color: red; font-weight: normal;}

Gruß
Susanne

[Heiko Warnken]

Am 11.04.2013 12:21, schrieb Martin Honnen:
> Heiko Warnken wrote:
>
>> wer kann mir einen Tipp geben, wo ich Informationen zu CSS finden kann,
>> mit denen es möglich ist, einzelne Zeichen in einem Fließtext oder
>> Absatz unterschiedlich darzustellen?
>>
>> Beispiel:
>> Im Text "StädteTour" sollen die beiden Großbuchstaben "S" und "T" in rot
>> dargestellt werden, während der übrige Text in Schwarz dargestellt wird.

> <style>
> .red { color: red; }
> </style>
>
> <p><span class="red">S</span>tädte<span class="red">T</span>our</p>
>
> sollte doch reichen.

Ja, Danke. Manchmal sieht man den Wald vor lauter Bäumen nicht mehr.

[Gert Be]

"Heiko Warnken" <domino...@arcor.de> schrieb

Hallo Heiko,
Der MS Sharepoint Designer macht das selbständig so.
Gert

[Susanne Jäger]

Ich würde aber ernsthaft über den Klassennamen nachdenken. Der nächste
Relaunch kommt bestimmt und spätestens der Eintrag
.red {color: green;}
sorgt dann irgendwann für Irritation. ;-)

Gruß
Susanne

[Martin Schilling]

Susanne Jï¿œger schrieb:

> Heiko Warnken schrieb am 11.04.2013 12:58:
>> Am 11.04.2013 12:21, schrieb Martin Honnen:
>>> Heiko Warnken wrote:
>

>>> <p><span class="red">S</span>tï¿œdte<span class="red">T</span>our</p>
>>>
>>> sollte doch reichen.
>>
>> Ja, Danke. Manchmal sieht man den Wald vor lauter Bï¿œumen nicht mehr.
>
> Ich wï¿œrde aber ernsthaft ï¿œber den Klassennamen nachdenken. Der nï¿œchste
> Relaunch kommt bestimmt und spï¿œtestens der Eintrag
> .red {color: green;}
> sorgt dann irgendwann fï¿œr Irritation. ;-)

Mift, du kennst meine Kirchenseite. Da ist .gelb ein Himmelblau, weil
ich keine Lust hatte, das auf allen Unterseiten zu ï¿œndern...

Martin.

[Thomas Braun]

Susanne J�ger wrote:

> Ich w�rde aber ernsthaft �ber den Klassennamen nachdenken. Der n�chste
> Relaunch kommt bestimmt und sp�testens der Eintrag
> .red {color: green;}
> sorgt dann irgendwann f�r Irritation. ;-)

Warum Irritation, das bildet doch perfekt die Realit�t ab.

Merke: Man kann auch mit 'nem blauen Stift "rot" schreiben :-)

[Andreas Borutta]

Susanne J�ger schrieb:

> Heiko Warnken schrieb am 11.04.2013 12:58:
>> Am 11.04.2013 12:21, schrieb Martin Honnen:
>>> Heiko Warnken wrote:
>

>>> <p><span class="red">S</span>t�dte<span class="red">T</span>our</p>
>>>
>>> sollte doch reichen.
>>
>> Ja, Danke. Manchmal sieht man den Wald vor lauter B�umen nicht mehr.

>
> Ich w�rde aber ernsthaft �ber den Klassennamen nachdenken. Der n�chste

> Relaunch kommt bestimmt und sp�testens der Eintrag
> .red {color: green;}
> sorgt dann irgendwann f�r Irritation. ;-)

ACK.

Ich gehe von einem glasklaren Motiv f�r die gestalterische
Sonderbehandlung der Gro�buchstaben aus.

Falls es stimmt, dass die Hervorhebung nur in besonderen W�rtern
gelten soll, k�me folgendes Markup in Frage:

<p>Lorem <span class="specific-word"><span class="part-of-word"><span
class="first-letter-of-part-of-word">S</span>t�dte</span><span
class="part-of-word"><span
class="first-letter-of-part-of-word">t</span>our</span></span>
ipsum.</p>

.specific-word .part-of-word .first-letter-of-part-of-word {
color: red;
text-transform: uppercase; /*UpperCamelCase f�r Wortteile*/
}

Richtig, das kleine "t" steht dort bewu�t.

Denn vielleicht will ja der Betreiber irgendwann das Gestaltungsmittel
"Binnenmajuskel" verwerfen.
Und dann will er auf keinen Fall den Inhalt anfassen, sondern nur 'ne
CSS-Regel.

Andreas