Problem with embedding fonts w. Xojo Web

Greetings,
I am pulling out my hair, trying to get a specific font embedded within a Xojo web app. I would appreciate any help you could give. Here’s the background:

I have created an app that must render in Burmese, using a font named Padauk. I have had all of the labels and listbox items translated into Burmese, but when the app is deployed to our Xojo Cloud server and accessed by our testers, they tell me that the Burmese characters are unreadable… Bad Burmese or BB as they call it. The font is also unreadable on my own machine, where the font files are local. I am hoping to fix the problem by embedding the Padauk font in my web app, so every user will be using the same font.

In order to test the font-embedding technique, I created a small, light-weight app and I have followed some instructions from a posting by Michel Bujardet, to use a PageSource control in conjunction with loading the “.ttf” font into a WebFile control in the App.Open event. When I deploy the app, it hangs with a “Launching” screen. When I run the app locally in the Debugger, it fails with a lengthy error message, but I think the top two lines are related to the problem. It says:

[quote]Could not execute returned javascript: content is null
Source: var langdir = document.getElementsByTagName(‘body’)[0]; if(langdir) { langdir.removeAttribute(‘dir’); }
var langdir = document.getElementsByTagName(‘body’)[0]; if(langdir) { langdir.setAttribute(‘lang’,‘en’); }[/quote]

That is all I have to go on, and I have no clue about its meaning. Any thoughts about getting me to the next hurdle? I get the same result whether I use .ttf or .woff versions of the font.

Here’s the code as it stands (and fails):

App.Open Event (using a pragma directive to determine if it’s running in debug or on the cloud - this is for the debug):

#If TargetXojoCloud Then dim f1 as folderitem = ExecutableFile.Parent.Child("Concord Concord_aux").Child("Padauk-Regular.ttf") wf = Webfile.Open(f1) #Else dim f1 as folderitem f1 = GetFolderItem("E:\\Don's Stuff\\XOJO Projects\\Concord\\Concord_aux\\Padauk-Regular.ttf", FolderItem.PathTypeShell) wf = Webfile.Open(f1) #EndIf

WebPage.PageSource.EditSource code:

Source = "<style>@font-face {"+EndOfLine Source = Source + "font-family: Padauk; src: url("+app.wf.URL+");}" + EndOfLine

The app also has a WebStyle that points to one, and only one font, which is Padauk; the WebStyle name is PadaukStyle and both controls on the web page use this style.

There is one more piece of information that I can give: When running in the debugger, the value of the “Source” in the EditSource is:
[quote]/_files/8591-3724-8142-7809-8315/Padauk-Regular.ttf[/quote]

The deployed app resides here.

Sorry about the length of this posting - once again, I greatly appreciate your help.
Don

I don’t know if it was a typo in here, or if it’s even the cause of the issues, but your paths are different

dim f1 as folderitem = ExecutableFile.Parent.Child("Concord Concord_aux").Child("Padauk-Regular.ttf") f1 = GetFolderItem("E:\\Don's Stuff\\XOJO Projects\\Concord\\Concord_aux\\Padauk-Regular.ttf", FolderItem.PathTypeShell)

The localhost path is Concord\Concord_aux, but your XojoCloud is “Concord Concord_aux”… Shouldn’t that be .Child(“Concord”).Child(“Concord_aux”) ?

I’m really not sure, but the current form works for my other auxiliary files (e.g. my help pages).

But since your format looks better, I changed my code accordingly, deployed it, and it still hangs in the launching state.

Thanks for the tip.

I just reread your post. The paths are different, since one is on my local machine and the other is on the cloud server.

I doubt the issue is the @fontface. Try removing (comment) that code, and see if the hangup happens again. It could be that the font file is not where you think it is. How do you copy it into your folder ?

The app doesn’t ever launch here, so I can’t look into the developer tools to see if possibly the web font isn’t loading or something.

If the path to the TTF is wrong, the app is probably crashing.

I verified that the path to the TTF is correct by doing this:

  1. Stopping the code after the wf = Webfile.Open(f1) statement.
  2. when I look at the value of wf.URL, it contains the correct path, etc., such as:

whereas changing the file name some something bogus, like [quote]xPadauk-Regular.ttf[/quote] results in a NIL value for wf.

So I’m pretty sure I’m okay there… unless you see a flaw in my reasoning :o

I also commented-out the @font-face code, and the app works (aside from the Bad Burmese). But I thought that was because it was not relying on the wf.URL. Is that a valid assumption?

If it would help, I can keep the @font-face commented-out and deploy the app, so you can see what the page looks like with BB. Let me know and I’ll be glad to do it. When I inspect the styles with the FireFox Web Developer tools, it looks like the “Body” font does not include Padauk, although it is shown in the .PadaukStyle entry.

You need to check the browser’s developer tools to see what the browser is getting if all of the Xojo code is correct.
Since your live demo does not work, you’ll have to either fix that or post your project for someone else to look into helping.

What is the procedure for posting my project for others? I would be glad to do that.
Thanks

Perhaps this will shed some light on the problem for someone. I commented-out the [quote]@font-face[/quote] statements in the PageSource-EditSource, and deployed the app to my cloud server.

You will see examples of good Burmese renderings and bad - they’re noted by labels on the page.

The browser developer tools for viewing the styles, etc. will probably give the best view of what’s going on.

I would greatly appreciate any insights that you come up with.
Thanks much,
Don

Does https://en.wikipedia.org/wiki/Help:Multilingual_support_(Burmese)#Windows have any application to you?
It says Windows 7 cannot handle it using just the font.

It does apply to our app, which is the reason I’ve settled on SIL’s Padauk font. SIL has invested a lot of research and time into it. I have a query in to the SIL people, to see if they can give me some clues, but I suspect the difficulty will be implementing their solution in the Xojo environment.

When you download their Padauk font package, it comes with a css example to make it work, but once again, my dilemma is integrating it into Xojo.

Thanks for the pointer, however.

If you applied strictly what I posted, it should work right away.

to make your project available, upload it to your web space, and post the URL.

I will post it today, but I wanted to ask if the above wf.URL looks valid to you. This is an example of it:

If it’s not legit, then that could be the culprit.

Thanks

Once again, I find myself rather embarrassed. The problem that caused the hanging during the launch phase was my bad. I had commented-out the following statement from the PageSource-EditSource code:

Source = Source + "</style>"

The app now launches successfully, but I still need to get word from my translator that the BB font problem has been resolved (he is 11.5 hours ahead of US Central time, so it might be awhile).

While I am waiting for his response please answer one more question that is within the scope of this problem.

When I viewed the styles for my app in the FireFox Inspector, I noticed that the fonts in the BODY of the page did not contain the Padauk font (see below); they only contained Western style fonts. How can I change the web page’s BODY definition to include the Padauk font? I made a couple attempts from the EditSource, but nothing made a difference.

On the same note, I also noticed that the “sans-serif” font family was inserted into my Padauk style definition, even though I had removed it from the WebStyle definition - is there any way to suppress that?
Thanks again for your help
Don

[quote]body {
font-family: "Segoe UI", Tahoma, sans-serif;
font-size: 10pt;
}

.PadaukStyle {
font-family: “Padauk”, sans-serif !important;
font-size: 28pt !important;
text-align: center !important;
background-color: rgba(170,192,68,0.75) !important;
background-image: none !important;
}[/quote]

Try to post your project.

Hi Michel - sorry about the delayed response. I was able not able to upload my test project to my web space. I’ve just gotten rusty with the file/directory permissions and FTP. But I was able to poke around and find the cause of the bad Burmese. It looks like the Burmese fonts (Padauk, Myanmar Text, Zawgyi, etc.) actually have different underlying unicode values for some of the same characters. Thus, when my translators create a doc with one font and then switch to another font, then everything beneath the surface gets confused and the result is BB.

So, I think we will be safe if we issue a decree amongst ourselves to only use the Padauk font. I’ve requested that they re-translate all of our app-labels and list box contents.

Nonetheless, you can see what I’m referring to with the BODY of our page stipulating different fonts than we desire. Simply go to our Concord Font Test app and use the WebDeveloper inspector for styles. At the bottom, you will see the Western (i.e. non-Burmese) fonts in the BODY section. I would like to know how to specify the fonts for the entire BODY.

Thanks much,
Don

[quote]body {
font-family: "Segoe UI", Tahoma, sans-serif;
font-size: 10pt;
}
.PadaukStyle {
font-family: “Padauk”, sans-serif !important;
font-size: 28pt !important;
text-align: center !important;
background-color: rgba(170,192,68,0.75) !important;
background-image: none !important;
}[/quote]

FYI: I may not be able to reply until Monday, due to an extremely busy weekend coming up. But I will definitely be back :wink: