Span vs &zwnj
bearbeitet von
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:
1. <span>JavaScript/</span><span>DOM/</span><span>Node/</span><span>firstChild</span>, mit einem `display:inline-block` auf dem span. Dann bricht er zwischen den spans bedarfsweise um.
2. JavaScript/‌DOM/‌Node/‌firstChild
3. JavaScript/<wbr>DOM/<wbr>Node/<wbr>firstChild
Begonnen hatte ich mit (1), aber wie man [hier](https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/zwnj) sehen kann (**Edit: bitte dafür den Makeover-Skin aktivieren!**), 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_
--
sumpsi - posui - obstruxi
Span vs &zwnj
bearbeitet von
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 zwei Ansätze verfolgt:
1. <span>JavaScript/</span><span>DOM/</span><span>Node/</span><span>firstChild</span>, mit einem `display:inline-block` auf dem span. Dann bricht er zwischen den spans bedarfsweise um.
2. JavaScript/‌DOM/‌Node/‌firstChild
3. JavaScript/<wbr>DOM/<wbr>Node/<wbr>firstChild
Begonnen hatte ich mit (1), aber wie man [hier](https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/zwnj) 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. 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_
--
sumpsi - posui - obstruxi
Span vs &zwnj
bearbeitet von
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 zwei Ansätze verfolgt:
1. <span>JavaScript/</span><span>DOM/</span><span>Node/</span><span>firstChild</span>, mit einem `display:inline-block` auf dem span. Dann bricht er zwischen den spans bedarfsweise um.
2. JavaScript/‌DOM/‌Node/‌firstChild
3. JavaScript/<wbr>DOM/<wbr>Node/<wbr>firstChild
Begonnen hatte ich mit (1), aber wie man [hier](https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/zwnj) 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. Ob ich `/</span><span>` oder `</span>/<span>` nehme, ist dabei egal. Mit `</span><span>/` würde es vermutlich prima passen, aber dann ist das / in der Folgezeile und DAS wollte ich eigentlich nicht 🤦.
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_
--
sumpsi - posui - obstruxi
Span vs &zwnj
bearbeitet von
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 zwei Ansätze verfolgt:
1. <span>JavaScript</span><span>DOM</span><span>Node</span><span>firstChild</span>, mit einem `display:inline-block` auf dem span. Dann bricht er zwischen den spans bedarfsweise um.
2. JavaScript/‌DOM/‌Node/‌firstChild
3. JavaScript/<wbr>DOM/<wbr>Node/<wbr>firstChild
Begonnen hatte ich mit (1), aber wie man [hier](https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/zwnj) 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.
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_
--
sumpsi - posui - obstruxi
Span vs &zwnj
bearbeitet von
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 zwei Ansätze verfolgt:
1. <span>JavaScript</span><span>DOM</span><span>Node</span><span>firstChild</span>, mit einem `display:inline-block` auf dem span. Dann bricht er zwischen den spans bedarfsweise um.
2. JavaScript/‌DOM/‌Node/‌firstChild
3. JavaScript/<wbr>DOM/<wbr>Node/<wbr>firstChild
Begonnen hatte ich mit (1), aber wie man [hier](https://wiki.selfhtml.org/wiki/Benutzer:Rolf_b/zwnj) sehen kann, ist das unbefriedigend. Ohne Margin ist es stellenweise zu dicht, mit einem margin-right am Span ist es an anderen Stellen zu viel.
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_
--
sumpsi - posui - obstruxi