Icon Problem with Arabic Language

Page 1 of 3 123 LastLast
  1. #1

    Icon Problem with Arabic Language

    Dears,

    I have the following problem:

    1. I want to use your development tool with Arabic Language.
    2. I unified the font in all website as following:

    * {
        font-family: 'Simplified Arabic' !important;
    }
    3. When doing this, I lost the window icons as attached snapshots.
    Attached Thumbnails Click image for larger version. 

Name:	snap1.jpg 
Views:	69 
Size:	41.4 KB 
ID:	25405   Click image for larger version. 

Name:	snap2.jpg 
Views:	76 
Size:	43.8 KB 
ID:	25406   Click image for larger version. 

Name:	snap3.jpg 
Views:	64 
Size:	52.3 KB 
ID:	25407  
  2. #2
    Dear,

    This issue was working fine with version 3.x and 2.x which we purchase before.
  3. #3
    Hello @aliabdulla, and welcome to Ext.NET forums!

    You are getting that issue because you are replacing every font throughout the application with the arabic language one.

    In newer themes shipped with Ext.NET 5+, like Triton and Graphite, the icons were replaced by font icons, which you are replacing with that very very broad CSS rule.

    It may be enough if you exempt the CSS style for the x-fa class, but probably a little more CSS fiddling would be necessary.

    Ext.NET fonts should support arab charset using UTF-8, as you can see in this example: Miscellaneous > RTL.

    You'll see in the example sources we use escape characters but as you probably have proper input methods for these characters, you may as well just print them on screen without issues. I mean, all that without having to replace all fonts with the Simplified Arabic one.

    So I see three solutions for you here:

    a) exempt the CSS rule from the x-fa CSS class

    b) rely on UTF-8 for Arab Characters printing -- so that any browser with UTF-8 compatible fonts should work, and glyph fonts not be affected at all

    c) switch for one of the legacy themes that do not rely on fonts for glyphs (classic, crisp, neptune, etc) (and ensure you don't use font glyphs throughout your application!).

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Hello,

    Thanks for your reply, I tried to implement this solution:

    a) exempt the CSS rule from the x-fa CSS class
    By:

    :not(.x-fa) {
        font-family: 'Times New Roman', Times, serif;
    }
    But with no luck to overcome the problem.

    Could you guide me to the same?

    Regards,
  5. #5
    Dears,

    Could you please assist me in this issue as we need to publish the system urgently.

    Sorry for inconvenient.

    Regards,
    Ali
  6. #6
    Hello, @aliabdulla!

    We are trying some things here and will post back soon, hopefully with a solution for this CSS rule.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello again,

    I have just posted another reply when some tests didn't work, but something came up to mind -- and looks like it works! Have you tried just removing the 'dot' from the CSS class name in the rule you tried? It seems to work for me.

    :not(x-fa) {
        font-family: 'Times New Roman', Times, serif;
    }
    Keep an eye open for other places that might not use the font awesome for glyphs. Replacing all CSS rules like that is not really something Ext.NET is supposed to take so more issues may arise going forward. You should consider using UTF8 support for the characters and avoid further theme issues.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Hello Again,

    Unfortunately it didn't work for me.
    I checked in Chrome & Edge but with no luck to solve the problem.

    What is the default font for Ext.NET 5, I put "Times New Roman" just for test?
  9. #9
    Hello Ali!

    Quote Originally Posted by aliabdulla
    What is the default font for Ext.NET 5, I put "Times New Roman" just for test?
    The default font depends on the active theme, and it is not a single font, it falls over several compatible fonts available across different devices.

    For the theme you are using, Triton, it would follow this rule:

    font: 'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif;
    Can you provide a test case where the override does not work? Maybe if we can work around that case it would work for the rest of your application. Keeping in mind there's no guarantee it will work in all cases. Theme fonts can be replaced, but I'd say it would best have the specific CSS classes adjusted than doing something so broad as "everything" or "everything-except".

    Looking forward to your follow-up.
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Dears,

    Thanks a lot for your support.

    Find attached simple project demonstrating the problem.

    File: REMOVED
    Kindly, advice.
    Attached Thumbnails Click image for larger version. 

Name:	problem.jpg 
Views:	51 
Size:	83.5 KB 
ID:	25408  
    Last edited by geoffrey.mcgill; Aug 11, 2020 at 5:15 PM.
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] Problem DateField force language
    By xeo4.it in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Nov 05, 2013, 2:06 PM
  2. Replies: 0
    Last Post: Sep 11, 2013, 6:28 AM
  3. [CLOSED] [#248] ext:DateField language problem
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 30, 2013, 10:12 AM
  4. [CLOSED] Arabic RTL
    By imaa in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 29, 2011, 5:34 PM
  5. [CLOSED] [1.0] Regional and Language Settings Problem
    By kemalyigit in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 08, 2010, 8:52 AM

Posting Permissions