Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

I am currently working on a project involving the simulation of the Prague Astronomical Clock (). My goal is to display the glyphs representing signs of the zodiac, which are in the Unicode range U+263C-2653 along with other astronomical symbols.

My preference is for simple text glyphs, however many web browsers tend to automatically replace these characters with emojis as shown here:

https://i.sstatic.net/D2Tx5.png

Fortunately, there are non-emoji versions of these characters available such as:

https://i.sstatic.net/Lu1mz.png

I have attempted to address this issue by using the following code:

@font-face {
  font-family: 'NoEmojiAstronomy';
  src: local('Apple Symbol'); // I have experimented with various fonts and listing multiple fonts as well
  unicode-range: U+263C-2653;
}

.info-panel {
  background-color: $controls-background;
  color: $controls-text;
  font: 14px NoEmojiAstronomy, Arial, sans-serif;
  padding: 0.5em 2.5em 0.5em 0.5em;
  position: relative;

Unfortunately, I have not seen any improvement and continue to encounter emoji instead of the desired characters. Any suggestions on how to resolve this issue would be greatly appreciated.

cssfonts

Answer №1

Oh, the joy of experimenting with different fonts! I decided to explore more options by using the proper syntax for listing multiple fonts.

@font-face {
  font-family: 'NoEmojiAstronomy';
  src: local("Apple Symbol"), local("Segoe UI Symbol"), local("Arial Unicode MS"), local("Menlo"), local("sans-serif");
  unicode-range: U+263C-2653;
}

https://i.sstatic.net/MnYMM.png

Answer №2

No matter what type of font-family you select, there will always be certain emojis that are not supported by the operating system. The reason some emojis display properly is because the OS's built-in font has the necessary codes for them. Each operating system may show emojis differently. For example, Twitter uses a library to replace emojis with images. Take a look at the following example to see the differences.

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

<body>

    How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?

    <span id="emo">
        How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?
    </span>
    <script>
        twemoji.parse(document.querySelector('#emo'));
    </script>
</body>

I hope this information proves helpful to you.

Answer №3

Within the Unicode range U+263C..2653, some characters like U+2640, 2642, and 2648..2653 serve as emoji symbols. Despite their primary use as emojis, these characters can also function as plain text (non-emoji) characters. The ones excluded from emoji usage are U+263C..263F, 2641, and 2643..2647. Initially, when Japanese emoji were introduced to Unicode, a decision was made (which is now viewed unfavorably) to merge emojis with existing symbol characters whenever possible. In cases like yours, the display appearance can be altered through font selection.

Unicode has provided a method to indicate whether these characters should appear as emojis or non-emojis, regardless of the chosen font. This involves pairing the characters with a variation selector character - using U+FE0E for text style (non-emoji) and U+FE0F for emoji style.

Base Character Default in Browser With U+FE0E With U+FE0F

(The two right columns should display variations in text and emoji styles; any deviation indicates a font-related issue.)

For a comprehensive list of such variation sequences, visit here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Masonry layout organizes images in a vertical stack, with one image per row

After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...

javascriptcsstwitter-bootstrapjquery-masonrymasonry

What is the best way to prevent 2 divs from overlapping on a webpage?

I'm having trouble getting the smaller div to display right below the larger red div. I tried using the display block css property, but it doesn't seem to be working as expected. Unfortunately, I can't provide an image here, but you can vie ...

htmlcss

Tips for creating a dynamic sticky footer

Seeking out a solution for a sticky footer that adjusts its height based on the width of the browser. Creating sticky footers in flexible designs can be tricky. I've come across various suggestions, discussions, and fixes for implementing sticky foot ...

cssfluid-layoutsticky-footer

What is the best way to incorporate the parallax effect into a v-carousel?

Currently, I have a "v-carousel" containing multiple images and now I am looking to incorporate a parallax effect into it, similar to "v-parallax". <v-carousel cycle height="600" hide-delimiter-background show-arrows-on-hover> <v-carousel-i ...

cssvue.jsvuetify.js

Struggling to align menu items horizontally with CSS? Using the inline property just isn't cutting it

I'm struggling to get my menu to display horizontally, no matter what I try. What am I doing wrong? I think the issue might be with the inline option, but I'm not certain. If someone could help correct my code, I would be very grateful. Thank you ...

htmlcss

Tips for confining a float within a div with fluctuating space

I have a scenario where I have multiple divs ('group') containing text, and there is a floated div ('toggle') in the bottom corner. The current code works well if the text length in 'group' is consistent, but the position of t ...

csshtmlcss-floatabsolute

Unusual shadow cast by the box's silhouette

I am currently facing an issue with a box and its shadow. When I close the box, a different shadow lingers behind. I have tried troubleshooting this problem but cannot pinpoint the source. I have included the relevant code files in the specified folders. I ...

javascripthtmlcss

Tips for resizing the background to match the font size on a canvas marker in Google Maps

Check out my jsFiddle code below: var marker = new google.maps.Marker({ position: new google.maps.LatLng(-25.363882,131.044922), map: map, title:"Hello World!", icon: CanvasCrear("hola", 15) ...

javascriptcsshtmlgoogle-mapscanvas

Utilizing identical CSS for both mobile and desktop interfaces, while customizing margins and paddings separately

I am facing a problem on my website where the padding and margins appear differently on different devices. I have compared screenshots of the site on an Android device and my desktop PC: Site displayed on mobile device: Desktop view: Below is the CSS co ...

androidhtmlcssmobile

Integrate CSS and Javascript Plugins into your Ruby on Rails application

I am utilizing an HTML, CSS, and JS template to design the interface for my Rails application. Within this template, there are several plug-ins that are required in both CSS and JS formats. I have stored these plug-ins within the "/assets/plugins/" directo ...

javascriptcssruby-on-railsplugins

Bootstrap: Create a square by setting the height equal to the width of the .span2 element

I'm looking to create a div that is the height of a ".span2" (essentially a square) and is also responsive. Here's what I have so far: <div class="span2 square>Hello</div> .span {height: @span2;} However, I haven't been able to ...

csstwitter-bootstrap

How come the changes in my react component's CSS are not updating in real-time?

After integrating redux into my create-react-app project, I've been struggling to implement a navigator that highlights the active "page link." To achieve this functionality, I am using a combination of react hooks (to maintain the current page state) ...

cssreactjswebpacksassmaterial-ui

What is the preferred method for writing `*zoom: 1;` in CSS?

Trying to create my code, I decided to borrow some CSS files from older code. However, upon running yarn build I encountered several errors like: ▲ [WARNING] Expected identifier but found "*" [css-syntax-error] <stdin>:122:2: 122 │ * ...

css

Adding a PDF generated from an HTML div to an email using Java

I am looking for a solution to convert the contents of an HTML div tag into a PDF file while preserving its associated CSS. This is essential as I will be using Java on the back-end to send emails, and I need to attach the PDF with the CSS intact when send ...

javascriptjavahtmlcssjakarta-mail

Manipulating the 'display' attribute with jQuery

Is there a way to show an element that has been hidden using the following CSS? .pds-pd-link { display: none !important; } Can jQuery be used to enable the display of the .pds-pd-link CSS? For example, would $(.pds-pd-link).css("display",""); ...

jquerycss

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

css

hide the side menu automatically - wordpress

is the official website created using a WordPress platform. Upon visiting the site, you will immediately notice a prominent "showcase" banner positioned right below the navigation bar. On the right side, there are additional posts that users can choose t ...

htmlcsswordpress

Displaying a loading spinner image as PHP script runs

Hey there! I've been experimenting with using a script to show a loading bar while my PHP code is running. I followed the instructions on this website, but even after following the exact steps, my loading bar still isn't showing up. Any suggestio ...

javascriptphpjquerycss

Space in the middle of a body and a div

After extensively searching for a solution to the issue plaguing my website, I found that there was always an annoying gap at the top of the page. Despite trying various solutions, none seemed to work. Upon inspecting the website in Firefox, I discovered t ...

htmlcss

What is the best way to center a fixed position background image within a container that is slightly shifted from the top of the viewport?

How can I center a background-image vertically, which has a fixed background-attachment and is positioned 100px from the top? The background-size property is set to cover for horizontal centering but the vertical alignment is off. Below is the HTML code: ...

javascriptjqueryhtmlcss