Erledigt - CSS Überstreichung ausschalten

draupnir · 25.02.2023

Hallo zusammen,
ich versuche gerade die Überstreichung in HTML5/CSS3 für einen besonderen Fall abzuschalten. Die Korrekturzeichen, die die class="_red_" haben, sollen nie überstrichen werden. (Hinweis: {6:} ist eine Ligatur, die zu dem Korrekturzeichen wird.)
Safari, Firefox und Edge liefern leider immer das falsche Ergebnis:

Mein Quelltext sieht so aus:


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>-DRAFT-</title>
    <style>._red_{ color: #FF0000; text-decoration: none; }</style>
    <style>._draft_{ color: #1E90FF; text-decoration: overline;}</style>
    <style>._draft_ ._red_ { color: #CCC; text-decoration: none;}</style>
    <style>._draftB_{ color: #999; font-weight: bold;}</style>
    <style>@font-face { font-family: "TimeSaverG40-eBook"; font-weight: normal; font-style: normal; src: url(fonts/TimeSaverG40-eBook.otf); }</style>
    <style>._cBody_{font-family: "TimeSaverG40-eBook"; line-height: 1.5rem; font-variant-ligatures: common-ligatures; }</style>
    <style>._ts_{font-family: "TimeSaverG40-eBook"; font-variant-ligatures: common-ligatures; font-weight: normal;}</style>
</head>
<body id="body-0" class="_cBody_">
<h4>Das Korrekturzeichen darf keine Überstreichung habe</h4>
<p id="p-0">Wort
    <span class ="_draft_">
        <span class ="_draftB_">
            <span class="_ts_">
                <span class="_red_">{6:}</span>
            </span>UJ:
        </span>
         »ist das richtig?«
    </span> , die ...
</p>
<p id="p-1">Wort
    <span class ="_draft_">
        <span class="_ts_">
            <span class="_red_">{6:}</span>
        </span>Richtig?
    </span> , die ...
</p>
<p id="p-2">Wort
    <span class="_red_">{6:}</span>
    weiter im Text ...
</p>
</body>
</html>

Geht das nicht oder sehe ich den Denkfehler nicht.

Schönen Abend,
– j.

draupnir · 26.02.2023

Im Licht des Sonntagmorgen scheint es so zu sein, dass man keine verschachtelte Eigenschaft in CSS aufheben kann, nur überschreiben. Also _red_ könnte dem Überstrich die Farbe weiß zu weisen, dann wäre es auf weißen Hintergrund nicht mehr zusehen, dies würde jedoch nur den blauen Überstrich von _draft_ überdecken, nicht abschalten.

So mit bleibt mir als Lösung nur, die Verschachtelung der zu verändern. Also _red_ darf nicht in _draft_ liegen:


<p id="p-0">Wort
    <span class ="_draftbox_"><span class="_ts_"><span class="_red_">{6:}</span></span><span class="_draft_"><span class ="_draftB_">UJ:</span>»ist das richtig?«</span></span> , die ...
</p>

Nur so kann ich verhindern, dass _red_ einen Überstrich bekommt. Hurrah! Dann werde ich meine Programmierung halt entsprechend ändern.

Danke für's Lesen, schönen Sonntag,
–j.

TPHeinz · 26.02.2023

Moin,
richtig verschachtelt das Ganze?
<h4>Das Korrekturzeichen darf keine Überstreichung habe</h4>
Wort
{6:}
»ist das richtig?«
 ...die 

 font-weight: normal; sollte mit in den style von _red_ 

hatte auch gerade fertig

draupnir · 26.02.2023

So sieht das Ergebnis aus:
( A ) Ein Markdown-Text mit eigenen Erweiterungen wird per Javascript mit REGEX (regular expressions) zu HTML mit den passenden CSS-Klassen, siehe ( B ) links Text in Edge, rechts HTML-Code.

Sinn der ganzen Übung: eine Basis für bessere E-Books (.epub)

Myhar · 17.07.2023

draupnir schrieb:
Im Licht des Sonntagmorgen scheint es so zu sein, dass man keine verschachtelte Eigenschaft in CSS aufheben kann, nur überschreiben.

Generell kann man im CSS nie eine Eigenschaft aufhaben, man kann Eigenschaften nur mit anderen Werten überschreiben.
Ein Element hat entweder die vom Browser/Benutzer vorgegebenen Standardwerte oder die überschriebenen Werte vom CSS file.

itac6 · 20.08.2023

draupnir schrieb:
Also _red_ könnte dem Überstrich die Farbe weiß zu weisen, dann wäre es auf weißen Hintergrund nicht mehr zusehen,

Wenn dann würde ich "transparent" nehmen.

Dudlhofer · 21.08.2023

Myhar schrieb:
Generell kann man im CSS nie eine Eigenschaft aufhaben,

Aufheben geht schon, und zwar mit dem Attributswert "unset". Siehe https://www.mediaevent.de/css/revert.html

Myhar · 24.08.2023

Stimmt, es gibt unset/revert etc. An die habe ich gar nicht gedacht, die verwende ich einfach zu selten.
unset sagt, dass die vom elternelement vererbten styles übernommen werden sollen, das könnte in dem Fall also funktionieren.