ridonkulous Großschriftanzeige Problem. fontSize zerschmettert Wörter über

Question

Ich bin in der Mitte schreiben eine Lessig-Methode Folie Objekt in Javascript (so etwas Spaß, nicht wichtig), und ich begegne immer seltsame Text Layout Anomalien, die mag ich nicht sagen kann ich habe schon gesehen. Und dennoch sind sie auf meinen Dias weit verbreitet.

Der Hintergrund ist geradlinig. Präsentation hat Folien und Folien Linien. Eine Zeile könnte ein Wort oder eine Phrase sein, und in den Bildern, die ich verlinke, haben die Folien drei Zeilen.

Der Präsentations "Bildschirm" ist das Ansichtsfenster des Browserfensters. Die Eigenschaft CSS-Zeilenhöhe jeder Zeile wird anhand der Höhe des Darstellungsbereichs dividiert durch die Anzahl der Zeilen berechnet. Jede Zeile ist ein div mit einer Schriftgröße, die bequem unter der Zeilenhöhe liegt (90%, aber in px).

Eine gut aussehende Rutsche sieht aus wie die erste auf dieser Seite: bbby.org/share/so_pics.html

(ich nur einen Link hinzufügen).

Hier wird es komisch: Da alles auf der Größe des Darstellungsbereichs berechnet, die Firebug-Konsole nach oben oder den Vollbildmodus wechselt alle Größe (bei Aktualisierung). In einigen Fällen schieben sich die ersten ein bis drei Buchstaben eines Wortes den ganzen Weg nach links vom Bildschirm und stapeln sich übereinander. Das einzige, was anders ist, dass ich im Vollbildmodus gegangen und aktualisiert (und neue Größen wurden berechnet).

Abhängig von der Schriftgröße Modifier ich eingestellt (90%, 80%, aber wieder in px eingestellt), könnte es in einer normalen Ansicht (nicht Vollbild) passieren.

Hat jemand schon einmal so etwas gesehen?

Answer 1

Lustig, dass es Abzeichen für Trolling gibt. Ich würde es hassen zu sehen, dass diese Seite der neue Youtube oder Failblog in unseren Kommentaren wird.

Abgesehen davon ist der Effekt steuerbar (wenn auch immer noch nicht erklärt). Durch die Feineinstellung der Schriftgröße über das Skript kann ich erkennen, an welcher Stelle bestimmte Buchstaben in Wörtern auseinander fallen.

Zum Beispiel, in einem div mit lineHeight = 269, fliegen die Buchstaben "ri" aus dem Wort "right" wie im Original post mit einer fontSize> = 209, aber nichts unter. Der Buchstabe "l" im Wort "links" hat eine höhere Nummer, möglicherweise erhöht, weil "f" auch ein großer Buchstabe ist.

Für eine derzeit konsistente Problemumgehung für dieses sehr reale und problematische Problem (Tyvm), setze ich das FontSize-Attribut auf 73% der Zeilenhöhe auf dem übergeordneten Container.