Benutzer:Fomafix/Vorlage:Dito

Diese Vorlage erzeugt ein Unterführungszeichen für ein Wort.

* Bottrop-Eigen
* {{Benutzer:Fomafix/Vorlage:Dito|Bottrop-}}Fuhlenbrock
* {{Benutzer:Fomafix/Vorlage:Dito|Bottrop-}}Vonderort

erzeugt:

• Bottrop-Eigen
• „Bottrop-Fuhlenbrock
• „Bottrop-Vonderort

• Internet Explorer 6
• Internet Explorer 8
• Opera 9.2
• Opera 10.10
• Firefox 3.0
• Firefox 3.5
• Konqueror

Mit einer eigenen CSS-Klasse in MediaWiki:Common.css könnte das Markup verbessert werden:

Vorlage

<span class="dito" {{#if:{{{lang|}}}|lang="{{{lang}}}" xml:lang="{{{lang}}}"}}>{{{1}}}</span>

Common.css

.dito {
	visibility: hidden;
	position: relative;
}
.dito:before {
	visibility: visible;
	position: absolute;
	text-indent: 0;
	content: "„";
}
.dito:before:lang(de-ch) {
	content: "»";
}

• Bottrop-Eigen
• Bottrop-Fuhlenbrock
• Bottrop-Vonderort

• Internet Explorer 6 und 7 kann kein :before^[1] und kein content^[2]. Die Variante mit #CSS-Klasse zeigt bei diesen Versionen das Unterführungszeichnen nicht an. Die Variante mit Vorlage ist davon nicht betroffen.

Laut Duden stehen die Unterführungszeichen unterhalb des zu wiederholenden Wortes in der Mitte. Nach DIN 5008 werden die Unterführungszeichen jeweils unter dem ersten Buchstaben des zu wiederholenden Wortes gestellt.^[3]

Mit CSS kann das Unterführungszeichen auch zentriert unter dem Wort werden, indem folgendes verwendet wird:

.dito {
	visibility: hidden;
	position: relative;
}
.dito:before {
	visibility: visible;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	text-indent: 0;
	content: "„";
}
.dito:before:lang(de-ch) {
	content: "»";
}

• Bottrop-Eigen
• „Bottrop-Fuhlenbrock
• „Bottrop-Vonderort

• Opera 9.2 berechnet die Positionen bei left: 0; und right: 0; in dieser Konstellation falsch. Die Unterführungszeichen sind um eine feste Länge (vermutlich die Breite der linken Navigationsleiste) nach rechts verschoben. Opera 10.10 ist nicht davon betroffen. Versionen dazwischen sind noch nicht getestet.
• Internet Explorer 6 interpretiert left: 0; und right: 0; in dieser Konstellation nicht. Die Unterführungszeichen sind am Wortanfang. Internet Explorer 7 ist noch nicht getestet.

Mit folgender zusätzlicher CSS-Definition für die Vorlagen-Variante wird das wiederholte Wort anstelle des Unterführungszeichen angezeigt, wenn sich der Mauszeiger über dem Wort befindet:

.dito:hover {
	visibility: visible !important;
}
.dito:hover > :first-child {
	display: none;
}

Alternativ kann auch das darüberliegende Element – üblicherweise die ganze Zeile – zum Einblenden verwendet werden:

:hover > .dito {
	visibility: visible !important;
}
:hover > .dito > :first-child {
	display: none;
}

Für die Variante mit CSS-Klasse muss entsprechend folgendes Verwendet werden:

:hover > .dito {
	visibility: visible;
}
:hover > .dito:before {
	display: none;
}

1. ↑ https://developer.mozilla.org/en/CSS/:before#Browser_compatibility
2. ↑ https://developer.mozilla.org/en/CSS/content#Browser_compatibility
3. ↑ http://www.sekada-daily.de/aktuelles/tipp/din-5008-unterfuehrungszeichen-statt-wortwiederholung.html