Discussion:
FF/Android kann kein Unicode in CSS?
(zu alt für eine Antwort)
Ralph Stahl
2022-09-16 11:13:48 UTC
Permalink
FF 104.2.0 Android

Moin!

Das Folgende ist ein bisschen OT, da es mehrere Themen berührt - neben
Mozilla FF auch noch Android und vor allem HTML/CSS. Ich hoffe trotzdem,
den einen oder anderen Tipp zu bekommen. Als Beispiel sei die Webseite
[1] genannt, dort sind die Pfeile zu sehen (nicht mit Android!).

In dieser responsiven Website möchte ich ein bestimmtes Zeichen - einen
sehr fetten Pfeil nach unten - darstellen, den es als HTML-Entity nicht
gibt, wohl aber als Unicode-Zeichen U+1F847. Ohne einen beim Leser
i.d.R. nicht vorhandenen Zeichensatz kann ich sowas nicht in einer
Zeichenkette darstellen. Aber ich kann mir mit einem CSS-Trick behelfen,
etwas vereinfacht so:

a.button::after {
content: '\1F847';
}

oder

a.button::after {
content: '🡇'; falls das andere Newsreader wiedergeben...
}

a.button ist hier das Element "Download-Button als Link" (kommt aus
Wordpress).

Das funktioniert in alles gängigen Desktop-Browsern, aber eben nicht mit
Android. Leider geht der Trend immer mehr zu Mobilgeräten zum Brausen,
und dort kommt eben nur ein blödes Kästchen statt des Pfeils. Das
beeinträchtigt die Funktion nicht, sieht aber Sch... aus.

Kennt jemand einen Trick außer der Verwendung einer Grafik, die dann auf
kleinen Bildschirmen auch wieder mistig aussieht, weil nur etwa 20x20 px
winzig?

Danke für die Geduld,
Ralph


[1] https://www.gartenverein-wetterschacht.de/downloads/
Marcel Logen
2022-09-16 12:37:31 UTC
Permalink
Post by Ralph Stahl
In dieser responsiven Website möchte ich ein bestimmtes Zeichen - einen
sehr fetten Pfeil nach unten - darstellen, den es als HTML-Entity nicht
gibt, wohl aber als Unicode-Zeichen U+1F847. Ohne einen beim Leser
i.d.R. nicht vorhandenen Zeichensatz kann ich sowas nicht in einer
Zeichenkette darstellen. Aber ich kann mir mit einem CSS-Trick
<https://www.fileformat.info/info/unicode/char/1f847/index.htm>:

| HTML Entity (decimal) &#129095;
| HTML Entity (hex) &#x1f847;

Hilft Dir das evtl. weiter, so daß Du ohne das CSS auskommen
könntest?

Marcel
--
╰────╮ ╭───────╮ ╭─╮ ╭───────────╮ ╭─╮..55..╭────────╮
╭───╯ ╭──╯ ╰───╯ ╰─╮ ..30..╰──────╮ ╭─╯ │ │ ╭─╮ ╰─────╮ ╰──
│ ╭─╮ │ ..22..╰───╮ ╭─╮ ╭────╯ ╰─────╯ ╰─╯ │ ╭───╮ ╰─╮
╰──╯ ╰─╯ ╰─╯ ╰─╯ ..52..╰─╯ ╰────╯
Ralph Stahl
2022-09-16 12:52:01 UTC
Permalink
Post by Marcel Logen
Post by Ralph Stahl
In dieser responsiven Website möchte ich ein bestimmtes Zeichen - einen
sehr fetten Pfeil nach unten - darstellen, den es als HTML-Entity nicht
gibt, wohl aber als Unicode-Zeichen U+1F847. Ohne einen beim Leser
i.d.R. nicht vorhandenen Zeichensatz kann ich sowas nicht in einer
Zeichenkette darstellen. Aber ich kann mir mit einem CSS-Trick
| HTML Entity (decimal) &#129095;
| HTML Entity (hex) &#x1f847;
Hilft Dir das evtl. weiter, so daß Du ohne das CSS auskommen
könntest?
Hab ich schon probiert. Man kann in den Button einen beliebigen Text
eintragen wie "runterladen &dArr;" oder so. Dennoch scheitert es bei
Android daran, dass so eine Entity wie oben nicht dargestellt werden kann.
Post by Marcel Logen
Marcel
Marcel Logen
2022-09-16 13:50:07 UTC
Permalink
Post by Ralph Stahl
Post by Marcel Logen
| HTML Entity (decimal) &#129095;
| HTML Entity (hex) &#x1f847;
Hilft Dir das evtl. weiter, so daß Du ohne das CSS auskommen
könntest?
Hab ich schon probiert. Man kann in den Button einen beliebigen Text
eintragen wie "runterladen &dArr;" oder so. Dennoch scheitert es bei
Android daran, dass so eine Entity wie oben nicht dargestellt werden kann.
Kämen vielleicht diese Zeichen in Frage?

U+27F1
U+2B07
U+2BC6

<https://www.unicode.org/charts/>

Die haben nicht so große Hex-Werte wie Dein U+1F847 und
werden von Android evtl. doch angezeigt.

Marcel
--
╭─╮ ╭─╮ ╭───╮ ╭─╮ ╭─╮ ╭──╮ ..67..
╯ ╰─╯ ╰───╮ ╭─╯ ╰─╮ │ ╰─╮ │ │ │ ╰─╮ ..67..
╭──────╯ ╭─────╯ ╭────╯ ╭─╯ ╰───╮ ╭──╯ ╰──╮ │ ╭─╯ ╭─╮
╰─────────╯ ╰─────────╯ ╰─╯ ..47..╰───╯ ╰────╯ ╰────╮
Ralph Stahl
2022-09-23 11:40:41 UTC
Permalink
Post by Marcel Logen
Post by Ralph Stahl
Post by Marcel Logen
| HTML Entity (decimal) &#129095;
| HTML Entity (hex) &#x1f847;
Hilft Dir das evtl. weiter, so daß Du ohne das CSS auskommen
könntest?
Hab ich schon probiert. Man kann in den Button einen beliebigen Text
eintragen wie "runterladen &dArr;" oder so. Dennoch scheitert es bei
Android daran, dass so eine Entity wie oben nicht dargestellt werden kann.
Kämen vielleicht diese Zeichen in Frage?
U+27F1
U+2B07
U+2BC6
<https://www.unicode.org/charts/>
Die haben nicht so große Hex-Werte wie Dein U+1F847 und
werden von Android evtl. doch angezeigt.
Marcel
Probiere ich gleich mal aus, danke!
Ralph Stahl
2022-09-23 19:34:02 UTC
Permalink
Post by Marcel Logen
Post by Ralph Stahl
Post by Marcel Logen
| HTML Entity (decimal) &#129095;
| HTML Entity (hex) &#x1f847;
Hilft Dir das evtl. weiter, so daß Du ohne das CSS auskommen
könntest?
Hab ich schon probiert. Man kann in den Button einen beliebigen Text
eintragen wie "runterladen &dArr;" oder so. Dennoch scheitert es bei
Android daran, dass so eine Entity wie oben nicht dargestellt werden kann.
Kämen vielleicht diese Zeichen in Frage?
U+27F1
U+2B07
U+2BC6
<https://www.unicode.org/charts/>
Die haben nicht so große Hex-Werte wie Dein U+1F847 und
werden von Android evtl. doch angezeigt.
Marcel
U+2B07 hat funktioniert, die anderen beiden ergeben aufm Händie auch nur
Klötzchen. Übrigens auch mit Chrome etc. Scheint also eher ein
System-Problem zu sein als eins des Browsers. Schlecht.

Danke!
Ralph
Axel Berger
2022-09-23 19:50:09 UTC
Permalink
Post by Ralph Stahl
Scheint also eher ein
System-Problem zu sein als eins des Browsers. Schlecht.
Browser bringen keine eigenen Fonts mit. Damit ein Zeichen angezeigt
werden kann, muß ein Font, der es enthält, irgendwo im System vorhanden
sein.
--
/¯\ No | Dipl.-Ing. F. Axel Berger Tel: +49/ 221/ 7771 8067
\ / HTML | Roald-Amundsen-Straße 2a Fax: +49/ 221/ 7771 8069
 X in | D-50829 Köln-Ossendorf http://berger-odenthal.de
/ \ Mail | -- No unannounced, large, binary attachments, please! --
Ralph Stahl
2022-09-23 19:54:25 UTC
Permalink
Post by Axel Berger
Post by Ralph Stahl
Scheint also eher ein
System-Problem zu sein als eins des Browsers. Schlecht.
Browser bringen keine eigenen Fonts mit. Damit ein Zeichen angezeigt
werden kann, muß ein Font, der es enthält, irgendwo im System vorhanden
sein.
Und wie bringe ich einem Androiden einen Font bei, der komplett Unicode
enthält? Naja, ist ja eigentlich Quatsche, ich brauche kein Chinesisch
oder so...

Ralph

Loading...