0

I have an application, where the text is in English and Gujarati language. The English and Gujarati text is there on the same page. like:

Name/નામ

Now the problem is that if I have Verdana or some other font in the body tag applied through css, the font is applied on the Gujarati text as well and the text is sometimes not visible correctly, as my application uses absolute positioning (and the texts are in some div).

If i use shruti font, then English text is not displayed correctly.

Applying Verdana in Name and shruti in નામ is not feasible as I will have to change my application a lot for that.

Please let me know a alternative/solution.

Ankit
  • 3,083
  • 7
  • 35
  • 59

1 Answers1

0

A simple solution would be to surround your Gujarati content with a span which has a language-specific class assigned to it.

<span class="gujarati">...</span>

You can then set the CSS so that Verdana is applied to all elements but the elements with the gujarati class name.

body { font-family: Verdana; }
.gujarati { font-family: shruti; }

This way you do not have to modify all your content, just the Gujarati part.

Vimal Stan
  • 2,007
  • 1
  • 12
  • 14
  • Currently i have just single label, which contains english and gujarati. I will have to separate out each such label which will be a tedious task. – Ankit May 03 '13 at 09:36
  • I'm not sure if this will be useful but check it out: http://stackoverflow.com/questions/1777357/css-rule-based-on-content – Vimal Stan May 03 '13 at 09:39
  • No, not useful, as the texts in Gujarati are not small in number. – Ankit May 03 '13 at 09:44
  • Then I don't see any other way to specifically target the text other than what I've already mentioned. Please update this thread if you do find an alternative solution. – Vimal Stan May 03 '13 at 09:47