HTML <rtc>-Element
Das HTML <rtc>-Element wird verwendet, um ein oder mehrere <rt>-Elemente zu gruppieren, um semantische Annotationen für den Ruby-Basis-Text bereitzustellen. Es befindet sich innerhalb eines <ruby>-Containers zusammen mit <rb>-Elementen.
Ruby-Annotationen werden üblicherweise in der ostasiatischen Typografie verwendet. Während <rt>-Elemente typischerweise Aussprachehinweise liefern, gruppieren <rtc>-Elemente diese Annotationen, um semantische Bedeutungen (wie Übersetzungen oder alternative Lesarten) hinzuzufügen, ohne das phonetische Layout zu beeinflussen.
Hinweis: Die
<rtc>- und<rbc>-Elemente sind in HTML5.1+ veraltet und wurden aus dem HTML Living Standard entfernt. Sie werden nur zur Abwärtskompatibilität beibehalten. Verwenden Sie für die moderne Webentwicklung stattdessen CSSruby-Eigenschaften.
Das <rtc>-Tag ist eines der HTML5-Elemente.
Syntax
Das <rtc>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<rtc>) und dem schließenden (</rtc>)-Tag geschrieben. Das schließende Tag des <rtc>-Elements kann weggelassen werden, wenn es unmittelbar von <rb>, <rt>, <rp> oder <rtc> gefolgt wird oder wenn das übergeordnete Element keinen Inhalt enthält.
Beispiel für das HTML <rtc>-Tag:
Warnung: Dieses Beispiel verwendet veraltete
<rtc>- und<rbc>-Elemente. Es dient nur als Referenz für Legacy-Systeme.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ruby>
<rbc>
<rb>旧</rb>
<rt>jiù</rt>
<rb>金</rb>
<rt>jīn</rt>
<rb>山</rb>
<rt>shān</rt>
</rbc>
<rtc><rt>San Francisco</rt></rtc>
</ruby>
</body>
</html>Ergebnis

Das <rtc>-Tag unterstützt die Globalen Attribute und Ereignisattribute.
Browser-Unterstützung
| Browser | Unterstützung |
|---|---|
| Chrome | Legacy |
| Firefox | Legacy |
| Safari | Legacy |
| Edge | Legacy |
| Opera | Legacy |
Hinweis: Die Unterstützung ist Legacy, da
<rtc>und<rbc>in HTML5.1+ veraltet sind. Moderne Browser können diese Elemente ignorieren oder inkonsistent rendern. Verwenden Sie für aktuelle Projekte CSSruby-Eigenschaften.
Praxis
@media (min-width: 962px) { .responsive-image{ width: 420px;}}