Whitelisted Content Delivery Networks

From RPTools Wiki
Revision as of 06:49, 15 August 2020 by Azhrei (talk | contribs) (added the source code for the script that produced the sample image)
Jump to navigation Jump to search

 This article is a stub, you can help the RPTools Wiki project by contributing content to expand this article.

As of MapTool 1.7+, select Content Delivery Networks (CDNs) are whitelisted for access from within MapTool. These networks are considered reliable over a long time frame. This allows MapTool creators to load CSS frameworks and JavaScript libraries. Additionally, Google Fonts are whitelisted to make many free web fonts available for use in MapTool campaigns.

The following CDNs are white-listed:

Additionally, Google Fonts are white listed:

How to use

Numerous resources are available on these CDN. Here are some common ways to use these CDN to add huge functionality to your frame5, dialog5, and overlay components. Note that these examples will go in the <HEAD> of your HTML.

Include Jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Include the 'Dancing Script' Google Font:

<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">

Include Bootstrap CSS and JavaScript:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Caveats and Gotchas

Bootstrap on macOS Catalina (10.15) appears to choose a font that does not support font-weight styling. For example, text contained within <b> and </b> will not appear as bold, by default. The workaround is to assign a specific font to the body element and not allow the WebView to use its fallback logic:

body { font-family: -apple-system; }

Here are the fonts that appear in the font-weight style by default. Note that "Helvetica Neue" and "Apple Color Emoji" do not support bold or italics styling.

Sample font listing
Sample font listing

The script below created the above image.

[frame5("Spell Info", "title="+token.name+"; width=500; temporary=0"): {
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container">
    <h1>Font family samples</h1>
</div>
[h: font_family = json.append("",
	"-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
	"Helvetica Neue", "Arial", "Noto Sans", "sans-serif",
	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
	"Noto Color Emoji")]
[r, foreach(family, font_family, ""):
  strformat('<div style="font-family: %{family}">Family "%{family}": Some <b>bold</b>, some <i>italics</i></div>')]
  </body>
</html>
}]

See Also