Skip to content

implement a wrapper of CSS Font Loading API #1833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

implement a wrapper of CSS Font Loading API #1833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added examples/css_font_load/BebasNeue-Regular.ttf
View file
Open in desktop
Binary file not shown.
40 changes: 40 additions & 0 deletions examples/css_font_load/css_font_load.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
open Js_of_ocaml

let is_loading = ref true

let render_loop (context : Dom_html.canvasRenderingContext2D Js.t) =
let next_time = Js.float 15. in
let rec inner () =
context##save;
context##.fillStyle := Js.string "rgb(0, 0, 0)";
context##fillRect (Js.float 0.) (Js.float 0.) (Js.float 800.) (Js.float 600.);
context##.fillStyle := Js.string "rgb(255,255,255)";
context##.textBaseline := Js.string "top";
context##.lineWidth := Js.float 3.;
if !is_loading
then (
context##.font := Js.string "48px caption";
context##fillText (Js.string "Loading") (Js.float 0.) (Js.float 0.))
else (
context##.font := Js.string "48px caption";
context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 0.);
context##.font := Js.string "48px 'Bebas Neue', caption";
context##fillText (Js.string "ABCDEFG") (Js.float 0.) (Js.float 50.));
context##restore;
ignore @@ Dom_html.window##setTimeout (Js.wrap_callback inner) next_time
in
inner ()

let _ =
let canvas =
Option.get @@ Dom_html.getElementById_coerce "main-canvas" Dom_html.CoerceTo.canvas
in
let context = canvas##getContext Dom_html._2d_ in
let bebas =
Css_font.create_font_face
(Js.string "Bebas Neue")
(Js.string "url(BebasNeue-Regular.ttf)")
in
Css_font.load_and_then bebas (fun () -> is_loading := false);
Dom_html.document##.fonts##add bebas;
render_loop context
14 changes: 14 additions & 0 deletions examples/css_font_load/dune
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
(executables
(names css_font_load)
(libraries js_of_ocaml)
(modes js)
(preprocess
(pps js_of_ocaml-ppx)))

(alias
(name default)
(deps css_font_load.bc.js index.html))

(alias
(name default)
(deps BebasNeue-Regular.ttf))
14 changes: 14 additions & 0 deletions examples/css_font_load/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS FONT LOAD</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script type="text/javascript" src="css_font_load.bc.js" defer></script>
</head>
<body>
<canvas id="main-canvas" width="800" height="600"></canvas>
</body>
</html>
75 changes: 75 additions & 0 deletions lib/js_of_ocaml/css_font.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
(* Js_of_ocaml library
* http://www.ocsigen.org/js_of_ocaml/
* Copyright (C) 2014 Hugo Heuzard
* Copyright (C) 2014 Jérôme Vouillon
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, with linking exception;
* either version 2.1 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*)

(** CSS Font Loading API binding

This is a partial binding to the CSS Font Loading API
*)

open Js

class type fontFaceElement = object
method family : js_string t readonly_prop

method style : js_string t readonly_prop

method weight : js_string t readonly_prop

method stretch : js_string t readonly_prop

method unicodeRange : js_string t readonly_prop

method variant : js_string t readonly_prop

method featureSettings : js_string t readonly_prop

method display : js_string t readonly_prop

method src : js_string t readonly_prop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is this documented ?


method status : js_string t readonly_prop

method load : unit -> 'a meth
end

class type fontFaceSet = object
method add : fontFaceElement Js.t -> unit meth

method check : js_string t -> js_string t -> bool meth

method delete : fontFaceElement Js.t -> unit meth

method load : unit -> 'a meth

method ready : bool readonly_prop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ready should return a promise


method status : js_string t readonly_prop
end

let constr : (js_string t -> js_string t -> fontFaceElement t) Js.constr =
Unsafe.pure_js_expr "FontFace"

let create_font_face (family : js_string Js.t) (source : js_string Js.t) =
new%js constr family source

let load_and_then (font_face : fontFaceElement Js.t) (f : unit -> unit) =
let f = Unsafe.inject @@ Js.wrap_meth_callback f in
let js_promise = font_face##load () in
Unsafe.meth_call js_promise "then" [| Unsafe.coerce f |]
68 changes: 68 additions & 0 deletions lib/js_of_ocaml/css_font.mli
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
(* Js_of_ocaml library
* http://www.ocsigen.org/js_of_ocaml/
* Copyright (C) 2014 Hugo Heuzard
* Copyright (C) 2014 Jérôme Vouillon
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, with linking exception;
* either version 2.1 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
*)

(** CSS Font Loading API binding

This is a partial binding to the CSS Font Loading API
*)

open Js

class type fontFaceElement = object
method family : js_string t readonly_prop

method style : js_string t readonly_prop

method weight : js_string t readonly_prop

method stretch : js_string t readonly_prop

method unicodeRange : js_string t readonly_prop

method variant : js_string t readonly_prop

method featureSettings : js_string t readonly_prop

method display : js_string t readonly_prop

method src : js_string t readonly_prop

method status : js_string t readonly_prop

method load : unit -> 'a meth
end

class type fontFaceSet = object
method add : fontFaceElement Js.t -> unit meth

method check : js_string t -> js_string t -> bool meth

method delete : fontFaceElement Js.t -> unit meth

method load : unit -> 'a meth

method ready : bool readonly_prop

method status : js_string t readonly_prop
end

val create_font_face : js_string t -> js_string t -> fontFaceElement t
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we allow users to provide an optional descriptors as defined in https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace ?


val load_and_then : fontFaceElement Js.t -> (unit -> unit) -> unit
2 changes: 2 additions & 0 deletions lib/js_of_ocaml/dom_html.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2161,6 +2161,8 @@ class type document = object

method images : imageElement collection t readonly_prop

method fonts : Css_font.fontFaceSet t readonly_prop

method applets : element collection t readonly_prop

method links : element collection t readonly_prop
Expand Down
2 changes: 2 additions & 0 deletions lib/js_of_ocaml/dom_html.mli
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1978,6 +1978,8 @@ class type document = object

method images : imageElement collection t readonly_prop

method fonts : Css_font.fontFaceSet t readonly_prop

method applets : element collection t readonly_prop

method links : element collection t readonly_prop
Expand Down
1 change: 1 addition & 0 deletions lib/js_of_ocaml/js_of_ocaml.ml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ module Dom = Dom
module Dom_events = Dom_events
module Dom_html = Dom_html
module Dom_svg = Dom_svg
module Css_font = Css_font
module Effect_js = Effect_js
module EventSource = EventSource
module File = File
Expand Down