nicht angemeldet
Rolf B
Gunnar Bittersmann
Rolf B
MudGuard
Rolf B
Matthias Scharwies
Rolf B
Gunnar Bittersmann
Rolf B
Hallo alle,
unser Wiki hat teils recht tiefe Hierarchien für die Artikel, was zu Überschriften wie
JavaScript/DOM/Node/firstChild
oder
JavaScript/Tutorials/OOP/Objekte und ihre Eigenschaften
führt und, vor allem bei kleinen Viewports, dazu führt, dass die Überschrift aus den Viewport hinausragt.
Um das zu lösen, hatte ich im Makeover-Skin zwei Ansätze verfolgt:
display:inline-block auf dem span. Dann bricht er zwischen den spans bedarfsweise um.Begonnen hatte ich mit (1), aber wie man hier sehen kann (Edit: dieser Link erzwingt den Makeover-Skin, nur für diese Seite), ist das unbefriedigend. Ohne Margin ist ist / und T zu dicht aneinander, mit einem margin-right am Span ist es an den anderen Stellen zu viel. Ob ich /</span><span> oder </span>/<span> nehme, ist dabei egal. Mit </span><span>/ passt zwar das /T, aber dafür t/ nicht mehr.
Deswegen hatte ich Variante mit dem Zero-Width Non-Joiner genommen. Visuell ist er komplett unauffällig und der Browser bricht an dieser Stelle um, wenn nicht genug Platz ist. Prima.
Aber jetzt kam Mattias und sagt: Der ZWNJ wird bei Copy+Paste mitkopiert und fällt dabei zunächst überhaupt nicht auf. Aber der Link, den man auf diese Weise generiert, ist kaputt. Das schlimme ist: Ein Zero-Width Space bemerke ich, wenn ich mit zeichenweise über einen String laufe, der Cursor bleibt dann kurz stehen. Beim ZWNJ ist das nicht der Fall.
Ich habe noch versucht, die ZWNJ durch ein <wbr> Element zu ersetzen, das hatte aber den gleichen Effekt wie die span-Lösung ohne Margins.
Ich bräuchte also eine Lösung, die beides vereint: Transparenz gegenüber Copy+Paste, visuell korrekte Zeichenabstände und Zeichenumbruch an vorgegebenen Stellen. Gibt's das?
Rolf
@@Rolf B
Begonnen hatte ich mit (1), aber wie man hier sehen kann, ist das unbefriedigend. Ohne Margin ist ist / und T zu dicht aneinander, mit einem margin-right am Span ist es an den anderen Stellen zu viel.
Nö, da sehe ich nichts, was zu deiner Beschreibung passt. Die Schrift sieht in allen 4 Fällen gleich aus und von margin-right: 2px ist selbst im Entwicklertool nichts zu sehen.
Aber jetzt kam Mattias und sagt: Der ZWNJ wird bei Copy+Paste mitkopiert und fällt dabei zunächst überhaupt nicht auf. Aber der Link, den man auf diese Weise generiert, ist kaputt.
?? Was hat ein URL mit dem Text der Überschrift zu tun? Was in der Überschrift ein Leerzeichen ist, ist im URL ein Unterstrich. Und warum sollte jemand den Text der Überschrift kopieren, wenn sie den URL kopieren will?
Aber das Problem sind nicht die Zeilenumbrüche, sondern:
unser Wiki hat teils recht tiefe Hierarchien für die Artikel, was zu Überschriften wie „JavaScript/DOM/Node/firstChild“ oder „JavaScript/Tutorials/OOP/Objekte und ihre Eigenschaften“ führt
Da liegt das Problem. Was sich leicht beheben lässt: Überschriften sind das Eine und Breadcrumbs sind etwas Anderes. Breadcrumbs gehören nicht in die Überschrift.
Jolan tru
Hallo Gunnar,
...Hierarchie...
Da liegt das Problem.
Ja, und Matthias will auch dran arbeiten
Was sich leicht beheben lässt
Gar nicht. Das sind halt die Titel im Wiki, und das Wiki zeigt das so an. Man muss alle Seiten in das "Root-Verzeichnis" verschieben und Redirects hinterlassen.
Was hat ein URL mit dem Text der Überschrift zu tun
Man merkt, dass Du kein Wiki-Autor bist. Wenn ich einen Artikel X schreibe und darin auf einen Artikel Y verweisen will, dann ist es relativ häufig so, dass man diesen Artikel auf einem zweiten Tab öffnet, dort die Überschrift von Y kopiert und in X ein [[Foo/Bar/Baz/Y|Y]] erstellt.
Wenn jetzt &zwnj hinter den / stehen, dann landen die unsichtbar mit in den [[ ]] und der Link ist fritte.
Ah, sag das doch gleich, dass man sich das in Googles Spion anstatt in einem vernünftigen Browser ansehen soll!
Ich hätte was anderes sagen müssen und editiere das gleich oben hinein: Bitte aktiviere den Makeover-Skin, wie im Vereinsforum erbeten. Oder hast Du den im FF aktiviert, warst in Chrome aber nicht angemeldet und hast den Selfhtml-Skin als Default bekommen? Füge im Zweifelsfall mal ?useskin=makeover an die URL an. Das editiere ich auch noch oben rein. Die Umbruch-Einfügung erfolgt nur in diesem Skin, und dann sollte das auch im Firefox passieren. Nunito hosten wir natürlich selbst. Sorry, da war ich unaufmerksam.
Rolf
@@Rolf B
Was hat ein URL mit dem Text der Überschrift zu tun
Man merkt, dass Du kein Wiki-Autor bist.
Man merkt, dass du kein Designer bist. Wiki-Autoren sind hier ziemlich schnuppe. Die relevante Frage ist: Erwarten Nutzer des Wikis Breadcrumbs in Überschriften?
Ich hätte was anderes sagen müssen und editiere das gleich oben hinein: Bitte aktiviere den Makeover-Skin, wie im Vereinsforum erbeten. Die Umbruch-Einfügung erfolgt nur in diesem Skin, und dann sollte das auch im Firefox passieren. Nunito hosten wir natürlich selbst.
Du stellst die Frage hier im öffentlichen Forum. Da ist es nicht hilfreich zu sagen „aktiviere den Makeover-Skin, wie im Vereinsforum erbeten“. Das Problem sollte für alle ersichtlich sein, ohne dass man dazu irgendwas aktivieren müsste, noch dazu etwas, wo man gar nicht rankommt. („Problem“ bezieht sich auf das technische, nicht auf das eigentliche Problem.)
Jolan tru
Hallo Gunnar,
Die relevante Frage ist: Erwarten Nutzer des Wikis Breadcrumbs in Überschriften?
Diese Frage wird von Mediawiki ab Werk mit "Ja" beantwortet. Der Titel des Artikels ist Foo/Bar/Baz/Y, nicht Y.
Ob das die richtige Antwort ist, ist natürlich eine andere Frage. Kennst Du die richtige Antwort? Bist Du überhaupt ein Nutzer des Wiki? Oder fragst Du für einen Freund 😉?
Die eigentliche, ebenenweise klickbare Breadcrumb wird ohnehin nochmal unter der Überschrift angezeigt.
Ich kann sicherlich für die Anzeige ändern, dass nur der letzte Teil des Lemmas gezeigt wird. Aber ich kann nicht spontan sagen, ob das irgendwas anderes kaputtmacht.
Rolf
@@Rolf B
Die relevante Frage ist: Erwarten Nutzer des Wikis Breadcrumbs in Überschriften?
Diese Frage wird von Mediawiki ab Werk mit "Ja" beantwortet. Der Titel des Artikels ist Foo/Bar/Baz/Y, nicht Y.
„Ab Werk“ heißt: das kann man anpassen?
Ob das die richtige Antwort ist, ist natürlich eine andere Frage. Kennst Du die richtige Antwort? Bist Du überhaupt ein Nutzer des Wiki? Oder fragst Du für einen Freund 😉?
Du möchtest einen Nutzer-Test durchführen.
Die eigentliche, ebenenweise klickbare Breadcrumb wird ohnehin nochmal unter der Überschrift angezeigt.
Ein ziemliches Indiz dafür, dass der Breadcrumb nicht in der Überschrift stehen sollte.
Jolan tru
Hi,
Ohne Margin ist ist / und T zu dicht aneinander, mit einem margin-right am Span ist es an den anderen Stellen zu viel.
und von
margin-right: 2pxist selbst im Entwicklertool nichts zu sehen.
IIRC darf auch nix davon zu sehen sein, solange das span ein inline-Element ist - für die ist meiner Erinnerung nach horizontaler Margin nicht möglich.
cu,
Andreas a/k/a MudGuard
Hallo MudGuard,
es ist auch inline-block. Ansonsten würde es den beabsichtigten Zweck nicht erfüllen.
Aber ich kann das mal umbauen und nur den letzten Teil des Lemmas ins firstHeading schreiben.
Rolf
Servus!
@@Rolf B
Aber jetzt kam Mattias und sagt: Der ZWNJ wird bei Copy+Paste mitkopiert und fällt dabei zunächst überhaupt nicht auf. Aber der Link, den man auf diese Weise generiert, ist kaputt.
?? Was hat ein URL mit dem Text der Überschrift zu tun? Was in der Überschrift ein Leerzeichen ist, ist im URL ein Unterstrich. Und warum sollte jemand den Text der Überschrift kopieren, wenn sie den URL kopieren will?
@Rolf B Ja, das hatte ich auch schon in einer PN geschrieben:
Ich habe nachgedacht und glaube nicht: wie viele Leute nehmen die Überschrift für einen internen Link her? Wir zwei!(Oder nur ich?)
Use Case für alle anderen ist die URL, die sie entweder aus dem anchor bei h2,h3,h4 kriegen oder aus der Browserleiste!
BTW: Wäre ein anchor auf der H1 eine Lösung?
Aber das Problem sind nicht die Zeilenumbrüche, sondern:
unser Wiki hat teils recht tiefe Hierarchien für die Artikel, was zu Überschriften wie „JavaScript/DOM/Node/firstChild“ oder „JavaScript/Tutorials/OOP/Objekte und ihre Eigenschaften“ führt
Da liegt das Problem.
Ich finde die Stelle nicht mehr, in der @dedlfix sagte, dass er 2010 mal 2 Tage weg gewesen wäre und dann diese Struktur festgelegt wurde.
Wir ändern das sukzessive; manche Sachen wie
sollten aber bleiben. Das könnte man ja mal gemeinsam diskutieren.
Was sich leicht beheben lässt: Überschriften sind das Eine und Breadcrumbs sind etwas Anderes. Breadcrumbs gehören nicht in die Überschrift.
Zumindest die Umbrüche sind ein gute Zwischenlösung.
Herzliche Grüße
Matthias Scharwies
Nachtrag: Es scheint vor allem ein Problem der Nunito-Schrift zu sein. Verwende ich Arial 🤮 oder andere sans-Schriften auf meinem PC, passen die Abstände.
Das wär jetzt doof, wir haben lange überlegt, welche Titelschrift wir nehmen.
Ist das jetzt ein Nunito-Bug oder ein Chrome-Bug oder ein Windows-Bug?!
@@Rolf B
Ist das jetzt ein Nunito-Bug oder ein Chrome-Bug oder ein Windows-Bug?!
Ah, sag das doch gleich, dass man sich das in Googles Spion anstatt in einem vernünftigen Browser ansehen soll!
Firefox bricht nach den / um, Chrome nicht.
Jolan tru
Hallo Gunnar,
jo ei verbibscht, der FF bricht ohne Hilfestellung an den / um und der Chrome tut's nicht. Aber Chrome ist kein IE, den kann man nicht vernachlässigen.
Ist dieses Umbruchverhalten etwas, was man mit CSS beeinflussen kann?
Rolf
Es gibt aber auch Lemmata, bei denen nichts mehr hilft. Zumindest auf meinem Mobilchen nicht
Rolf
@@Rolf B
Nunito-Schrift
Für diese würde ich Ligaturen ausschalten: font-variant-ligatures: none.
Die fi-Ligatur macht hier überhaupt keinen Sinn (wie auch bei manch anderen serifenlosen Schriften nicht). Der Sinn der fi-Ligatur ist ja, dass der Bogen des f nicht mit dem i-Punkt kollidiert. (Meist dient der Tropfen des f auch als i-Punkt.)
Bei Nunito u.a. ist das aber gar nicht der Fall; f und i berühren sich gar nicht. Aber bei der Ligatur sitzen f und i näher zusammen, was keinen Sinn macht. Und dass der Querstrich des f bis zum i ran geht, auch nicht.
fi-Ligatur kann weg. Andere Ligaturen (fl, ffi, …) scheint’s in Nunito nicht zu geben. Also Ligaturen ausschalten.
Übrigens sind da etliche Subsets eingebunden, die man wohl niemals braucht.
Und sollte es bei variable fonts nicht format('woff2-variations') heißen?
Verwende ich Arial 🤮
Das tut man doch nicht. ☞ Was der Erik sagt.
Jolan tru
@@Rolf B
Begonnen hatte ich mit (1), aber wie man hier sehen kann (Edit: dieser Link erzwingt den Makeover-Skin, nur für diese Seite), ist das unbefriedigend.
Ja, jetzt sehe ich, was du meinst. Auch im Firefox.
Meine Vermutung wäre, dass ‚t‘–‚/‘ und ‚/‘–‚T‘ in dieser Schriftart Kerning-Paare sind. Wenn ‚t‘ und ‚/‘ bzw. ‚/‘ und ‚T‘ nicht im selben span sind, geht bei display: inline-block das Kerning verloren.
Ohne Margin ist ist / und T zu dicht aneinander, mit einem margin-right am Span ist es an den anderen Stellen zu viel.
Würde ich nicht sagen. Eher überall zu wenig; das ‚/‘ könnte etwas Luft auf beiden Seiten vertragen:
#firstHeading span:not(:first-child) { margin-inline-start: 0.1ch }
#firstHeading span:not(:last-child) { margin-inline-end: 0.1ch }
Die ‚/‘ müssen dann weder am Ende noch am Anfang in den spans stehen, sondern zwischen ihnen.
Jolan tru
Hallo Gunnar,
okay, danke dafür. Aber wir hatten ja gesagt, dass ich versuchen möchte, das Problem durch Entfernen des Pfades zu eliminieren 😀
Dies hier
Die ‚/‘ müssen dann weder am Ende noch am Anfang in den spans stehen, sondern zwischen ihnen.
ist leider nicht so gut, damit kann ein / allein in der Zeile landen. Ist mir beim Probieren schon passiert. Um die Darstellung lufiger zu machen, müsste ich mich entscheiden, ob ich die / eher am Ende eines Pfadteils oder an seinem Beginn sehen möchte, und für die "Ende-Version" <span>Name<span>/</span></span> generieren. Kein ::after, damit das / mitkopiert werden kann, wenn das jemand will… Brrr.
Rolf