Using the "unicode-range" property for numerical values

Having incorporated a custom font using @font-face, I am attempting to showcase text in two different languages on a webpage with distinct fonts utilizing the font-face at rule in CSS and employing the unicode-range property. While the text appears correctly, there is an issue with the numbers. The Persian text displays English numbers instead of native ones.

<span class="text">test 123</span>
<span class="text">تست 123</span>
@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb(FaNum).eot');
    src: url('../_fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  
         url('../_fonts/IRANSansWeb(FaNum).woff2') format('woff2'),  
         url('../_fonts/IRANSansWeb(FaNum).woff') format('woff'),  
         url('../_fonts/IRANSansWeb(FaNum).ttf') format('truetype');
    unicode-range:U+0600-06FF;
}

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb.eot');
    src: url('../_fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  
         url('../_fonts/IRANSansWeb.woff2') format('woff2'),  
         url('../_fonts/IRANSansWeb.woff') format('woff'),  
         url('../_fonts/IRANSansWeb.ttf') format('truetype');
    unicode-range: U+0020-007F;
}

.text{font-family: 'MyFont';}

Answer №1

The FaNum1 font variant has been specifically defined for Arabic/Persian characters in the range of U+0600-06FF. This means that it will not be applied to Latin characters such as 1, 2, 3, and so on.

To address this, I have made modifications to the unicode-range properties so that Latin numerals (U+0030-0039) are now rendered using the FaNum font:

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb(FaNum).eot');
    src: url('../_fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb(FaNum).ttf') format('truetype');
    unicode-range: U+0600-06FF, U+0030-0039;
}

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb.eot');
    src: url('../_fonts/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb.ttf') format('truetype');
    unicode-range: U+0020-002F, U+003A-007F;
}

.text { font-family: 'MyFont'; }

In my opinion, instead of the above code, you could simply use the FaNum font for all text. Essentially, it is the same as the regular font but with Latin numerals displayed in Persian glyphs:

@font-face {
    font-family: 'MyFont';
    font-style: normal;
    font-weight: normal;
    src: url('../_fonts/IRANSansWeb(FaNum).eot');
    src: url('../_fonts/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
         url('../_fonts/IRANSansWeb(FaNum).woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
         url('../_fonts/IRANSansWeb(FaNum).woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
         url('../_fonts/IRANSansWeb(FaNum).ttf') format('truetype');
}

.text { font-family: 'MyFont'; }

Note

I believe the appropriate approach would be to use actual Persian numerals instead of Western numerals and relying on font changes for display:

<span class="text">test 123</span>
<span class="text">تست ۱۲۳</span>

Most modern operating systems support a standard Persian keyboard layout. By switching to Persian language input, you can easily type Persian numerals with the top row of your keyboard.

Additionally, programming languages typically provide tools for localizing and formatting strings and numbers.
Check out this post for guidance on number formatting in JavaScript, and refer to this article for information on number formatting in Java.


1: Certain Persian fonts offer a specialized variant where Western Numeral Unicode values are displayed using Eastern Numeral glyphs (for instance, representing the Unicode value U+0030 which corresponds to 1 as ‍۱).

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

Playing with background hues

Can anyone help me with this issue? I've been attempting to change the background color using jQuery upon document load, but it doesn't seem to be working. Any thoughts on what I might be doing wrong? http://jsfiddle.net/KczZd/2/ HTML: <d ...

What is the best way to apply a png overlay to each img tag when hovered over?

Here is the code snippet I am working with: <div class="latest-post"> <a href="http://localhost/blaze/2011/documentaries/test-big-thumb" rel="bookmark"> <span> <img width="140" height="100" src="http:// ...

Adjusting the position of the parent div by manipulating the bottom property

Is there a way to toggle the bottom property of a div when clicking its child anchor tag? <div class="nav" :class="{ 'full-width': isFullWidth }"> <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down">< ...

Check to see if the date selected from the HTML5 date picker is in the past compared to the current date

When working with HTML, I have a task where I need to input a date (mm/dd/yyyy) using the new HTML 5 date picker: <input name="date" type="date"> My goal is to validate whether the date entered is older than today's date. $this_date = $_POST ...

Create a scrollable div within a template

After discovering a template that I want to use for my personal project, I noticed a missing element... There's a div where content can be added. That's fine, but what if I add more content than fits in the space provided? The whole website beco ...

Guidelines for validating email input using jQuery

Although I am not utilizing the form tag, you can still achieve form functionality using jQuery Ajax. <input type="email" placeholder="Email" name="email" /> <input type="password" placeholder="Password ...

Switching images upon hovering in AngularJS

Looking to change images on hover in my Angular app, encountered site peculiarities making CSS solution impractical. Resorted to using ng-mouseenter and ng-mouseleave for image swapping instead. landing.jade img.share-button(src='images/btn_share.p ...

A guide to accurately accessing form data in Jquery Ajax requests

My beforeSend function is not working properly, as the background color does not change. I suspect it may be due to not correctly referencing the id variable posted from the form. Below is the relevant HTML and JS code: HTML <div id="rec<?php echo ...

Can you provide instructions on creating a marker like this in an unordered list?

Is there a way to create a bold line like this within a bulleted list easily? https://i.sstatic.net/pw8Zt.png I've tried using the border property, but it's not showing up correctly. Any quick and simple solutions for achieving this effect? Th ...

Is it possible to include a scroll bar at the top of an overflow-x <div> in addition to or instead of the bottom?

Can the scroll bar be positioned at the top of a table instead of just the bottom? <div style="overflow-x: auto;"> <table> ... ... </table> </div> I am looking for a way to have the scroll bar appear at the top of my t ...

Trouble opening attached html file with Asp.net and Google Charts integration

I am facing an issue with my Asp.Net page that includes a grid and an image. The image is a Google Charts chart with a URL of approximately 1600 characters. To send this content as an email attachment, I created an .htm file containing the grid and the ima ...

Utilize ngModel in conjunction with the contenteditable attribute

I am trying to bind a model with a tag that has contenteditable=true However, it seems like ngModel only functions with input, textarea or select elements: https://docs.angularjs.org/api/ng/directive/ngModel This is why the following code does not work ...

Implementing the disabled style for an ASP.net dropdownlist

Imagine I have an ASP.net dropdownlist set up like this: <asp:DropDownList ID="ddOwnershipDocumentType" class="msbdd" runat="server"> </asp:DropDownList> Let's take a look at the style definition for msdbdd: .msbdd { font-family: WM ...

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

The Ember.run.throttle method is not supported by the Object Function as it does not have a throttle method within the Ember.Mixin

I have a controller that has an onDragEvent function: controller = Em.Object.create( { onDragEvent: function() { console.log("Drag Event"); } }); Additionally, I have a Mixin called 'Event': Event = Ember.Mixin.create( { at ...

Is there a way to make an HTML link target the same as JavaScript window.opener?

Within my project, the main page is where users log in and access the primary tables. Additionally, there are numerous supplementary pages that open in separate windows. Once the login session times out, it is essential to restrict user access to any cont ...

The webpage lacked the functionality of smooth scrolling

I created a website which you can view here. Check out the code below: <div id="mainDiv" class="container"> <div id="header"> <div class="plc"> <h1><a href="#"></a></h1> ...

Top strategies for avoiding element tampering

What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...

jQuery slide adjusts the width of the slide as it transitions

The script is running smoothly. Check out the jsFiddle here The issue lies in its width adjustment when sliding (clicking "here"). It seems to be cutting off the width related to a 100px margin-left in #slider. Why does it seem to "jump" and how can this ...

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...