Jump to content
Unsere freundliche Community freut sich auf deine Fragen …

Zeilendurchschuß in Fließtext (HTML)

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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar
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 zu diesem Kommentar

Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden

Unsere Partner

Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
Entdecke hunderte Font-Sonderangebote.
FDI Type Foundry besuchen
Hier beginnt deine kreative Reise.
Ständig interessante neue Typo-Inhalte auf Instagram. Abonniere @typography.guru.
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.