Unicode problem in android browser

HTML & CSS
1

While these (Unicode, I think) characters - ◖ and ◗ are correctly displayed both on a PC browser and on an android browser, these other -  and  - are displayed correctly only on a PC browser, not on android. To be honest even in this Sitepoint post I cannot see them correctly.
The following code  and  doesn’t work.
I add a screenshot, where you can see all the special characters working (on a PC browser).

simboli
simboli902×182 46.5 KB

There is a way to display that symbol as a character, without using an image?

I know that these - ◒ and ◓ - work, but in a PC browser they are quite ugly.

EDIT

They are ugly because of my wrong css (font-family: opensymbol). Commenting that css rule I can now use ◒ and ◓ correctly.

EDIT

Or better: almost solved, because on android they are displayed not as expected (not as on PC). I attach this new screenshot:

Screenshot_20230914-084948
Screenshot_20230914-084948720×432 45 KB

1 Like
2

You still have to make sure there’s a font available to each browser that includes those characters. Obviously the best way is to use a web font.

1 Like
3

Indeed I thought the same… But a web font can be heavy to load, can’t it?

A small svg could be better?

4

It can be very light, especially if you just serve up the characters you need. Google fonts let you just download the actual characters you need, for example. I’m not sure how to do this with self-hosted fonts, but it could be worth looking into.

1 Like
5

But also this could be a solution

 <style>
  .top {
        display: inline-block;
        margin: 0;
        line-height: 0.6em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 50px;
        background: linear-gradient(to bottom, olive 60%, transparent 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
 
 .bottom {
        display: inline-block;
        margin: 0;
        line-height: 0.6em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 50px;
        background: linear-gradient(to top, olive 60%, transparent 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
 
 <p>
     <span class="top">◓</span>
     <span class="bottom">◒</span>
 </p>

Found here.

1 Like
6

However I have a problem with that code: it doesn’t work as expected in android (Vivaldi) browsers.
Even after deleting the browser cache, I still see this
bad
instead of this
good

Where I’m wrong?

7

Maybe it’s easier just to dispense with fonts and do something like this:

span {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  display: inline-block;
  background: linear-gradient(to bottom, black 50%, transparent 50%);
}

I don’t have an Android device to test on though.

2 Likes
8

Thank you. I will try this. (Sorry: I didn’t see notification of your answer)

1 Like
9

A very smart solution. Really. But so far I managed to get it working on a desktop browser, not on an android (Vivaldi) one: nothing appears. Even with a .8em (instead of .5em).

EDIT

Maybe is a cache problem (server side). I will see later.

1 Like
10

Ralph’s code should work in every modern browser as it’s just a basic linear gradient. :slight_smile:

2 Likes
11

Yes. I guess that it’s a server side cache problem.

2 Likes
12

Yes: a (server-side) chache problem: now it’s ok.
Thank you very, very much! :smiley:

2 Likes