Adds support for any font as rendering resource (#274)

* Added initial forwarding of font sizes to worker

* Added font loading check mechanism to workflow to ensure it is loaded before rendering

* Integrated dynamic font size generation into already existing workflows

* Updated samples and docs

* Some cleanup work

Author: Danielku15

Documentation/input/_Head.cshtml

@@ -1,3 +1,4 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/plugins/line-numbers/prism-line-numbers.min.css" />
 <script src="@Context.GetLink("/assets/js/alphaTab/alphaTab.min.js")"></script>
+<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">

Documentation/input/examples/render-customization/colors-fonts.cshtml

@@ -16,7 +16,7 @@ Order: 10
             </tr>
         </thead>
         <tbody>
-            <tr><td>copyrightFont</td>      <td>Font</td>   <td>Music copyright information in page layouts</td> <td>12px Arial bold</td></tr>
+            <tr><td>copyrightFont</td>      <td>Font</td>   <td>Music copyright information in page layouts</td> <td>bold 12px Arial</td></tr>
             <tr><td>titleFont</td>          <td>Font</td>   <td>Title of the song in page layouts</td> <td>32px Georgia</td></tr>
             <tr><td>subTitleFont</td>       <td>Font</td>   <td>Subtitle of the song in page layouts</td> <td>20px Georgia</td></tr>
             <tr><td>wordsFont</td>          <td>Font</td>   <td>Lyrics information of the song in page layouts</td> <td>15px Georgia</td></tr>
@@ -26,7 +26,7 @@ Order: 10
             <tr><td>graceFont</td>          <td>Font</td>   <td>The numbers grace notes in tablature staves</td> <td>11px Arial</td></tr>
             <tr><td>barNumberFont</td>      <td>Font</td>   <td>The numbers above bars</td> <td>11px Arial</td></tr>
             <tr><td>fingeringFont</td>      <td>Font</td>   <td>The numbers shown for fingering information</td><td>14px Georgia</td></tr>
-            <tr><td>markerFont</td>         <td>Font</td>   <td>The section marker labels</td> <td>14px Arial bold</td> </tr>
+            <tr><td>markerFont</td>         <td>Font</td>   <td>The section marker labels</td> <td>bold 14px Arial</td> </tr>
 
             <tr><td>staffLineColor</td>     <td>Color</td>  <td>The lines for all staves</td> <td>rgb(165,165,165)</td></tr>
             <tr><td>barSeparatorColor</td>  <td>Color</td>  <td>The lines for bar separators and repeat indicators</td> <td>rgb(34,34,17)</td></tr>
@@ -44,7 +44,7 @@ Order: 10
             <h3 class="panel-title">Usage of different fonts</h3> 
         </div>
         <div class="panel-body">
-        The usage of other fonts can result in alignment or layouting issues and in a slighly worse performance. If such problems are detected, please inform us on <a href="https://github.com/CoderLine/alphaTab/issues/new/choose" target="_blank">GitHub</a>. The format for fonts is similar to the CSS shorthand font declarations but with some limitations: <code>Size Family Style</code>. No relative font sizes are supported and every size beside px will be converted to px. For styles <code>italic</code> and <code>bold</code> are supported. 
+        The usage of other fonts can result in alignment or layouting issues and in a slighly worse performance. If such problems are detected, please inform us on <a href="https://github.com/CoderLine/alphaTab/issues/new/choose" target="_blank">GitHub</a>. The format for fonts is similar to the CSS shorthand font declarations but with some limitations: <code>Style Size Family</code>. No relative font sizes are supported and every size beside px will be converted to px. For styles <code>italic</code> and <code>bold</code> are supported. 
         </div> 
     </div>
 
@@ -76,7 +76,7 @@ Order: 10
                 $('#alphaTabScriptInit').alphaTab({
                   file: '@Context.GetLink("/assets/files/features/Skillet.gp5")',
                   resources: {
-                    copyrightFont: "12px Roboto bold",
+                    copyrightFont: "bold 12px Roboto",
                     titleFont: "32px 'Roboto Slab'",
                     subTitleFont: "20px 'Roboto Slab'",
                     wordsFont: "15px 'Roboto Slab'",
@@ -86,7 +86,7 @@ Order: 10
                     graceFont: "11px Roboto",
                     barNumberFont: "11px Roboto",
                     fingeringFont: "14px 'Roboto Slab'",
-                    markerFont: "14px Roboto bold",
+                    markerFont: "bold 14px Roboto",
     
                     staffLineColor: "rgba(255,255,255, 0.8)",
                     barSeparatorColor: "rgb(255,255,255)",
@@ -105,17 +105,17 @@ Order: 10
                 .alphaTabSurface { background: #000; }
             </style>
             <div id="alphaTabDataInit" data-file="@Context.GetLink("/assets/files/features/Skillet.gp5")"
-                data-resources-copyrightFont="12px Roboto bold"
+                data-resources-copyrightFont="bold 12px Roboto"
                 data-resources-titleFont="32px 'Roboto Slab'"
                 data-resources-subTitleFont="20px 'Roboto Slab'"
                 data-resources-wordsFont="15px 'Roboto Slab'"
-                data-resources-effectFont="12px 'Roboto Slab' italic"
+                data-resources-effectFont=" italic 12px 'Roboto Slab'"
                 data-resources-fretboardNumberFont="11px Roboto"
                 data-resources-tablatureFont="13px Roboto"
                 data-resources-graceFont="11px Roboto"
                 data-resources-barNumberFont="11px Roboto"
                 data-resources-fingeringFont="14px 'Roboto Slab'"
-                data-resources-markerFont="14px Roboto bold"
+                data-resources-markerFont=" bold 14px Roboto"
 
                 data-resources-staffLineColor="rgba(255,255,255, 0.8)"
                 data-resources-barSeparatorColor="rgb(255,255,255)"

Documentation/input/reference/property/renderingresources.cshtml

@@ -122,9 +122,10 @@ Following resources exist for adjusting the style.
 
 <h3>Fonts</h3>
 <p>
-For the .net platform any installed font on the system can be used. For JavaScript until <a href="https://github.com/CoderLine/alphaTab/issues/266" target="_blank">this feature</a> is implemented the 2 fonts "Arial" and "Georgia" are officially supported. Due to the nature of Web Workers, no font metrics are available which needs a custom solution for measuring texts. 
-<br />
-On .net simply construct the <code>Font</code> object to configure your desired fonts. For JavaScript you can use any CSS font property compliant string. Relative font sizes with percentual values are not supported.
+For the .net platform any installed font on the system can be used. Simply construct the <code>Font</code> object to configure your desired fonts. 
+</p>
+<p>
+For the JavaScript platform any font that might be installed on the client machines can be used. Any additional fonts can be added via WebFonts. The rendering of the score will be delayed until it is detected that the font was loaded. Simply use any CSS font property compliant string as configuration. Relative font sizes with percentual values are not supported, remaining values will be considered if supported.
 </p>
 
 

Phase/Mscorlib/system/CsString.hx

@@ -358,4 +358,5 @@ abstract CsString(String) from String to String
 	@:op(A + B) public static inline function add16(lhs : system.CsString, rhs : system.Single) : system.CsString return lhs + rhs.toString();
     @:op(A + B) public static inline function add17(lhs : system.CsString, rhs : system.Double) : system.CsString return lhs + rhs.toString();
     @:op(A + B) public static inline function add18(lhs : system.CsString, rhs : system.CsString) : system.CsString return lhs.toHaxeString() + rhs.toHaxeString();
+    @:op(A + B) public static inline function add19(lhs : system.CsString, rhs : system.Boolean) : system.CsString return lhs.toHaxeString() + Std.string(rhs);
 }

Samples/CSharp/AlphaTab.Samples.PngDump/Program.cs

@@ -52,7 +52,7 @@ private static void Main(string[] args)
                 var info = new FileInfo(args[0]);
                 var path = Path.Combine(info.DirectoryName, Path.GetFileNameWithoutExtension(info.Name) + "-" + i + ".png");
 
-                using (var full = SKSurface.Create(totalWidth, totalHeight, SKImageInfo.PlatformColorType, SKAlphaType.Premul))
+                using (var full = SKSurface.Create(new SKImageInfo(totalWidth, totalHeight, SKImageInfo.PlatformColorType, SKAlphaType.Premul)))
                 {
                     var y = 0;
                     foreach (var image in images)

Source/AlphaTab.CSharp/Platform/CSharp/ManagedUiFacade.cs

@@ -10,7 +10,7 @@
 
 namespace AlphaTab.Platform.CSharp
 {
-    public abstract class ManagedUiFacade<TSettings> : IUiFacade<TSettings>
+    internal abstract class ManagedUiFacade<TSettings> : IUiFacade<TSettings>
     {
         protected ConcurrentQueue<Counter> TotalResultCount { get; private set; }
 

Source/AlphaTab.CSharp/Platform/Svg/FontSizes.cs

@@ -0,0 +1,27 @@
+namespace AlphaTab.Platform.Svg
+{
+    /// <summary>
+    /// This public class stores text widths for several fonts and allows width calculation
+    /// </summary>
+    internal partial class FontSizes
+    {
+        public static void GenerateFontLookup(string family)
+        {
+            if (FontSizeLookupTables == null)
+            {
+                Init();
+            }
+
+            if (FontSizeLookupTables.ContainsKey(family))
+            {
+                return;
+            }
+
+            // TODO: maybe allow fallback to GDI/Skia based on availability?
+            FontSizeLookupTables[family] = new byte[]
+            {
+                8
+            };
+        }
+    }
+}

Source/AlphaTab.JavaScript/Collections/FastDictionary.cs

@@ -1,6 +1,5 @@
 using System.Collections;
 using System.Collections.Generic;
-using System.Runtime.CompilerServices;
 using Phase;
 using Phase.Attributes;
 

Source/AlphaTab.JavaScript/Environment.cs

@@ -6,6 +6,7 @@
 using AlphaTab.Platform.Svg;
 using AlphaTab.Rendering.Glyphs;
 using AlphaTab.Util;
+using AlphaTab.Utils;
 using Haxe;
 using Phase;
 using StringBuilder = AlphaTab.Collections.StringBuilder;
@@ -20,17 +21,8 @@ namespace AlphaTab
     internal partial class Environment
     {
         public static string ScriptFile { get; set; }
-        public static bool IsFontLoaded { get; set; }
-        public static event Action FontLoaded;
 
-        private static void OnFontLoaded()
-        {
-            var handler = FontLoaded;
-            if (handler != null)
-            {
-                handler();
-            }
-        }
+        public static FontLoadingChecker BravuraFontChecker { get; private set; }
 
         private static void PlatformInit()
         {
@@ -133,7 +125,10 @@ private static void PlatformInit()
                     }
                 }
 
-                CheckForFontAvailability();
+                BravuraFontChecker = new FontLoadingChecker("alphaTab",
+                    "&#" + (int)MusicFontSymbol.ClefG + ";"
+                );
+                BravuraFontChecker.CheckForFontAvailability();
             }
             else
             {
@@ -207,95 +202,5 @@ private static string ScriptFileFromStack(string stack)
 
             return matches[1];
         }
-
-        public static void CheckForFontAvailability()
-        {
-            var isWorker =
-                Script.Write<bool>(
-                    "untyped __js__(\"typeof(WorkerGlobalScope) !== 'undefined' && self instanceof WorkerGlobalScope\")");
-            if (isWorker)
-            {
-                // no web fonts in web worker
-                IsFontLoaded = false;
-                return;
-            }
-
-            var cssFontLoadingModuleSupported = Browser.Document.Fonts.IsTruthy() &&
-                                                Browser.Document.Fonts.Member<object>("load").IsTruthy();
-            if (cssFontLoadingModuleSupported)
-            {
-                Action checkFont = null;
-                checkFont = () =>
-                {
-                    Browser.Document.Fonts.Load("1em alphaTab").Then(_ =>
-                    {
-                        if (Browser.Document.Fonts.Check("1em alphaTab"))
-                        {
-                            Logger.Info("Rendering", "Font available");
-                            IsFontLoaded = true;
-                            OnFontLoaded();
-                        }
-                        else
-                        {
-                            Browser.Window.SetTimeout((Action)(() =>
-                                {
-                                    checkFont();
-                                }),
-                                250);
-                        }
-
-                        return true;
-                    });
-                };
-                checkFont();
-            }
-            else
-            {
-                Action checkFont = null;
-                checkFont = () =>
-                {
-                    var document = Browser.Document;
-                    var testItem = document.GetElementById("alphaTabFontChecker");
-
-                    if (testItem == null)
-                    {
-                        // create a hidden element with the font style set
-                        testItem = document.CreateElement("div");
-                        testItem.SetAttribute("id", "alphaTabFontChecker");
-                        testItem.Style.Opacity = "0";
-                        testItem.Style.Position = "absolute";
-                        testItem.Style.Left = "0";
-                        testItem.Style.Top = "0";
-                        testItem.Style.FontSize = "100px";
-                        testItem.ClassList.Add("at");
-                        testItem.InnerHTML = "&#" + (int)MusicFontSymbol.ClefG + ";";
-
-                        document.Body.AppendChild(testItem);
-                    }
-
-                    // get width
-                    var width = testItem.OffsetWidth;
-                    if (width > 30 && width < 100)
-                    {
-                        IsFontLoaded = true;
-                        document.Body.RemoveChild(testItem);
-                        OnFontLoaded();
-                    }
-                    else
-                    {
-                        Browser.Window.SetTimeout((Action)(() =>
-                            {
-                                checkFont();
-                            }),
-                            250);
-                    }
-                };
-                Browser.Window.AddEventListener("DOMContentLoaded",
-                    (Action)(() =>
-                    {
-                        checkFont();
-                    }));
-            }
-        }
     }
 }

Source/AlphaTab.JavaScript/Haxe/IO/HaxeBytesBuffer.cs

@@ -1,5 +1,4 @@
-using Haxe;
-using Phase.Attributes;
+using Phase.Attributes;
 
 namespace Haxe.IO
 {