PDA

View Full Version : Icon Problem with Arabic Language



aliabdulla
Aug 07, 2020, 6:48 PM
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.

aliabdulla
Aug 08, 2020, 11:07 AM
Dear,

This issue was working fine with version 3.x and 2.x which we purchase before.

fabricio.murta
Aug 08, 2020, 10:15 PM
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 (https://examples5.ext.net/#/Miscellaneous/RTL/Overview/).

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!

aliabdulla
Aug 09, 2020, 12:55 PM
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,

aliabdulla
Aug 10, 2020, 11:38 AM
Dears,

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

Sorry for inconvenient.

Regards,
Ali

fabricio.murta
Aug 10, 2020, 6:06 PM
Hello, @aliabdulla!

We are trying some things here and will post back soon, hopefully with a solution for this CSS rule.

fabricio.murta
Aug 10, 2020, 6:15 PM
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!

aliabdulla
Aug 10, 2020, 7:41 PM
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?

fabricio.murta
Aug 10, 2020, 8:34 PM
Hello Ali!


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.

aliabdulla
Aug 11, 2020, 7:57 AM
Dears,

Thanks a lot for your support.

Find attached simple project demonstrating the problem.

File: REMOVED
Kindly, advice.

geoffrey.mcgill
Aug 11, 2020, 6:17 PM
HI aliabdulla,

Please share a .zip file with your project, plus remove all files and folders from the .zip file that are unnecessary, such as the /bin and /obj folders.

aliabdulla
Aug 11, 2020, 6:38 PM
Hi,

Find here: https://bccibh-my.sharepoint.com/:u:/g/personal/alaswad_bcci_bh/EZYAzyFynKtFmZIpzCW6HqABy0rsSp8gYHAXIsnj2UJivA?e=3 p6nLA

geoffrey.mcgill
Aug 11, 2020, 7:56 PM
The sample project you provided does not build and cannot run. I was able to drop the .css and font files into another simple demo project to test.

There are not a lot of options here. You are globally overriding all fonts in your application, including the icon fonts. There's not much we can do to fix that, and I don't think any css rule(s) are going to help solve all failing scenarios.

At the moment, I can only see two options:

Option 1. Create local copies of the Triton theme .css files, including theme-triton-all_1.css and theme-triton-all_2.css, then replace all instances of 'Open Sans' with 'Simplified Arabic'. Then you'll need to use those .css files instead of the embedded theme files that Ext.NET includes.

Option 2. We might be able to make a custom Theme that will generate basically the same as Option 1, but this is going to take some time for us to investigate. The end result should theoretically be exactly the same as Option 1.

Given Option 1 is something you can do right now to hopefully fix the issue, I would recommend exploring Option 1 first.

aliabdulla
Aug 11, 2020, 8:15 PM
Hi Again,

How I can create the local copy of the CSS for Option 1?

Kindly, advice.

aliabdulla
Aug 15, 2020, 9:30 AM
Dears,

Any updates?

fabricio.murta
Aug 17, 2020, 4:34 PM
Hello aliabdulla, sorry for the delay responding you!

You can just download the referenced CSS in any Ext.NET-generated page and have it work locally. If you're having trouble with the ext-axd URL, you can switch ResourceManager to CDN resources with the RenderScripts="CDN" property. This can be set either site-wide in Web.config or page-wise in the ResourceManager definition.

Hope this helps!

aliabdulla
Aug 19, 2020, 7:53 AM
Dears,

I did the required replacement for font name in the specified files but with no luck to solve the problem.

Find below the resulted files:

theme-triton-all_1.css: https://bccibh-my.sharepoint.com/:u:/g/personal/alaswad_bcci_bh/EUAPg7apYmFIhi1DXsPryAQBTfCFQz9D1FMuWo5_Oqz0Xw?e=a MMrEc
theme-triton-all_2.css: https://bccibh-my.sharepoint.com/:u:/g/personal/alaswad_bcci_bh/Ec5WyGNAONNEqSl41kSlTMIBfaHR5bTf0VXwYKkEmMCfkA?e=l hMe12

Sorry for inconvenient.

Kindly, advice.

geoffrey.mcgill
Aug 19, 2020, 10:30 AM
The .css you provided looks very different from the ones shipped with Ext.NET, and I don't see any reference to 'Simplified Arabic' or even 'Open Sans' in your .css files.

https://speed.ext.net/ext.net/5.2.0/extjs/packages/theme-triton/build/resources/theme-triton-all_1.css
https://speed.ext.net/ext.net/5.2.0/extjs/packages/theme-triton/build/resources/theme-triton-all_2.css

aliabdulla
Aug 20, 2020, 4:18 PM
Hello,

I could not solve the problem by replacing 'Open Sans' with required Arabic font i.e. 'Simplified Arabic'.

I have replaced the whole line with required font:


'Open Sans', 'Helvetica Neue', helvetica, arial, verdana, sans-serif

Then, everything comes fine.

Thanks.

aliabdulla
Aug 20, 2020, 5:03 PM
Is there a way to avoid loading CSS files beside local files while loading the page?

geoffrey.mcgill
Aug 20, 2020, 5:23 PM
Is there a way to avoid loading CSS files beside local files while loading the page?

I'm not sure I understand your request. Can you provide additional details please.

aliabdulla
Aug 21, 2020, 6:08 PM
Dear @geoffrey.mcgill,

Thanks for your kind reply.

Look into attached photo.

25414

Is there a way to avoid the auto downloaded CSS file?

Any drawback if I keep both loaded in the page?

fabricio.murta
Sep 08, 2020, 10:58 PM
Hello, @aliabdulla!

You can selectively disable what is going to be included by Ext.NET or, provided you are having the local copies changed (and as long as you clone every CSS file -- which is not a big amount anyway), you can give your ext:ResourceManager the RenderStyles="File" so that, instead of loading the CSS resource from that AXD path, loads from a plain corresponding path in your website!..

For instance, the theme file, its "auto download" instance would have originally an URL like

http://localhost:51299/extjs/packages/theme_triton/build/resources/theme-triton-all-embedded-css/ext.axd?v=5.2.0

http://localhost:51299/Ext.Net/extjs/packages/theme-triton/build/resources/theme-triton-all.css

So what you can do to simplify the task is, switch to RenderStyles="File", then note which resource files are missing. Then switch back to the default (RenderStyles="Embedded") and download its contents.

The advantage of letting the embedded be downloaded is that you can just override what you want to differ, so your custom file will be smaller and easier to maintain.

The disadvantage in case you copy over the whole file and override just what you need is actually about size as well; the first download (before the browser caches the file) will be double as big for the resources. And the CSS processing may also be reasonably harder as the CSS files are quite extensive.

So I believe best is to keep in your local version you manually include only and only what you need to override.

If you want to just have the whole CSS file handy, then you need to take extra care to find all CSS files needed throughout the page (or the application in case you use this rule application-wide), and then set the RenderStyles option. Usually you'd get extra CSS files in pages you use charts, but some components may as well import CSS (although that's not very common if it happens at all).

Hope this helps!