CODEWITHSUNDEEP
javascripthtmlcssgoogle-chrome
Dau
Dau

Reputation: 8858

Hindi is not rendering correct in chrome browser

I have a url http://www.readwhere.com/read/r/441808?fresh=fresh in which I am rendering the content in hindi and in english (mixed) format.

The content is correct on the firefox and IE borwser but showing the circles in chrome browser.

But when I copy the content from my page to google translate page it display in the correct format.

Upvotes: 1

Views: 512

Answers (1)

Akash K.
Akash K.

Reputation: 637

I checked your link. The Hindi text on that page is made up with <span> elements containing single letter. It'll render perfectly if you add 1 word in each <span> instead of single letter. The vowel sounds of Hindi (Matra) can't be used without a letter thats why a circle is being used on your page to support each Matra.

Edit: Try this function to make it work

function setText(){
    $('p.calibre2').each(function(){
        var $this = $(this);
        var text = '';
        $this.find('span').each(function(){
            text += $(this).text();
        });
        $this.html($('<span/>').append(text));
    });
}
setText();

Upvotes: 1

Related Questions