Jump to content

Zeilendurchschuß in Fließtext (HTML)


Laptop

Empfohlene Beiträge

Laptop

Hallo, was ich schon immer fragen wollte: warum wechselt der Zeilendurchschuß chaotisch in einem Fließtext in HTML, was mache ich falsch? MfG, Laptop

 

 

 

 

post-18716-0-86638000-1372888777_thumb.j

Link zum Beitrag
Ralf Herrmann

Und wie sehen deine Formatierungen aus?

Wahrscheinlich sind das einfach Rundungsartefakte, weil nicht alles pixelgenau definiert ist (was ja auch nicht immer das Beste sein muss). 

Link zum Beitrag
Laptop

Der Quellcode ist ganz gewöhnlich. In der HTML-Datei:

<div class="menu">
<u class="buttons">☞ abc<s>abc abc abc … … …</s></u>
</div class="menu">

… und in der CSS-Datei:

.menu {
    float:left;
    width:422px;height:614px;
    margin:0 40px 40px 0;
    background:#555;
    font:normal 1em/1.4 Tahoma;
    }
s { display:none; /* hide */ }
u.buttons:hover s {
    text-decoration:none; /* removes default strikethrough */
    display:block;
    position:absolute;
    top:2.3em;
    left:0em;
    width:30em;
    padding:0.5em;
    z-index:1;
    background-color:#fff;
    padding:10px;
    }
Link zum Beitrag
Sebastian Nagel

Sieht man diese Unterschiede auch bei nicht-markiertem Text, oder betrifft es vor allem die Markierung?

 

Probier mal versuchsweise statt

s { display:none; /* hide */ }

das hier:

s { display:none; /* hide */ 
    line-height:20px;
}

Da sollte sich das Zeilenmuster beruhigen, weil auf volle Pixel für den Zeilenabstand eingestellt.

Das ist nicht immer eine gute Lösung (du arbeitest da ja generell mit em-Einheiten), aber zum Testen hilft's.

Derzeit ist 1.4-facher Zeilenabstand von 1em-großem Text eingestellt. Das ergibt vermutlich Bruchteile von Pixeln in der Berechnung, die irgendwo ausgeglichen werden müssen, damit sie sich nicht aufsummieren. Deshalb die abwechselnden Höhen.

 

 

 

Abgesehen davon:

– der s-Tag ist eigentlich dazu gedacht, Text lokal formatiert als durchgestrichen zu markieren. Ihn für ein einblendbares Textpanel umzudefinieren ist zwar technisch möglich, aber etwas umständlich und semantisch nicht korrekt. Selbiges gilt für den u-Tag.

– Die Positions-, Größen- und Format-Angaben des s-Elements erst in der Hover-Formatierung zuzuweisen kann bei alten Browsern zu seltsamen Effekten führen. Im Grunde kannst du alles schon im s-Bereich definieren, außer das display:block – das ist die einige Eigesnchaft die sich ändern muss, um das Element beim Überfahren mit dem Zeiger ein- und auszublenden.

Link zum Beitrag
Laptop

Hallo Hr. Herrmann! Richtig, ändere ich die line-height von 1.4 auf einen anderen Wert, dann wird der Zeilendurchschuß manchmal regelmäßig und ordentlich dargestellt. D. h. so wie ich das verstehe sind die Unregelmäßigkeiten im Zeilendurchschuß ein Render-Problem des Browsers, das man durch Workarounds aber nicht systemisch beheben kann.

 

Die Positions-, Größen- und Format-Angaben des s-Elements erst in der Hover-Formatierung zuzuweisen kann bei alten Browsern zu seltsamen Effekten führen. Im Grunde kannst du alles schon im s-Bereich definieren, außer das display:block …

 

Sie haben recht, es ist sinnvoller die Angaben aus der Hover-Definition herauszuhalten, danke für den Hinweis.

 

Zur Umdefinition von Tags: ich brauche im Grunde Wildcards, irgendwelche Tags, die ich beliebig definieren kann, und da es das in HTML nicht gibt, sehe ich mich gezwungen Tags wie <u> oder <s> zweckzuentfremden. Technisch möglich ist es sogar Phantasie-Tags wie <r> oder <v> oder <w> zu definieren und zu verwenden (in Firefox). Doch da sehe ich Kompatibilitätsprobleme mit anderen Browsern noch eher auf mich zu kommen, als wenn ich u-Tags und s-Tags umdefiniere. Falls Sie eine Alternative kennen, bin ich interessiert.

Link zum Beitrag
Sebastian Nagel

Es ist im Grunde kein Render-Problem, sondern ein Mathematik-Ganzzahlen-Problem. Der Browser berechnet z.b. dass 1.4em auf dem Anzeigegerät 19.5 Pixel sind. Die kann er aber so nicht darstellen sondern muss auf 20px aufrunden (außer über Aliasing der Grundlinie, was auf normal aufgelösten Geräten mit 90-120ppi sicher hässlich aussieht).

In der Folgezeile kann er entweder wieder 20px anwenden, und wieder und wieder ... nach 20 Zeilen hat er durch Aufrundung 10 Pixel Überschuss generiert, aber alle Zeilen sind regelmäßig.  Die Alternative ist das gezeigte: die erste Zeile bekommt 20px, die nächste 19, dann wieder 20, ...

 

Umdefinition von Tags: 

Ist das dafür gedachte neutrale Block-Element <div> kombiniert mit passenden Klassen oder css-Selektoren aus einem speziellen Grund keine Alternative? Sonst wäre das die gängige Methode.

Zweckentfremden und per CSS so formen wie man es braucht ist natürlich möglich, der einzige Vorteil den ich sehe ist allerdings die so verkürzte Schreibweise im Code. Die Nachteile sind, dass alle Interpreter die nicht rein visuell arbeiten (z.B. Screenreader, Suchmaschinen, etc.) dadurch stark in die Irre geführt werden, denn sie sehen nur die HTML-Struktur, nicht aber die CSS-Umdefinition.

Link zum Beitrag
Laptop

Es ist im Grunde kein Render-Problem, sondern ein Mathematik-Ganzzahlen-Problem. … die erste Zeile bekommt 20px, die nächste 19, dann wieder 20, ...

 

Das ist einleuchtend veranschaulicht. Wäre zu wünschen, daß der Browser für eine einheitliche Erscheinung “mitdenkt”, und – ganz gleich für welche Rundung er sich entscheidet – bei einem Wert bleibt und nicht zw. 19 und 20 hin und her wechselt.

 

Umdefinition von Tags: 

Ist das dafür gedachte neutrale Block-Element <div> kombiniert mit passenden Klassen oder css-Selektoren aus einem speziellen Grund keine Alternative? Sonst wäre das die gängige Methode.

Zweckentfremden und per CSS so formen wie man es braucht ist natürlich möglich, der einzige Vorteil den ich sehe ist allerdings die so verkürzte Schreibweise im Code. Die Nachteile sind, dass alle Interpreter die nicht rein visuell arbeiten (z.B. Screenreader, Suchmaschinen, etc.) dadurch stark in die Irre geführt werden, denn sie sehen nur die HTML-Struktur, nicht aber die CSS-Umdefinition.

Stimmt, ein <span>-Tag oder <div>-Tag ist natürlich beliebig definierbar, das entfiel mir gerade. Aber wie Sie schon geahnt haben, war bei mir tatsächlich die verkürzte Schreibweise und der damit einhergehende verbesserte Überblick im Quellcode ausschlaggebend. Grüße.

Link zum Beitrag
TobiW

Aber den Quellcode ließt (meistens) nur einer, nämlich der Entwickler. Das Ergebnis mit oder ohne „falschen“ Tags aber potenziell deutlich mehr Leute und geht es nicht darum anderen Menschen Information in möglichst guter Qualität (hier bezogen auf die Darstellung nicht du Infos selber) zu präsentieren, statt sich selbst als Autor/Programmierer das Leben zu erleichtern …?

P.S.: Hier im Forum duzen wir uns übrigens gemeinhin :-)

Link zum Beitrag

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

<p>Eine elegante Display-Schrift von Friedrich Althausen mit 200 Ligaturen</p>
<p>Eine elegante Display-Schrift von Friedrich Althausen mit 200 Ligaturen</p>
<p>Eine elegante Display-Schrift von Friedrich Althausen mit 200 Ligaturen</p>
<p>Eine elegante Display-Schrift von Friedrich Althausen mit 200 Ligaturen</p>
<p>Eine elegante Display-Schrift von Friedrich Althausen mit 200 Ligaturen</p>
<p>Eine elegante Display-Schrift von Friedrich Althausen mit 200 Ligaturen</p>
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung