nicht angemeldet
Der Martin
Matthias Apsel
MudGuard
Matthias Apsel
Gunnar Bittersmann
Der Martin
Gunnar Bittersmann
Matthias Apsel
Hallo liebe CSS-Kenner,
für ein internes, nur für mich bestimmtes HTML-Dokument bin ich auf den Gedanken gekommen, Schrift nach links geneigt darzustellen. Damit möchte ich in Verbindung mit einem Handschrift-Font den Eindruck einer Linkshänder-Schrift erzeugen.
Aber wie stelle ich das an? Natürlich ist mir font-style: italic; geläufig. Damit wähle ich aber aus der betreffenden Schriftart nur die Kursiv-Variante aus oder - falls ein solcher Schriftschnitt nicht existiert - "bestelle" beim Font-Manager des GUI eine nach rechts geneigte Darstellung der Basis-Schrift.
Nach links geneigt? Hmm, Fehlanzeige. 😟
Dann bin ich auf transform:skewX() gestoßen. Das sollte doch helfen!
Im Wiki finde ich dazu den Satz: "Die Elemente [...] werden zu Parallelogrammen verzerrt - leider aber auch der Text der beinhaltenden Links!"
Wieso leider? Das ist doch genau das, was ich suche! Doch leider stimmt das so nicht ganz.
Rolf B
Tabellenkalk<button>Edit</button>
button
{ font-weight: bold;
transform: skewX(15deg);
}
Works as expected: Der gesamte Button wird zu einem leicht nach links geneigten Parallelogramm verformt, einschließlich der Beschriftung. Aber ich will ja nicht den Container verformen, sondern nur die Schrift. Also variiere ich das Beispiel:
<button><span>Edit</span></button>
button span
{ font-weight: bold;
transform: skewX(15deg);
}
Und nu? Plötzlich hat transform:skewX() gar keine Wirkung mehr! An der fetten Textdarstellung sehe ich aber wenigstens, dass der Selektor im Prinzip greift.
Habe ich was falsch verstanden oder angewendet?
Oder geht das, was ich vorhabe, einfach nicht?
Live long and pros healthy,
Martin
Hallo Der Martin,
display: inline-block muss dazu.
Bis demnächst
Matthias
Hallo Matthias,
display: inline-block muss dazu.
dann sollte das im Wiki aber auch beschrieben sein. Ich habe das mal ergänzt.
Live long and pros healthy,
Martin
Hallo Der Martin,
dann sollte das im Wiki aber auch beschrieben sein. Ich habe das mal ergänzt.
Vielen lieben Dank. Die Erklärung trifft es mMn. gut.
Bis demnächst
Matthias
Hallo Matthias Apsel,
Hallo Der Martin,
Vielen lieben Dank. Die Erklärung trifft es mMn. gut.
„Entgegen der Intuition stehen positive Werte für eine Verzerrung ''gegen'' den Uhrzeigersinn.“
Woher nimmst du denn die Intuition? Positive Werte bewirken eine Verzerrung in mathematisch positivem Drehsinn, also entgegen dem Uhrzeigersinn.
Bis demnächst
Matthias
Moin,
„Entgegen der Intuition stehen positive Werte für eine Verzerrung ''gegen'' den Uhrzeigersinn.“
Woher nimmst du denn die Intuition?
aus dem Leben. Überall, wo etwas durch Drehen verstellt wird, steht eine Rechtsdrehung (also im Uhrzeigersinn) für "mehr": Lautstärke, Heizkörper-Thermostat, Backofentemperatur, Lichtdimmer, Lüfterdrehzahl ...
Auch Skalen von analogen Messinstrumenten haben im Normalfall im Uhrzeigersinn zunehmende Werte. Und die Uhr selbst läuft auch im Uhrzeigersinn, wer hätte das gedacht? Außer in Bayern.
Positive Werte bewirken eine Verzerrung in mathematisch positivem Drehsinn, also entgegen dem Uhrzeigersinn.
Genau. Das erschien mir damals in der Schule schon eigenartig. Es widerspricht jeglicher Alltagserfahrung. Aber das tun die Mathematiker ja gern.
Live long and pros healthy,
Martin
Hallo Der Martin,
Positive Werte bewirken eine Verzerrung in mathematisch positivem Drehsinn, also entgegen dem Uhrzeigersinn.
Genau. Das erschien mir damals in der Schule schon eigenartig. Es widerspricht jeglicher Alltagserfahrung. Aber das tun die Mathematiker ja gern.
Der positive Drehsinn ist derjenige, der die positve x-Achse auf kürzestem Weg in die positve y-Achse überführt. Klingt in meinen Augen auch sinnvoll.
Bis demnächst
Matthias
Hallo,
Der positive Drehsinn ist derjenige, der die positve x-Achse auf kürzestem Weg in die positve y-Achse überführt. Klingt in meinen Augen auch sinnvoll.
für mich klingt es "korrekt, aber an den Haaren herbeigezogen", und nicht wirklich naheliegend.
Eben typisch Mathematiker. 😉
Live long and pros healthy,
Martin
Hallo Der Martin,
Der positive Drehsinn ist derjenige, der die positve x-Achse auf kürzestem Weg in die positve y-Achse überführt. Klingt in meinen Augen auch sinnvoll.
für mich klingt es "korrekt, aber an den Haaren herbeigezogen", und nicht wirklich naheliegend.
Eben typisch Mathematiker. 😉
Naja, wenn man bedenkt, dass die y-Achse „Ordinate“ (etwa auch „die Zugeordnete“) heißt, ist es für mich nicht nur naheliegend, sondern auch folgerichtig, zwingend und konsequent.
Eben typisch Mathematiker. 😉
Bis demnächst
Matthias
@@Matthias Apsel
„Entgegen der Intuition stehen positive Werte für eine Verzerrung ''gegen'' den Uhrzeigersinn.“
Woher nimmst du denn die Intuition? Positive Werte bewirken eine Verzerrung in mathematisch positivem Drehsinn, also entgegen dem Uhrzeigersinn.
Was der mathematisch positive Drehsinn ist, ist CSS schnurzpiepegal. CSS ist anders. Ein positiver Winkel[1] (bspw. transform: rotate(9deg) oder kurz rotate: 9deg) bewirkt eine Drehung im Uhrzeigersinn.
Die Drehung vollzieht sich (in karthesischen Koordinaten) schon so wie in der Mathematik, nur dass die x-Achse zwar wie in der Mathematik nach rechts; die y-Achse in CSS aber nach unten zeigt. Das Ganze wird also gespiegelt, was die Drehrichtung umkehrt.
Das ist wohl auch der Grund, warum man skewY mit einem positivem Winkel als Scherung im Uhrzeigersinn wahrnimmt; skewX mit einem positivem Winkel hingegen als Scherung entgegen dem Uhrzeigersinn.
Bei skewY bleibt die x-Koordinate erhalten: xʹ = x; die y-Koordinate wird bei positivem Winkel β für positive x größer, für negative x keiner: yʹ = y + x tan β. Zum Nachrechnen: die Transformationsmatrix.
Völlig analog bei skewX: y-Koordinate bleibt erhalten: yʹ = y; die x-Koordinate wird bei positivem Winkel α für positive y größer, für negative y keiner: xʹ = x + y tan α.
😷 LLAP
mit „positiver Winkel“ sind jeweils kleine gemeint; bei Rotation bis 180°; bei Scherung bis 90° ↩︎
Hi,
<button><span>Edit</span></button>button span { font-weight: bold; transform: skewX(15deg); }Und nu? Plötzlich hat transform:skewX() gar keine Wirkung mehr! An der fetten Textdarstellung sehe ich aber wenigstens, dass der Selektor im Prinzip greift.
Reine Vermutung: transform greift evtl. nur bei Blöcken. Gib dem Span doch mal ein display:inline-block; mit.
cu,
Andreas a/k/a MudGuard
Reine Vermutung: transform greift evtl. nur bei Blöcken.
Jepp!
p, h1, h2 {
-ms-transform: skewX(30deg);
-webkit-transform: skewX(30deg);
transform: skewX(30deg);
}
Hallo Raketenwilli,
Reine Vermutung: transform greift evtl. nur bei Blöcken.
Jepp!
Genauer:
transformable element
A transformable element is an element in one of these categories:
all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],
https://www.w3.org/TR/css-transforms-1/#transformable-element
Bis demnächst
Matthias
Hi Martin,
lass´ das bloß nicht den Gunnar hören, auch wenn das Dokument für den Eigenbedarf bestimmt ist- das schreit ja nicht gewährleisteter Barrierefreieheit :-D
Hallo Hans,
lass´ das bloß nicht den Gunnar hören, auch wenn das Dokument für den Eigenbedarf bestimmt ist- das schreit ja nicht gewährleisteter Barrierefreieheit :-D
Mit dieser Begründung wäre ja auch (normal-)kursiver Text nicht barierrefrei.
Bis demnächst
Matthias
Hallo,
je nachdem, wie die "Handschrift-Font" aussieht, könnte das tatsächlich zu Problemen führen.
Gruß Hans
@@Hans
lass´ das bloß nicht den Gunnar hören, auch wenn das Dokument für den Eigenbedarf bestimmt ist- das schreit ja nicht gewährleisteter Barrierefreieheit :-D
Ich würde eher schreien, dass man Schriften nicht durch Transformationen verunstalten sollte … Aber wenn’s nur für Den Martin selbst ist – der ist ja eh ein Typografie-Banause.
Übrigens liefert die Suche nach handwritten font left slanted u.a. diese Seite.
😷 LLAP
PS: Den Strich da hinter „lass“ – lass den bloß nicht den Gunnar sehen. Das ist kein Apostroph. Und überhaupt gehört da gar kein Apostroph hin.
Hallo,
der ist ja eh ein Typografie-Banause.
ich würde es anders ausdrücken: Der hat seine eigenen Vorstellungen dazu, was gut aussieht und was nicht.
Übrigens liefert die Suche nach handwritten font left slanted u.a. diese Seite.
Dass es Fonts gibt, die von Natur aus eine Linksneigung haben, war mir bewusst (und ja, auch der Begriff slant ist mir geläufig). Ich suchte aber eine generische Lösung.
Live long and pros healthy,
Martin
Hi Gunnar,
stimmt, das ist eher ein Anführungszeichen,habe das richtige Apostroph auf meiner ausländischen Tastatur nicht auf Anhieb gefunden. Da man den Imperativ (imho) auch als "lasse" bilden kann, halte ich das Apostroph bei weggelassenem "e" durchaus für korrekt, lasse mich aber gerne eines Besseren belehren.
Gruß Hans
Hallo,
stimmt, das ist eher ein Anführungszeichen
nein, es ist auch kein Anführungszeichen; es ist ein Akzentzeichen, in diesem Fall ein Akut.
Da man den Imperativ (imho) auch als "lasse" bilden kann, halte ich das Apostroph bei weggelassenem "e" durchaus für korrekt
Korrekt, aber die Imperativ-Form ohne -e ist heute eher der Regelfall, so dass ich an dieser Stelle auch kein Apostroph mehr setzen würde.
Live long and pros healthy,
Martin
Hi,
so dass ich an dieser Stelle auch kein Apostroph mehr setzen würde.
wenn wir schon beim Genaunehmen sind: "auch keinen Apostroph mehr".
Der, nicht das, Apostroph.
cu,
Andreas a/k/a MudGuard
@@Der Martin
… so dass ich an dieser Stelle auch kein Apostroph mehr setzen würde.
Aber an anderer Stelle – ‚kein’ Apostroph‘ mit Apostroph, wenn du die Akkusativform ‚keinen‘ nicht ausschreibst. Oder kann ‚Apostroph‘ auch sächlich sein: ‚das Apostroph‘? Laut Wiktionary nicht.
Und es heißt im Akkusativ auch nicht ‚den Apostrophen‘. Was für Fallstricke doch die deutsche Sprache bereithält.
😷 LLAP
Mahlzeit,
… so dass ich an dieser Stelle auch kein Apostroph mehr setzen würde.
Aber an anderer Stelle – ‚kein’ Apostroph‘ mit Apostroph, wenn du die Akkusativform ‚keinen‘ nicht ausschreibst. Oder kann ‚Apostroph‘ auch sächlich sein: ‚das Apostroph‘? Laut Wiktionary nicht.
Wiktionary kann mich mal - ich habe in der Schule das Apostroph gelernt. Meine Deutschlehrerin in der 5. Klasse hat sogar einigen Schülern den Apostroph abzugewöhnen versucht, denn "das sei eine schwäbische Unart".
Ob das Apostroph vor 40 Jahren vielleicht mal richtig war? Keine Ahnung. Aber selbst wenn nicht, bleibe ich bei meiner jahrzehntelangen Gewohnheit. 😛
Live long and pros healthy,
Martin
@@Der Martin
Wiktionary kann mich mal - ich habe in der Schule das Apostroph gelernt. Meine Deutschlehrerin in der 5. Klasse hat sogar einigen Schülern den Apostroph abzugewöhnen versucht, denn "das sei eine schwäbische Unart".
Bist du sicher, dass sie nicht „das Hochkomma“ gesagt hat?
😷 LLAP
ich habe in der Schule das Apostroph gelernt. Meine Deutschlehrerin in der 5. Klasse hat sogar einigen Schülern den Apostroph abzugewöhnen versucht, denn "das sei eine schwäbische Unart".
Bist du sicher, dass sie nicht „das Hochkomma“ gesagt hat?
ja, bin ich. Den Ausdruck Hochkomma habe ich erst in den späten 90er-Jahren überhaupt kennengelernt.
Überhaupt wäre das Apostroph ja auch in bester Gesellschaft: Das Komma, das Semikolon.
Live long and pros healthy,
Martin
Hallo Gunnar,
TIL: Schwache Deklination im Deutschen bekommt ein -en im Akkusativ.
Apostroph ist dafür offenbar zu stark und bekommt darum kein en.
Rolf
@@Der Martin
Dann bin ich auf transform:skewX() gestoßen. Das sollte doch helfen!
Ich wollte schon ansetzen und sagen: ‚In einer vernünftigen™ Dokumentation steht, auf welche Elemente die Eigenschaft wirkt‘ – aber da steht bloß: “Applies to transformable elements” – ohne weitere Erklärung, was das heißen soll.
Zumindest ist unten die Spec verlinkt, und dort ist transformable elements verlinkt. Allerdings muss man auch da erst das Rätsel lösen, dass Inline-Elemente nicht zu “all elements whose layout is governed by the CSS box model” gehören.
Wie schon gesagt, inline blocks gehören dazu. Aber auch flexbox items und grid items, d.h. auch button { display: flex } bzw. grid versetzt das Kind-span in den Zustand, transformable zu sein.
div anstelle von span wäre das von Hause aus. Funktioniert auch in Browsern, ist aber nicht erlaubt.
😷 LLAP
Hallo Gunnar,
Ich wollte schon ansetzen und sagen: ‚In einer vernünftigen™ Dokumentation steht, auf welche Elemente die Eigenschaft wirkt‘ – aber da steht bloß: “Applies to transformable elements” – ohne weitere Erklärung, was das heißen soll.
ja, ich weiß schon, dass du unser Wiki bestenfalls als Sekundärquelle betrachtest und lieber auf die Primärquelle zurückgreifst. Kann ich auch nachvollziehen.
Wie schon gesagt, inline blocks gehören dazu. Aber auch flexbox items und grid items, d.h. auch
button { display: flex }bzw.gridversetzt das Kind-spanin den Zustand, transformable zu sein.
Ich habe einen diesbezüglichen Hinweis im Wiki hinzugefügt.
Live long and pros healthy,
Martin
Hallo Der Martin,
für ein internes, nur für mich bestimmtes HTML-Dokument bin ich auf den Gedanken gekommen, Schrift nach links geneigt darzustellen. Damit möchte ich in Verbindung mit einem Handschrift-Font den Eindruck einer Linkshänder-Schrift erzeugen.
Einer meiner Klassenleiter hat eine stark nach links geneigte Handschrift.
Ich meine aber nicht, dass er Linkshänder war. Zum anderen beobachte ich manchmal, dass das Blatt beim Schreiben stark gedreht wird, was auch zu einer solchen Schriftneigung führen kann.
Bis demnächst
Matthias
Hallo Matthias,
Einer meiner Klassenleiter hat eine stark nach links geneigte Handschrift.
Ich meine aber nicht, dass er Linkshänder war. Zum anderen beobachte ich manchmal, dass das Blatt beim Schreiben stark gedreht wird, was auch zu einer solchen Schriftneigung führen kann.
ich möchte auch nicht den Eindruck erwecken, dass Linkshändigkeit und eine nach links geneigte Handschrift zwangsläufig miteinander zusammenhängen. Aber die Erfahrung zeigt, dass die Handschrift von Linkshändern meistens ein bisschen nach links geneigt ist, bei Rechtshändern dagegen in der Regel leicht nach rechts.
Es ist keine Schwarz-Weiß-Logik, eher so eine 80/20-Zuordnung.
Live long and pros healthy,
Martin
Hallo,
Linkshändigkeit und eine nach links geneigte Handschrift
Bei einem mir bekannten Linkshänder variierte die Neigung zeilenweise mal links mal rechts, ohne dass ich da ein System wahrnahm…
Gruß
Kalk
@@Matthias Apsel
Heißt das im Klartext: vorher stinkendfaul, jetzt faul? 😆
😷 LLAP
Hallo Gunnar Bittersmann,
Heißt das im Klartext: vorher stinkendfaul, jetzt faul? 😆
Kann man so sagen. Und sehr interessenbezogen.
Bis demnächst
Matthias