Benutzer:Fomafix/Vorlage:Dito

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

Beispiel

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

erzeugt:

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

Getestete Browser

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

CSS-Klasse

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: "»";
}

Beispiel

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

Darstellungsprobleme

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

Zentriertes Unterführungszeichen

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.

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: "»";
}

Beispiel

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

Darstellungsprobleme

• 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.

Gadgets

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;
}