noto sans and vedic swaras

173 views
Skip to first unread message

Ajit Krishnan

unread,
Feb 24, 2016, 3:36:21 PM2/24/16
to sanskrit-programmers, विश्वासो वासुकिजः
namaste,

I've been looking at using Google's open-source "noto" font family to typeset some simple vedic selections. Though the font itself has glyphs in the right unicode code points, many of them just don't render in a browser. If anyone on the list has experience with fonts and browsers, I'd like to work with you to understand how to debug this. The link below showcases the problem.


Using typecast, I see that phrases such as स॒हस्र॑शीर्षा॒ पुरु॑षः with basic swaras render correctly. However dirgha svaritas, eg. पादो᳚ऽस्य don't render correctly, and neither do yajur veda anuswaras such as ए॒वेदꣳ सर्वम्᳚. 
 
If you paste the sentence above into the text fields in typecast, you'll see some boxes. However, if you install the "noto sans" ttf font on your local machine, the same text will render correctly using Microsoft Word. The fonts can be downloaded from https://www.google.com/get/noto/

For whatever reason, I just can't get all the characters to render in a browser (including Chrome!). I'd appreciate any pointers.

sasneham,

    ajit
 

विश्वासो वासुकिजः (Vishvas Vasuki)

unread,
Feb 24, 2016, 5:18:34 PM2/24/16
to Ajit Krishnan, sanskrit-programmers
I seem unable to reproduce this: I get - http://i.imgur.com/5pdnyVL.png  for https://raw.githubusercontent.com/sanskrit-coders/sanskritnlpjava/master/src/main/webapp/fonts/1-devanagari.html , which seems fine. Could you show a screenshot of what you get?
--
--
Vishvas /विश्वासः

विश्वासो वासुकिजः (Vishvas Vasuki)

unread,
Feb 24, 2016, 7:25:13 PM2/24/16
to Ajit Krishnan, sanskrit-programmers
(readding sanskrit-programmers)

I suspect that this should work:

2016-02-24 15:57 GMT-08:00 Ajit Krishnan <ajit.k...@gmail.com>:
Actually, the 12 glyphs in "Times" font probably match the 12 boxes.


 

On Wed, Feb 24, 2016 at 3:55 PM, Ajit Krishnan <ajit.k...@gmail.com> wrote:
See attached. Looks right to me.
 

On Wed, Feb 24, 2016 at 3:51 PM, विश्वासो वासुकिजः (Vishvas Vasuki) <vishvas...@gmail.com> wrote:
इनलाइन चित्र 1

Can you right click and do inspect element and examine what the rendered fonts are? (example from my browser above)

2016-02-24 15:46 GMT-08:00 Ajit Krishnan <ajit.k...@gmail.com>:
And here it is from windows (chrome).


 

On Wed, Feb 24, 2016 at 3:44 PM, Ajit Krishnan <ajit.k...@gmail.com> wrote:

Here’s a rendering with the very same file using chrome on a mac.


 
 

2016-02-24 14:29 GMT-08:00 Ajit Krishnan <ajit.k...@gmail.com>:

I'll reply back to the group with screenshots from a few environments in a couple of days. I basically get square boxes on both MacOS and Windows. ( On MacOS, the rest of the text renders in Noto. On Windows, it doesn't seem to load that font at all, even though the CSS file loaded correctly, and has the correct references. ) In both environments, I'm using Chrome.


Ajit Krishnan

unread,
Feb 25, 2016, 12:59:57 AM2/25/16
to विश्वासो वासुकिजः (Vishvas Vasuki), sanskrit-programmers

I've tried several variations, and get the same result. Your version will not work because @import statements in the <body> are interpreted as text. It needs to be in the css block (yes, I tried that too :-)) 

At the end of the day, all of these are variations of the same basic CSS.  

विश्वासो वासुकिजः (Vishvas Vasuki)

unread,
Feb 25, 2016, 1:22:24 AM2/25/16
to Ajit Krishnan, sanskrit-programmers

2016-02-24 21:59 GMT-08:00 Ajit Krishnan <ajit.k...@gmail.com>:

Your version will not work because @import statements in the <body> are interpreted as text. It needs to be in the css block (yes, I tried that too :-)) 
​Nope - @import statement is *before* the body in my version.​ Just as with this 3-noto-deva-example.html standard examples someone sent me.


At the end of the day, all of these are variations of the same basic CSS.  
​But, there is still this other significant difference from your previous attempt: ​
font-family: 'Noto Sans Devanagari', sans-serif;

​​​See - we're using a different font family from Noto Sans.

I've tried several variations, and get the same result.
 
That's very​ strange. Can you please send a screenshot showing the rendered font using exactly the same file: 

Ajit Krishnan

unread,
Feb 25, 2016, 1:32:32 AM2/25/16
to विश्वासो वासुकिजः (Vishvas Vasuki), sanskrit-programmers

I really don't want to do 100 more iterations with screenshots :-) The files are attached.
CapturFiles-20160255_220208.jpg
CapturFiles-20160255_220253.jpg

Ajit Krishnan

unread,
Feb 25, 2016, 1:35:59 AM2/25/16
to विश्वासो वासुकिजः (Vishvas Vasuki), sanskrit-programmers
> Just as with this 3-noto-deva-example.html standard examples 


Please note that in this example, the @import statement is in the style block.

    ajit
 

विश्वासो वासुकिजः (Vishvas Vasuki)

unread,
Feb 25, 2016, 1:46:40 AM2/25/16
to Ajit Krishnan, sanskrit-programmers

2016-02-24 22:35 GMT-08:00 Ajit Krishnan <ajit.k...@gmail.com>:
Please note that in this example, the @import statement is in the style block.
​ ​

​Duh. all right 🙈. Ok - let us know if you solve this mystery.​ Or report a chrome bug, if there is one.

​From your screenshots, it's clearly not using Noto Sans Devanagari.​ 

विश्वासो वासुकिजः (Vishvas Vasuki)

unread,
Feb 25, 2016, 1:50:25 AM2/25/16
to Ajit Krishnan, sanskrit-programmers
I suppose you've already tried:
    <style>
      body {
        font-family: 'Noto Sans Devanagari', sans-serif;
        font-size: 20px;
      }
    </style>


Incidentally, Noto Sans Devanagari is the default font on my browser - so that would explain the divergence in the first screenshot I sent, where your fall-back was Times.

Shreevatsa R

unread,
Feb 25, 2016, 2:06:41 AM2/25/16
to sanskrit-programmers, Ajit Krishnan
Ajit, can you use the "inspect element" feature of Chrome (select just the word where you see boxes) and verify whether those characters are rendered using Noto Sans Devanagari or some other font like Times? 

That will let us know whether it's a CSS issue (we have not been able to get the browser to render a block of text in a given font), or a font issue (rendering that block of text in the given font is failing).

--
You received this message because you are subscribed to the Google Groups "sanskrit-programmers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sanskrit-program...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Shreevatsa R

unread,
Feb 25, 2016, 2:35:11 AM2/25/16
to sanskrit-programmers, Ajit Krishnan
I think I figured it out; the issue is probably just that the "Noto Sans Devanagari" from https://www.google.com/fonts/earlyaccess probably doesn't the Vedic accent glyphs, while the downloadable font does. If you download the Noto Sans Devanagari font and put it up somewhere online and use @font-face to refer to it, it should work. (Licensing issues should be ok as Noto Sans is explicitly under an open licence.)

Shreevatsa R

unread,
Feb 25, 2016, 3:08:24 AM2/25/16
to sanskrit-programmers, Ajit Krishnan
Yes that seems to do the trick. Try the attached file (also quoted verbatim below); it renders like this image:


I'm going to remove the file the next time I deploy to that site, but this should serve as an example for now.

BTW, if you upload the file somewhere else and refer to it, check your Network tab in the Developer tools to see if the font is getting fetched.
Also check the Console tab to check whether there's an error. I had to set a CORS policy when I uploaded the file. https://stackoverflow.com/questions/25577981/font-from-origin-has-been-blocked-from-loading-by-cross-origin-resource-sharing

Anyway, this should work.


<html>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <head>
    <style>
      @font-face {
        font-family: 'Noto Sans Devanagari Regular Unhinted Downloaded';
        font-style: normal;
        font-weight: 400;
        src: url(https://sanskritmetres.appspot.com/NotoSansDevanagariRegularUnhintedDownloaded.ttf) format('truetype');
      }
      body {
        font-family: "Noto Sans Devanagari Regular Unhinted Downloaded", "Noto Sans", sans-serif;
      }
    </style>
  </head>

<body>
<p>पादो᳚ऽस्य  ए॒वेदꣳ सर्वम्᳚</p>
</body>
</html>



1-devanagari-link-href-Noto-Sans.html

Ajit Krishnan

unread,
Feb 25, 2016, 10:13:55 AM2/25/16
to Shreevatsa R, sanskrit-programmers

Aha. That's indeed the root cause. The quoted portion below renders as expected. ( The file you attached was probably the wrong version, it doesn't reference the full ttf directly). Thanks again !

    ajit

Ajit Krishnan

unread,
Feb 25, 2016, 10:44:14 AM2/25/16
to Shreevatsa R, sanskrit-programmers
Btw, were you able to find a hinted version of the font that also has the glyphs? In the unhinted version, the placement of the accents is less than ideal in many cases (eg. with an anusvara)

Shreevatsa R

unread,
Feb 25, 2016, 10:53:44 AM2/25/16
to Ajit Krishnan, sanskrit-programmers
Ah yes, I had attached the wrong file. (Attached it correctly for what it's worth, but it's the same as quoted in the email earlier.)

As for the hinted font: the one from this directory https://github.com/googlei18n/noto-fonts/tree/master/hinted is probably hinted (going by the name), and it does render the Vedic accents.

Noto.Sans.Devanagari.Downloaded.html

विश्वासो वासुकिजः (Vishvas Vasuki)

unread,
Feb 25, 2016, 12:06:52 PM2/25/16
to sanskrit-programmers, Ajit Krishnan
साधु साधु! network-वीक्षणप्रामुख्यविषये न पूर्वमज्ञासिषम्। 🙏👏

 https://raw.githubusercontent.com/googlei18n/noto-fonts/master/hinted/NotoSansDevanagari-Regular.ttf इति साक्षात् प्रयोक्तुं शक्यत एव।

Ajit Krishnan

unread,
Feb 25, 2016, 1:17:15 PM2/25/16
to विश्वासो वासुकिजः (Vishvas Vasuki), Shreevatsa R, sanskrit-programmers

My apologies for the already long thread. There's still a behavioural difference that I don't understand.


(1) If I reference the google font css file, the diirgha svarita doesn't render (as we've discussed). However, the svarita is raised above anusvaras and rephas at the beginning of a samyuktakshara.

Inline image 1


(2) If I directly reference the ttf file (hinted or unhinted), the diirgha svarita is rendered. However, the svarita is not raised.


Inline image 3
I assumed this was related to the hinting, but it seems to be something else. Any thoughts? The files that reproduce this behaviour are attached.
 
        ajit


On Thu, Feb 25, 2016 at 9:06 AM, विश्वासो वासुकिजः (Vishvas Vasuki) <vishvas...@gmail.com> wrote:
साधु साधु! network-वीक्षणप्रामुख्यविषये न पूर्वमज्ञासिषम्। 🙏👏

 https://raw.githubusercontent.com/googlei18n/noto-fonts/master/hinted/NotoSansDevanagari-Regular.ttf इति साक्षात् प्रयोक्तुं शक्यत एव।

2016-02-25 7:53 GMT-08:00 Shreevatsa R <shree...@gmail.com>:
Ah yes, I had attached the wrong file. (Attached it correctly for what it's worth, but it's the same as quoted in the email earlier.)

As for the hinted font: the one from this directory https://github.com/googlei18n/noto-fonts/tree/master/hinted is probably hinted (going by the name), and it does render the Vedic accents.


[ remainder of thread trimmed ] 
noto-google-fonts.html
noto-ttf-font.html

विश्वासो वासुकिजः (Vishvas Vasuki)

unread,
Feb 25, 2016, 2:15:54 PM2/25/16
to Ajit Krishnan, Shreevatsa R, sanskrit-programmers
Sounds like a good issue to raise in https://github.com/googlei18n/noto-fonts/issues . I suspect font defects - afaik, svara-s were something of an afterthought in this font.

Ajit Krishnan

unread,
Feb 25, 2016, 2:54:09 PM2/25/16
to विश्वासो वासुकिजः (Vishvas Vasuki), Shreevatsa R, sanskrit-programmers

I don't know enough to speculate about the cause. In either case, I've filed https://github.com/googlei18n/noto-fonts/issues/628

Shreevatsa R

unread,
Feb 25, 2016, 3:20:50 PM2/25/16
to विश्वासो वासुकिजः (Vishvas Vasuki), Ajit Krishnan, sanskrit-programmers
The difference between the two files is just the difference between this in CSS:

/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/5pCv5Yz4eMu9gmvX8nNhfYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+02BC, U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200B-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
and this:

@font-face { font-family: 'Noto Sans Devanagari Hinted'; font-style: normal; font-weight: 400; src: url(https://raw.githubusercontent.com/googlei18n/noto-fonts/master/hinted/NotoSansDevanagari-Regular.ttf) format('truetype'); }

(and of course using those fonts respectively in the body). 

So it seems a difference between the two fonts, the font at:
Ajit's description is that the former doesn't render some glyphs but raises svarita, but the latter renders the glyphs but does not.

It is probably a regression in the font -- can confirm if we have a TTF version of it.

From the earlier @import url syntax, this is the URL for a TTF version:

fonts.gstatic.com/ea/notosansdevanagari/v3/NotoSansDevanagari-Regular.ttf
But I don't know how to install the woff version locally (except in a browser).

Shreevatsa R

unread,
Feb 25, 2016, 4:25:18 PM2/25/16
to विश्वासो वासुकिजः (Vishvas Vasuki), Ajit Krishnan, sanskrit-programmers
Here's a single file to illustrate the differences. The first line uses the latest TTF file from Github, the second line from earlyaccess, and the third from fonts.googleapis.com/css. It renders like this in my browser:

You may want to make it clearer to the folks on the Github issue that what you'd like is for the last two words to be rendered as in the second and third lines above.
noto-options.html
Reply all
Reply to author
Forward
0 new messages