Re: [Htmlvalidator-help] Line numbers while using wrap long lines

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 422-6466

I like your idea a lot. Just that it is not as simple as this.
The source of the page is written in HTML in ""several"" pre tags.
Inside the pre-tags, there are a lot of span tags with colors.

You can get an idea by doing this:
- take a page in firefox
- look the source
- select all
- copy the source in the clipboard
Open Mozilla composer or NVU
- create a blank page
- paste the HTML in the HTML preview
- look the HTML source.

It gives something like this:

<html>
<head>
<meta content=3D"text/html; charset=3DISO-8859-1"
http-equiv=3D"content-type">
<title></title>
</head>
<body>
<pre id=3D"line1">&lt;html&gt;&lt;head&gt;&lt;<span=20
class=3D"start-tag">meta http-equiv=3D<span=20
class=3D"attribute-value">"content-type" content=3D<span=20
class=3D"attribute-value">"text/html; charset=3DUTF-8"&gt;&lt;<spa=
n
class=3D"start-tag">title&gt;Google&lt;/<span=20
class=3D"end-tag">title&gt;&lt;style&gt;&lt;!-- body,td,a,p,.h{font-family=
:arial,sans-serif;} .h{font-size:=20
20px;} .q{color:#0000cc;} --&gt; &lt;/style&gt; &lt;<span=20
class=3D"start-tag">script&gt; &lt;!-- function=20
sf(){document.f.q.focus();} function rwt(el,oi,cad,ct,cd,sg){var e =3D=
=20
window.encodeURIComponent ? encodeURIComponent : escape;var=20
oi_param=3D"";var cad_param=3D"";if (oi) oi_param=3D"&amp;oi=3D"+e(oi);if=
 (cad)=20
cad_param=3D"&amp;cad=3D"+e(cad);el.href=3D"/url?sa=3Dt"+oi_param+cad_par=
am+"&amp;ct=3D"+e(ct)+"&amp;cd=3D"+e(cd)+"&amp;url=3D"+e(el.href).replace=
(/\+/g,"%2B")+"&amp;ei=3D3v1tRMGUGbS8wgGo5YWbBg"+sg;el.onmousedown=3D"";r=
eturn=20
true;} // --&gt; &lt;/script&gt; &lt;/<span=20
class=3D"end-tag">head&gt;&lt;<span

The problem with your approach is that
- it does not take into account the pre and the span.
   And I do not see how to adapt this algorithm for it. Mostly when=20
there are several pre
   tags.
- also copy paste of the source copy the line number. What is not expecte=
d.

Whatever, the idea is bright.

Marc

[LoN]Kamikaze wrote:
> Marc Gueury wrote:
>  =20
>> Hi Change,
>>
>> It is designed like this. The 2 features :
>> - wrap long line
>> - line number are incompatible. If one is set the other is disabled.
>>
>> There is a good reason behind it. The source code is a HTML page.
>> The line numbers are placed in a css "frame" and the source code in hi=
s
>> own css "frame"
>>
>> There is no relation between the 2. Just that the number of lines is t=
he
>> same.
>> If the wrapping is set to true. I have no way to match the line number=
s
>> and lines in the source code.
>>
>> I tried other algorithms:
>> For ex, putting the lines number at the beginning of each line. But it
>> did not work well.
>> It was a lot too slow and was ugly with wrapping lines.
>>
>> So, in short, not possible to fix. And it is intended to work like thi=
s
>> until that a better algorithm is found.
>> Hope it helps,
>>
>> Marc
>>
>>    =20
>
> Here is my solution. I find the performance acceptable. The demo
> provides buttons to switch between nowrap and normal mode on the fly.
>  =20
>
> -----------------------------------------------------------------------=
-
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
> <head>
> <meta http-equiv=3D"content-type" content=3D"text/html; ">
> <title>SELFHTML: Stylesheets / CSS-Eigenschaften / Ausrichtung und=20
> Absatzkontrolle</title>
> <link rel=3D"stylesheet" type=3D"text/css" href=3D"../../src/selfhtml.c=
ss">
> <meta name=3D"description" content=3D"Welche CSS-Eigenschaften es gibt,=
 um=20
> Text auszurichten und Texteigenschaften wie Zeilenh=C3=B6he und Einr=C3=
=BCckung=20
> zu kontrollieren.">
> <meta name=3D"keywords" content=3D"SELFHTML, CSS, Stylesheets, Cascadin=
g=20
> Stylesheets, HTML, CSS-Eigenschaften, Texteinr=C3=BCckung, Ausrichtung,=
=20
> Horinzontalausrichtung, Vertikalausrichtung, Zeilenh=C3=B6he, Textumbru=
ch,=20
> Zeilenumbruch, text-indent, line-height, vertical-align, text-align,=20
> white-space">
> <meta name=3D"author" content=3D"Redaktion SELFHTML, selfhtml81@selfhtm=
l.org">
> <meta name=3D"DC.Publisher" content=3D"Stefan M=C3=BCnz">
> <meta name=3D"DC.Date" content=3D"2005-03-20T00:57:10+01:00">
> <meta name=3D"DC.Identifier"=20
> content=3D"http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm">
> <meta name=3D"DC.Language" content=3D"de">
> <meta name=3D"DC.Rights" content=3D"../../editorial/copyright.htm">
> <meta name=3D"DC.Date.created" content=3D"2001-10-27T08:00+01:00">
> <meta name=3D"SELF.Pagetype" content=3D"page">
> <link rel=3D"shortcut icon" href=3D"../../src/favicon.ico">
> <link rel=3D"author" title=3D"Impressum" href=3D"../../editorial/impres=
sum.htm">
> <link rel=3D"contents" title=3D"Inhaltsverzeichnis"=20
> href=3D"../../navigation/inhalt.htm">
> <link rel=3D"index" title=3D"Stichwortverzeichnis"=20
> href=3D"../../navigation/stichwort.htm">
> <link rel=3D"search" title=3D"Suche" href=3D"../../navigation/suche/ind=
ex.htm">
> <link rel=3D"help" title=3D"Hilfe" href=3D"../../editorial/index.htm">
> <link rel=3D"copyright" title=3D"Urheberrecht"=20
> href=3D"../../editorial/copyright.htm">
> <link rel=3D"top" title=3D"SELFHTML" href=3D"../../index.htm">
> <link rel=3D"up" title=3D"CSS-Eigenschaften" href=3D"index.htm">
> <link rel=3D"next" title=3D"Au=C3=9Fenrand und Abstand" href=3D"randabs=
tand.htm">
> <link rel=3D"prev" title=3D"Schriftformatierung mit Schriftartendatei"=20
> href=3D"schrift_datei.htm">
> <link rel=3D"first" title=3D"Schriftformatierung" href=3D"schrift.htm">
> <link rel=3D"last" title=3D"Filter (nur Microsoft)" href=3D"filter.htm"=
>
> </head>
> <body>
>
> <table cellpadding=3D"4" cellspacing=3D"0" border=3D"0" width=3D"100%">
> <tr>
> <td colspan=3D"2" class=3D"nav"><a class=3D"an" name=3D"top"><img=20
> src=3D"../../src/refkap.gif" width=3D"16" height=3D"13" alt=3D"Teil von=
"></a>=20
> <a href=3D"../../index.htm">SELFHTML</a>/<a=20
> href=3D"../../navigation/index.htm" target=3D"_parent"=20
> class=3D"navh">Navigationshilfen</a> <img src=3D"../../src/refkap.gif"=20
> width=3D"16" height=3D"13" alt=3D"Teil von"> <a=20
> href=3D"../index.htm">Stylesheets (CSS)</a> <img=20
> src=3D"../../src/refkap.gif" width=3D"16" height=3D"13" alt=3D"Teil von=
"> <a=20
> href=3D"index.htm">CSS-Eigenschaften</a></td>
> </tr>
> <tr>
> <td class=3D"doc" width=3D"110"><a href=3D"../../index.htm"><img=20
> src=3D"../../src/logo.gif" width=3D"106" height=3D"109" border=3D"0"=20
> alt=3D"SELFHTML"></a></td>
> <td class=3D"docbot" width=3D"100%"><h1 class=3D"ph1">Ausrichtung und=20
> Absatzkontrolle</h1></td>
> </tr>
> <tr>
> <td class=3D"doctop">
> <img src=3D"../../src/dokx.gif" width=3D"30" height=3D"20" vspace=3D"6"=
=20
> alt=3D"Informationsseite">
> </td>
> <td valign=3D"top" nowrap=3D"nowrap">
> <p>
> <img src=3D"../../src/down.gif" width=3D"14" height=3D"10" alt=3D"nach=20
> unten"> <a href=3D"#allgemeines">Allgemeines zu Ausrichtung und=20
> Absatzkontrolle</a><br>
> <img src=3D"../../src/down.gif" width=3D"14" height=3D"10" alt=3D"nach=20
> unten"> <a href=3D"#text_indent">text-indent</a> (Texteinr=C3=BCckung)<=
br>
> <img src=3D"../../src/down.gif" width=3D"14" height=3D"10" alt=3D"nach=20
> unten"> <a href=3D"#line_height">line-height</a> (Zeilenh=C3=B6he)<br>
> <img src=3D"../../src/down.gif" width=3D"14" height=3D"10" alt=3D"nach=20
> unten"> <a href=3D"#vertical_align">vertical-align</a> (Vertikale=20
> Ausrichtung)<br>
> <img src=3D"../../src/down.gif" width=3D"14" height=3D"10" alt=3D"nach=20
> unten"> <a href=3D"#text_align">text-align</a> (Horizontale Ausrichtung=
)<br>
> <img src=3D"../../src/down.gif" width=3D"14" height=3D"10" alt=3D"nach=20
> unten"> <a href=3D"#white_space">white-space</a> (Textumbruch)
> </p>
> </td>
> </tr><tr><td colspan=3D"2" class=3D"doc"> <a href=3D"#bottom"><img=20
> src=3D"../../src/down.gif" width=3D"14" height=3D"10" border=3D"0" alt=3D=
"nach=20
> unten"></a> </td></tr>
> </table>
>
>
>
> <h2><a class=3D"an" name=3D"allgemeines">Allgemeines zu Ausrichtung und=
=20
> Absatzkontrolle</a></h2>
>
> <p>F=C3=BCr Textbl=C3=B6cke oder Textabs=C3=A4tze gibt es absatztypisch=
e=20
> Eigenschaften. Abs=C3=A4tze k=C3=B6nnen beispielsweise links- oder rech=
tsb=C3=BCndig=20
> ausgerichtet sein. Bei Tabellenzellen oder anderen Elemente, die eine=20
> berechnete oder definierte H=C3=B6he haben k=C3=B6nnen und mehr Platz l=
assen als=20
> der Text darin einnimmt, wird h=C3=A4ufig vertikale Ausrichtung oben,=20
> mittig oder untenb=C3=BCndig erforderlich.</p>
>
> <p>Zu den typischen Eigenschaften der Absatzformatierung geh=C3=B6ren=20
> ferner die Merkmale Einzug und Zeilenh=C3=B6he. Und schlie=C3=9Flich au=
ch noch=20
> die Angabe, wie der Flie=C3=9Ftext innerhalb des Absatzes umgebrochen=20
> werden soll: ob gar nicht, automatisch, oder so, wie er im Editor=20
> eingegeben wurde.</p>
>
>
>
> <table cellpadding=3D"4" cellspacing=3D"0" border=3D"0" width=3D"100%">
> <tr>
> <td class=3D"doc"> <a href=3D"#top"><img src=3D"../../src/up.gif" width=
=3D"14"=20
> height=3D"10" border=3D"0" alt=3D"nach oben"></a><a href=3D"#bottom"><i=
mg=20
> src=3D"../../src/down.gif" width=3D"14" height=3D"10" border=3D"0" alt=3D=
"nach=20
> unten"></a> </td>
> </tr>
> </table>
>
>
>
> <h2><img src=3D"../../src/css10.gif" width=3D"30" height=3D"30" alt=3D"=
CSS=20
> 1.0"><img src=3D"../../src/netsc4.gif" width=3D"30" height=3D"30"=20
> alt=3D"Netscape 4.0"><img src=3D"../../src/msie3.gif" width=3D"30"=20
> height=3D"30" alt=3D"MS IE 3.0"><img src=3D"../../src/op512.gif" width=3D=
"30"=20
> height=3D"30" alt=3D"Opera 5.12"><img src=3D"../../src/ffox1.gif" width=
=3D"30"=20
> height=3D"30" alt=3D"Mozilla Firefox 1"><img src=3D"../../src/konq33.gi=
f"=20
> width=3D"30" height=3D"30" alt=3D"Konqueror 3.3"><img=20
> src=3D"../../src/saf12.gif" width=3D"30" height=3D"30" alt=3D"Safari 1.=
2"> <a=20
> class=3D"an" name=3D"text_indent">text-indent (Texteinr=C3=BCckung)</a>=
</h2>
>
> <p>Sie k=C3=B6nnen f=C3=BCr einen mehrzeiligen Flie=C3=9Ftext bestimmen=
, dass die=20
> erste Zeile einger=C3=BCckt wird. Dieses Gestaltungselement ist in B=C3=
=BCchern=20
> und Zeitschriften sehr verbreitet.</p>
>
> <h3 class=3D"xmp">Beispiel:</h3>
>
> <p><img src=3D"../../src/dokf.gif" width=3D"15" height=3D"10"=20
> alt=3D"Beispiel-Seite"> <a=20
> href=3D"anzeige/text_indent.htm">Anzeigebeispiel: So sieht's aus</a></p=
>
>
> <pre>
> <html><head><title>text-indent</title>
> </head><body>
>
> <p style=3D"text-indent:1em;">Dieser Textabsatz hat eine
> Texteinr&uuml;ckung von 1em. Texteinr&uuml;ckungen dieser Art sind an
> die &Auml;sthetik von B&uuml;chern oder Zeitungen angelehnt, wo
> h&auml;ufig mit dieser Formatierung gearbeitet wird. Damit das auch
> wirklich sichtbar wird, enth&auml;lt dieser Textabsatz
> schlie&szlig;lich noch diesen &uuml;berfl&uuml;ssigen Satz, der
> sich aber hoffentlich wenigstens fl&uuml;ssig liest.</p>
>
> <!--usw.-->
> </body></html>
> </pre>
>
> <h3 class=3D"xpl">Erl=C3=A4uterung:</h3>
>
> <p>Mit <code>text-indent:</code> k=C3=B6nnen Sie eine Einr=C3=BCckung f=
=C3=BCr die=20
> erste Zeile bestimmen. Erlaubt ist eine <img src=3D"../../src/dok.gif"=20
> width=3D"15" height=3D"10" alt=3D"Seite"> <a=20
> href=3D"../formate/wertzuweisung.htm#numerische">numerische Angabe</a>.=
</p>
>
> <h3 class=3D"inf">Beachten Sie:</h3>
>
> <p>Mit einem negativen Wert f=C3=BCr <code>text-indent</code> bewirken =
Sie=20
> eine Textausr=C3=BCckung in der ersten Flie=C3=9Ftextzeile.</p>
>
>
>
> <table cellpadding=3D"4" cellspacing=3D"0" border=3D"0" width=3D"100%">
> <tr>
> <td class=3D"doc"> <a href=3D"#top"><img src=3D"../../src/up.gif" width=
=3D"14"=20
> height=3D"10" border=3D"0" alt=3D"nach oben"></a><a href=3D"#bottom"><i=
mg=20
> src=3D"../../src/down.gif" width=3D"14" height=3D"10" border=3D"0" alt=3D=
"nach=20
> unten"></a> </td>
> </tr>
> </table>
>
>
>
> <h2><img src=3D"../../src/css10.gif" width=3D"30" height=3D"30" alt=3D"=
CSS=20
> 1.0"><img src=3D"../../src/netsc4.gif" width=3D"30" height=3D"30"=20
> alt=3D"Netscape 4.0"><img src=3D"../../src/msie3.gif" width=3D"30"=20
> height=3D"30" alt=3D"MS IE 3.0"><img src=3D"../../src/op512.gif" width=3D=
"30"=20
> height=3D"30" alt=3D"Opera 5.12"><img src=3D"../../src/ffox1.gif" width=
=3D"30"=20
> height=3D"30" alt=3D"Mozilla Firefox 1"><img src=3D"../../src/konq33.gi=
f"=20
> width=3D"30" height=3D"30" alt=3D"Konqueror 3.3"><img=20
> src=3D"../../src/saf12.gif" width=3D"30" height=3D"30" alt=3D"Safari 1.=
2"> <a=20
> class=3D"an" name=3D"line_height">line-height (Zeilenh=C3=B6he)</a></h2=
>
>
> <p>Sie k=C3=B6nnen f=C3=BCr Elemente mit viel Flie=C3=9Ftext die Zeilen=
h=C3=B6he=20
> bestimmen. Diese Angabe ist vor allem in Verbindung mit einer Angabe=20
> zur <img src=3D"../../src/dok.gif" width=3D"15" height=3D"10"=20
> alt=3D"Seite"> <a href=3D"schrift.htm#font_size">Schriftgr=C3=B6=C3=9Fe=
</a>=20
> interessant.</p>
>
> <h3 class=3D"xmp">Beispiel:</h3>
>
> <p><img src=3D"../../src/dokf.gif" width=3D"15" height=3D"10"=20
> alt=3D"Beispiel-Seite"> <a=20
> href=3D"anzeige/line_height.htm">Anzeigebeispiel: So sieht's aus</a></p=
>
>
> <pre>
> <html><head><title>line-height</title>
> </head><body>
>
> <p style=3D"line-height:1.4em; font-size:1em; margin-left:20%;=20
> margin-right:20%">
> Die Zeilenh&ouml;he ist ein altbekanntes DTP-Feature zur Formatierung v=
on
> Abs&auml;tzen. Um damit richtig umzugehen, sind jedoch Kenntnisse in de=
r
> typografischen Wirkung von Text hilfreich. ... </p>
>
> </body></html>
> </pre>
>
> <h3 class=3D"xpl">Erl=C3=A4uterung:</h3>
> <p>Mit <code>line-height:</code> k=C3=B6nnen Sie die Zeilenh=C3=B6he be=
stimmen.=20
> Erlaubt ist eine <img src=3D"../../src/dok.gif" width=3D"15" height=3D"=
10"=20
> alt=3D"Seite"> <a=20
> href=3D"../formate/wertzuweisung.htm#numerische">numerische Angabe</a>.=
=20
> Auch Prozentangaben sind erlaubt. Prozentwerte beziehen sich dabei auf=20
> die Schriftgr=C3=B6=C3=9Fe des Elements, f=C3=BCr das die Zeilenh=C3=B6=
he bestimmt wird.</p>
>
> <h3 class=3D"inf">Beachten Sie:</h3>
>
> <p>Bei erzwungener Zeilenh=C3=B6he ist es m=C3=B6glich, dass ein=20
> interpretierendes Programm dieser Angabe den Vorrang einr=C3=A4umt und=20
> Elemente abschneidet, die h=C3=B6her sind, beispielsweise eine im Flie=C3=
=9Ftext=20
> referenzierte Grafik.</p>
>
>
>
> <table cellpadding=3D"4" cellspacing=3D"0" border=3D"0" width=3D"100%">
> <tr>
> <td class=3D"doc"> <a href=3D"#top"><img src=3D"../../src/up.gif" width=
=3D"14"=20
> height=3D"10" border=3D"0" alt=3D"nach oben"></a><a href=3D"#bottom"><i=
mg=20
> src=3D"../../src/down.gif" width=3D"14" height=3D"10" border=3D"0" alt=3D=
"nach=20
> unten"></a> </td>
> </tr>
> </table>
>
>
>
> <h2><img src=3D"../../src/css10.gif" width=3D"30" height=3D"30" alt=3D"=
CSS=20
> 1.0"><img src=3D"../../src/netsc4.gif" width=3D"30" height=3D"30"=20
> alt=3D"Netscape 4.0"><img src=3D"../../src/msie3.gif" width=3D"30"=20
> height=3D"30" alt=3D"MS IE 3.0"><img src=3D"../../src/op512.gif" width=3D=
"30"=20
> height=3D"30" alt=3D"Opera 5.12"><img src=3D"../../src/ffox1.gif" width=
=3D"30"=20
> height=3D"30" alt=3D"Mozilla Firefox 1"><img src=3D"../../src/konq33.gi=
f"=20
> width=3D"30" height=3D"30" alt=3D"Konqueror 3.3"><img=20
> src=3D"../../src/saf12.gif" width=3D"30" height=3D"30" alt=3D"Safari 1.=
2"> <a=20
> class=3D"an" name=3D"vertical_align">vertical-align (vertikale=20
> Ausrichtung)</a></h2>
>
> <p>Sie k=C3=B6nnen nebeneinanderstehende Elemente mit unterschiedlicher=
=20
> H=C3=B6he, zum Beispiel Tabellenzellen in einer Tabellenzeile oder=20
> Textpassagen mit unterschiedlicher Schriftgr=C3=B6=C3=9Fe innerhalb ein=
er Zeile,=20
> im Verh=C3=A4ltnis zueinander ausrichten.</p>
>
> <h3 class=3D"xmp">Beispiel:</h3>
>
> <p><img src=3D"../../src/dokf.gif" width=3D"15" height=3D"10"=20
> alt=3D"Beispiel-Seite"> <a=20
> href=3D"anzeige/vertical_align.htm">Anzeigebeispiel: So sieht's aus</a>=
</p>
>
> <pre>
> <html><head><title>vertical-align</title>
> <style type=3D"text/css">
> .oben { vertical-align:top; background-color:#CCCCCC; }
> .mittig { vertical-align:middle; background-color:#DDDDDD; }
> .unten { vertical-align:bottom; background-color:#EEEEEE; }
> </style>
> </head><body>
>
> <table border=3D"1"><tr>
> <td height=3D"200" class=3D"oben"><b>Text oben</b></td>
> <td height=3D"200" class=3D"mittig"><b>Text mittig</b></td>
> <td height=3D"200" class=3D"unten"><b>Text unten</b></td>
> </tr></table>
>
> </body></html>
> </pre>
>
> <h3 class=3D"xpl">Erl=C3=A4uterung:</h3>
>
> <p>Mit <code>vertical-align:</code> k=C3=B6nnen Sie die vertikale=20
> Ausrichtung bestimmen. Folgende Angaben sind m=C3=B6glich:</p>
>
> <p>
> <code>top</code> =3D obenb=C3=BCndig ausrichten.<br>
> <code>middle</code> =3D mittig ausrichten.<br>
> <code>bottom</code> =3D untenb=C3=BCndig ausrichten.<br>
> <code>baseline</code> =3D an der Basislinie ausrichten (oder=20
> untenb=C3=BCndig, wenn es keine Basislinie gibt).<br>
> <code>sub</code> =3D tieferstellen (ohne die Schriftgr=C3=B6=C3=9Fe zu=20
> reduzieren).<br>
> <code>super</code> =3D h=C3=B6herstellen (ohne die Schriftgr=C3=B6=C3=9F=
e zu=20
> reduzieren).<br>
> <code>text-top</code> =3D am oberen Schriftrand ausrichten.<br>
> <code>text-bottom</code> =3D am unteren Schriftrand ausrichten.<br>
> </p>
>
> <p>Bei Flie=C3=9Ftext ist auch eine prozentuale Angabe m=C3=B6glich. Di=
e=20
> Ausrichtung orientiert sich dann an der elementeigenen Zeilenh=C3=B6he.=
</p>
>
> <p>Das folgende Bild veranschaulicht das Modell der vertikalen=20
> Ausrichtung:</p>
>
> <p><img src=3D"ausrichtung.gif" width=3D"300" height=3D"150" alt=3D"ver=
tikale=20
> Ausrichtung"></p>
>
> <p>Die gelben K=C3=A4sten stellen Kindelemente des gro=C3=9Fen Kastens =
dar, die=20
> freistehenden schwarzen Texte stellen Zeicheninhalt des gro=C3=9Fen Kas=
tens=20
> dar.</p>
>
>
>
> <table cellpadding=3D"4" cellspacing=3D"0" border=3D"0" width=3D"100%">
> <tr>
> <td class=3D"doc"> <a href=3D"#top"><img src=3D"../../src/up.gif" width=
=3D"14"=20
> height=3D"10" border=3D"0" alt=3D"nach oben"></a><a href=3D"#bottom"><i=
mg=20
> src=3D"../../src/down.gif" width=3D"14" height=3D"10" border=3D"0" alt=3D=
"nach=20
> unten"></a> </td>
> </tr>
> </table>
>
>
>
> <h2><img src=3D"../../src/css10.gif" width=3D"30" height=3D"30" alt=3D"=
CSS=20
> 1.0"><img src=3D"../../src/netsc4.gif" width=3D"30" height=3D"30"=20
> alt=3D"Netscape 4.0"><img src=3D"../../src/msie3.gif" width=3D"30"=20
> height=3D"30" alt=3D"MS IE 3.0"><img src=3D"../../src/op512.gif" width=3D=
"30"=20
> height=3D"30" alt=3D"Opera 5.12"><img src=3D"../../src/ffox1.gif" width=
=3D"30"=20
> height=3D"30" alt=3D"Mozilla Firefox 1"><img src=3D"../../src/konq33.gi=
f"=20
> width=3D"30" height=3D"30" alt=3D"Konqueror 3.3"><img=20
> src=3D"../../src/saf12.gif" width=3D"30" height=3D"30" alt=3D"Safari 1.=
2"> <a=20
> class=3D"an" name=3D"text_align">text-align (horizontale Ausrichtung)</=
a></h2>
>
> <p>Sie k=C3=B6nnen Textabs=C3=A4tze und in anderen Block-Elementen enth=
altenen=20
> Flie=C3=9Ftext oder Inline-Elemente ausrichten.</p>
>
> <h3 class=3D"xmp">Beispiel:</h3>
>
> <p><img src=3D"../../src/dokf.gif" width=3D"15" height=3D"10"=20
> alt=3D"Beispiel-Seite"> <a=20
> href=3D"anzeige/text_align.htm">Anzeigebeispiel: So sieht's aus</a></p>
>
> <pre>
> <html><head><title>text-align</title>
> </head><body>
>
> <p style=3D"text-align:left; margin-left:50px; margin-right:50px">Der=20
> Absatz,
> den Sie gerade lesen, wurde mit <b>text-align</b> linksb=C3=BCndig=20
> ausgerichtet.
> Ferner wurde ein Rand von 50px eingestellt, just for fun oder auch,
> damit Sie sehen, wie die einzelnen Stylesheet-Angaben zusammenspielen.<=
br>
> Noch eine Textzeile<br>
> Noch eine Textzeile</p>
>
> <!--usw.-->
> </body></html>
> </pre>
>
> <h3 class=3D"xpl">Erl=C3=A4uterung:</h3>
>
> <p>Mit <code>text-align:</code> k=C3=B6nnen Sie Textinhalte von=20
> Block-Elementen ausrichten. Folgende Angaben sind m=C3=B6glich:</p>
>
> <p>
> <code>left</code> =3D linksb=C3=BCndig ausrichten (Voreinstellung).<br>
> <code>center</code> =3D zentriert ausrichten.<br>
> <code>right</code> =3D rechtsb=C3=BCndig ausrichten.<br>
> <code>justify</code> =3D als Blocksatz ausrichten.</p>
>
> <h3 class=3D"inf">Beachten Sie:</h3>
>
> <p><code>text-align</code> bezieht sich nicht nur auf Textinhalte,=20
> sondern auf alle <b>inline</b> dargestellten Elemente (wie z.B.=20
> <code><img></code>). Der MS Internet-Explorer wendet diese Eigenschaft=20
> jedoch f=C3=A4lschlich auch auf Block-Elemente an.<br>
> Block-Elemente selbst werden =C3=BCber <img src=3D"../../src/dok.gif"=20
> width=3D"15" height=3D"10" alt=3D"Seite"> <code><a=20
> href=3D"randabstand.htm">margin</a></code> ausgerichtet, wobei gleiche=20
> Werte f=C3=BCr <code>margin-left</code> und <code>margin-right</code> e=
ine=20
> Zentrierung bewirken k=C3=B6nnen.</p>
>
> <p>Eine ehemals eingef=C3=BChrte CSS-Eigenschaft namens=20
> <code>alignment</code> ist mittlerweile aus dem CSS-Standard=20
> verschwunden. Verwenden Sie nur noch <code>text-align</code>.</p>
>
>
>
> <table cellpadding=3D"4" cellspacing=3D"0" border=3D"0" width=3D"100%">
> <tr>
> <td class=3D"doc"> <a href=3D"#top"><img src=3D"../../src/up.gif" width=
=3D"14"=20
> height=3D"10" border=3D"0" alt=3D"nach oben"></a><a href=3D"#bottom"><i=
mg=20
> src=3D"../../src/down.gif" width=3D"14" height=3D"10" border=3D"0" alt=3D=
"nach=20
> unten"></a> </td>
> </tr>
> </table>
>
>
>
> <h2><img src=3D"../../src/css20.gif" width=3D"30" height=3D"30" alt=3D"=
CSS=20
> 2.0"><img src=3D"../../src/netsc6.gif" width=3D"30" height=3D"30"=20
> alt=3D"Netscape 6.0"><img src=3D"../../src/op512.gif" width=3D"30"=20
> height=3D"30" alt=3D"Opera 5.12"><img src=3D"../../src/ffox1.gif" width=
=3D"30"=20
> height=3D"30" alt=3D"Mozilla Firefox 1"><img src=3D"../../src/konq33.gi=
f"=20
> width=3D"30" height=3D"30" alt=3D"Konqueror 3.3"><img=20
> src=3D"../../src/saf12.gif" width=3D"30" height=3D"30" alt=3D"Safari 1.=
2"> <a=20
> class=3D"an" name=3D"white_space">white-space (Textumbruch)</a></h2>
>
> <p>Sie k=C3=B6nnen festlegen, wie der Zeilenumbruch innerhalb von Eleme=
nten=20
> mit Text erfolgen soll.</p>
>
> <h3 class=3D"xmp">Beispiel:</h3>
>
> <p><img src=3D"../../src/dokf.gif" width=3D"15" height=3D"10"=20
> alt=3D"Beispiel-Seite"> <a=20
> href=3D"anzeige/white_space.htm">Anzeigebeispiel: So sieht's aus</a></p=
>
>
> <pre>
> <html><head><title>white-space</title>
> <style type=3D"text/css">
> #editor { white-space:pre; }
> #langezeile { white-space:nowrap; }
> </style>
> </head><body>
>
> <p id=3D"editor">
> Der Absatz, den Sie gerade lesen,
> wurde als predefiniert definiert.
> Zeilenumbr=C3=BCche sollten dabei so interpretiert
> werden, wie sie im Editor eingegeben wurden.</p>
>
> <p id=3D"langezeile">Der Absatz, den Sie gerade lesen, darf nicht
> umgebrochen werden. Es sollte kein automatischer Zeilenumbruch=20
> erfolgen. Bei
> diesem l&auml;ngeren Text m&uuml;ssen Sie vermutlich quer scrollen, um=20
> alles zu lesen.</p>
>
> </body></html>
> </pre>
>
> <h3 class=3D"xpl">Erl=C3=A4uterung:</h3>
>
> <p>Mit <code>white-space:</code> k=C3=B6nnen Sie das Verhalten f=C3=BCr=
 den=20
> Zeilenumbruch festlegen. Folgende Angaben sind m=C3=B6glich:</p>
>
> <p>
> <code>normal</code> =3D automatischer Zeilenumbruch (wie bei allen=20
> HTML-Tags au=C3=9Fer <pre> und <nowrap>).<br>
> <code>pre</code> =3D Zeilenumbruch wie im Editor eingegeben (so wie bei=
=20
> <code><pre>...<pre></code>).<br>
> <code>nowrap</code> =3D Kein automatischer Zeilenumbruch, Umbruch=20
> m=C3=B6glich durch entsprechende HTML-Tags.<br>
> </p>
>
> <h3 class=3D"inf">Beachten Sie:</h3>
>
> <p>Diese Angabe geh=C3=B6rt zur CSS-Version 2.0. Der Internet Explorer=20
> interpretiert nur den Wert <code>nowrap</code>, nicht den Wert=20
> <code>pre</code>. Netscape 4.x interpretiert den Wert=20
> <code>pre</code>, nicht aber <code>nowrap</code>. Erst Netscape 6.x=20
> beherrscht alle Angaben.</p>
>
>
>
> <table cellpadding=3D"4" cellspacing=3D"0" border=3D"0" width=3D"100%">
> <tr><td colspan=3D"2" class=3D"doc">
>  <a href=3D"#top"><img src=3D"../../src/up.gif" width=3D"14" height=3D"=
10"=20
> border=3D"0" alt=3D"nach oben"></a>
> </td></tr>
> <tr><td class=3D"doc"><a href=3D"randabstand.htm"><img=20
> src=3D"../../src/next.gif" width=3D"10" height=3D"10" border=3D"0" hspa=
ce=3D"10"=20
> alt=3D"weiter"></a></td>
> <td width=3D"100%"><img src=3D"../../src/dok.gif" width=3D"15" height=3D=
"10"=20
> alt=3D"Seite"> <a href=3D"randabstand.htm">Au=C3=9Fenrand und Abstand</=
a>
> </td></tr>
> <tr>
> <td class=3D"doc"><a href=3D"schrift_datei.htm"><img=20
> src=3D"../../src/prev.gif" width=3D"10" height=3D"10" border=3D"0" hspa=
ce=3D"10"=20
> alt=3D"zur=C3=BCck"></a></td>
> <td><img src=3D"../../src/dok.gif" width=3D"15" height=3D"10"=20
> alt=3D"Seite"> <a href=3D"schrift_datei.htm">Schriftformatierung mit=20
> Schriftartendatei</a>
> </td>
> </tr>
> <tr><td colspan=3D"2" class=3D"doc"> </td>
> </tr>
> <tr>
> <td colspan=3D"2" class=3D"nav"><a class=3D"an" name=3D"bottom"><img=20
> src=3D"../../src/refkap.gif" width=3D"16" height=3D"13" alt=3D"Teil von=
"></a>=20
> <a href=3D"../../index.htm">SELFHTML</a>/<a=20
> href=3D"../../navigation/index.htm" target=3D"_parent"=20
> class=3D"navh">Navigationshilfen</a> <img src=3D"../../src/refkap.gif"=20
> width=3D"16" height=3D"13" alt=3D"Teil von"> <a=20
> href=3D"../index.htm">Stylesheets (CSS)</a> <img=20
> src=3D"../../src/refkap.gif" width=3D"16" height=3D"13" alt=3D"Teil von=
"> <a=20
> href=3D"index.htm">CSS-Eigenschaften</a></td>
> </tr>
> </table>
>
> <p>=C2=A9 2005 <img src=3D"../../src/dok.gif" width=3D"15" height=3D"10=
"=20
> alt=3D"Seite"> <a href=3D"../../editorial/impressum.htm">Impressum</a><=
/p>
>
> </body>
> </html>