Skip to content

Commit 4ddbeda

Browse files
committed
[css-font-load-events] Rephrase the stuff around Document.fonts and similar.
--HG-- extra : rebase_source : f3dbac08ce09ce026a67c6b76ac29781aee564c5
1 parent a08ee1c commit 4ddbeda

2 files changed

Lines changed: 100 additions & 94 deletions

File tree

css-font-load-events/Overview.html

Lines changed: 58 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -135,15 +135,15 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
135135
The <code>load()</code> method</a><li><a href=#font-face-ready><span class=secno>2.3</span>
136136
The <code>ready()</code> method</a><li><a href=#font-face-match><span class=secno>2.4</span>
137137
The <code>match()</code> method</a><li><a href=#font-face-css-connection><span class=secno>2.5</span>
138-
Connection to CSS’s <span class=css data-link-type=maybe>@font-face</span></a></ul><li><a href=#FontFaceSet-interface><span class=secno>3</span>
138+
Interaction with CSS’s <span class=css data-link-type=maybe>@font-face</span> Rule</a></ul><li><a href=#FontFaceSet-interface><span class=secno>3</span>
139139
The <code>FontFaceSet</code> Interface</a><ul class=toc><li><a href=#FontFaceSet-events><span class=secno>3.1</span>
140140
Events</a><li><a href=#font-face-set-match><span class=secno>3.2</span>
141141
The <code>match()</code> method</a><li><a href=#font-face-set-load><span class=secno>3.3</span>
142142
The <code>load()</code> method</a><li><a href=#font-face-set-check><span class=secno>3.4</span>
143143
The <code>check()</code> method</a><li><a href=#font-face-set-ready><span class=secno>3.5</span>
144-
The <code>ready()</code> method</a><li><a href=#document-FontFaceSet><span class=secno>3.6</span>
145-
Extension to the <code>document</code> interface</a><li><a href=#worker-font-face-set><span class=secno>3.7</span>
146-
Extensions to the <code>WorkerGlobalScope</code> interface</a></ul><li><a href=#font-load-event-examples><span class=secno>4</span>
144+
The <code>ready()</code> method</a></ul><li><a href=#font-face-source><span class=secno>4</span>
145+
The <code>FontFaceSource</code> interface</a><ul class=toc><li><a href=#document-font-face-set><span class=secno>4.1</span>
146+
Interaction with CSS’s <span class=css data-link-type=maybe>@font-face</span> Rule</a></ul><li><a href=#font-load-event-examples><span class=secno>5</span>
147147
API Examples</a><li><a href=#changes><span class=secno></span>Changes</a><ul class=toc><li><a href=#changes-since-20130212><span class=secno></span>
148148
Changes from the <span>February 2013 CSS3 Fonts Working Draft</span></a></ul><li><a href=#acknowledgments><span class=secno></span>
149149
Acknowledgments</a><li><a href=#conformance><span class=secno></span>
@@ -408,10 +408,11 @@ <h3 class="heading settled heading" data-level=2.4 id=font-face-match><span clas
408408
Figure out how to run Font’s font selection algorithm on a single face.
409409

410410
<h3 class="heading settled heading" data-level=2.5 id=font-face-css-connection><span class=secno>2.5 </span><span class=content>
411-
Connection to CSS’s <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a></span><a class=self-link href=#font-face-css-connection></a></h3>
411+
Interaction with CSS’s <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> Rule</span><a class=self-link href=#font-face-css-connection></a></h3>
412412

413413
<p> A CSS <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> rule automatically defines a corresponding <a class=idl-code data-link-type=interface>FontFace</a> object,
414-
which is automatically placed in the document’s <a class=idl-code data-link-type=attribute href=#dom-document-fonts>fonts</a> attribute.
414+
which is automatically placed in the document’s <a href=#font-source>font source</a>.
415+
This <a class=idl-code data-link-type=interface>FontFace</a> object is <dfn data-dfn-type=dfn data-noexport="" id=css-connected>CSS-connected<a class=self-link href=#css-connected></a></dfn>.
415416

416417
<p> The <a class=idl-code data-link-type=interface>FontFace</a> object corresponding to a <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> rule
417418
has its <a class=idl-code data-link-type=attribute href=#dom-fontface-family>family</a>, <a class=idl-code data-link-type=attribute href=#dom-fontface-style>style</a>, <a class=idl-code data-link-type=attribute href=#dom-fontface-weight>weight</a>, <a class=idl-code data-link-type=attribute href=#dom-fontface-stretch>stretch</a>, <a class=idl-code data-link-type=attribute href=#dom-fontface-unicoderange>unicodeRange</a>, <a class=idl-code data-link-type=attribute href=#dom-fontface-variant>variant</a>, and <a class=idl-code data-link-type=attribute href=#dom-fontface-featuresettings>featureSettings</a> attributes set to the same value as the corresponding descriptors in the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> rule.
@@ -469,24 +470,9 @@ <h2 class="heading settled heading" data-level=3 id=FontFaceSet-interface><span
469470

470471
<a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> implements <a class=idl-code data-link-type=interface>EventTarget</a>;
471472
</cssfontfacerule></cssfontfacerule></pre>
472-
<p> The set entries for a <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a>
473-
474-
<p> The set entries for a <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> in the <a class=idl-code data-link-type=attribute href=#dom-document-fonts>fonts</a> attribute of a document
475-
are initially populated with the corresponding <a class=idl-code data-link-type=interface>FontFace</a> objects
476-
from all of the CSS <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> rules in the document’s stylesheets,
477-
in document order.
478-
As stylesheets are added to or removed from the document,
479-
this initial segment of set entries is changed accordingly,
480-
always maintaining document order.
481-
Manually-added <a class=idl-code data-link-type=interface>FontFace</a> objects appear in the set entries
482-
after the <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a>-generated ones,
483-
in insertion order.
484-
485-
<p> The <a class=idl-code data-link-type=interface>FontFace</a> objects in a given <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a>
486-
are the <dfn data-dfn-type=dfn data-noexport="" id=available-font-faces>available font faces<a class=self-link href=#available-font-faces></a></dfn> for that set.
487-
Similarly, the <a href=#available-font-faces>available font faces</a> for a document
488-
are the <a href=#available-font-faces>available font faces</a> for the <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a>
489-
that is the value of its <a class=idl-code data-link-type=attribute href=#dom-document-fonts>fonts</a> attribute.
473+
<p> The set entries for a <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> is initially an empty list.
474+
A <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> attached to a document may have some initial <a class=idl-code data-link-type=interface>FontFace</a> objects prefilled in it;
475+
see the section on <a href=#document-font-face-set>Interactions with CSS’s @font-face Rule</a> for details.
490476

491477
<p> Because font families are loaded only when they are used,
492478
content sometimes needs to understand when the loading of fonts occurs.
@@ -511,7 +497,7 @@ <h2 class="heading settled heading" data-level=3 id=FontFaceSet-interface><span
511497
There are no pending stylesheet requests.
512498

513499
<li>
514-
There are no <a href=#available-font-faces>available font faces</a>
500+
There are no <a>available font faces</a>
515501
with a <a class=idl-code data-link-for=FontFace data-link-type=attribute href=#dom-fontface-status>status</a> of "loading".
516502

517503
<li>
@@ -581,7 +567,7 @@ <h3 class="heading settled heading" data-level=3.1 id=FontFaceSet-events><span c
581567
<p> Whenever a <a class=idl-code data-link-type=interface>FontFace</a> in a given <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> <var>font face set</var>
582568
changes its <a class=idl-code data-link-for=FontFace data-link-type=attribute href=#dom-fontface-status>status</a> attribute to
583569

584-
<p> Whenever one or more <a href=#available-font-faces>available font faces</a> for a given <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a>
570+
<p> Whenever one or more <a>available font faces</a> for a given <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a>
585571
change their <a class=idl-code data-link-for=FontFace data-link-type=attribute href=#dom-fontface-status>status</a> attribute to "loading",
586572
the user agent must run the following steps:
587573

@@ -603,7 +589,7 @@ <h3 class="heading settled heading" data-level=3.1 id=FontFaceSet-events><span c
603589
Append the <var>loading fonts</var> to <var>font face set’s</var> <a class=idl-code data-link-type=attribute href=#dom-fontfaceset-loadingfonts>[[LoadingFonts]]</a> attribute.
604590
</ol>
605591

606-
<p> Whenever one or more <a href=#available-font-faces>available font faces</a> for a given <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a>
592+
<p> Whenever one or more <a>available font faces</a> for a given <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a>
607593
change their <a class=idl-code data-link-for=FontFace data-link-type=attribute href=#dom-fontface-status>status</a> attribute to "loaded" or "error",
608594
the user agent must run the following steps:
609595

@@ -652,7 +638,7 @@ <h3 class="heading settled heading" data-level=3.2 id=font-face-set-match><span
652638
The <code>match()</code> method</span><a class=self-link href=#font-face-set-match></a></h3>
653639

654640
<p> The <a href=#dom-fontface-matchfontfacedescriptors-descriptors-optional-domstring-characters>match()</a> method of <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> returns
655-
the subset of <a>available fonts</a>
641+
the subset of <a href=#available-fonts>available fonts</a>
656642
that match a given <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-fonts-3/#propdef-font title=font>font</a> specifier
657643
and can render the given characters.
658644

@@ -674,7 +660,7 @@ <h3 class="heading settled heading" data-level=3.2 id=font-face-set-match><span
674660

675661
<li>
676662
For each family in <var>font family list</var>,
677-
use the font matching rules to select the <a href=#available-font-faces>available font faces</a> that match the <var>font style</var>.
663+
use the font matching rules to select the <a>available font faces</a> that match the <var>font style</var>.
678664
The use of the <a class=idl-code data-link-type=attribute href=#dom-fontface-unicoderange>unicodeRange</a> attribute means that this may be more than just a single font face.
679665

680666
<li>
@@ -770,7 +756,7 @@ <h3 class="heading settled heading" data-level=3.5 id=font-face-set-ready><span
770756

771757
<ol>
772758
<li>
773-
Let <var>font face set</var> be the value of the <a class=idl-code data-link-type=attribute href=#dom-document-fonts>fonts</a> attribute of the document.
759+
Let <var>font face set</var> be the <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> object this method was called on.
774760
Let <var>ready promise</var> be a fresh Promise which is initially pending.
775761

776762
<li>
@@ -803,28 +789,47 @@ <h3 class="heading settled heading" data-level=3.5 id=font-face-set-ready><span
803789
never rejected,
804790
unlike the Promise returned by the <a class=idl-code data-link-type=interface>FontFace</a> <a class=idl-code data-link-for=FontFace data-link-type=method href=#dom-fontface-ready>ready()</a> method.
805791

806-
<h3 class="heading settled heading" data-level=3.6 id=document-FontFaceSet><span class=secno>3.6 </span><span class=content>
807-
Extension to the <code>document</code> interface</span><a class=self-link href=#document-FontFaceSet></a></h3>
792+
<h2 class="heading settled heading" data-level=4 id=font-face-source><span class=secno>4 </span><span class=content>
793+
The <code>FontFaceSource</code> interface</span><a class=self-link href=#font-face-source></a></h2>
808794

809-
<p> To allow font loading to be tracked explicitly within content
810-
the following event target is added to the <code>document</code> of the page:
795+
<pre class=idl> interface <dfn class=idl-code data-dfn-type=interface data-export="" id=dom-fontfacesource>FontFaceSource<a class=self-link href=#dom-fontfacesource></a></dfn> {
796+
readonly attribute <a class=idl-code data-link-type=interface href=#dom-fontfaceset>FontFaceSet</a> <dfn class=idl-code data-dfn-for=FontFaceSource data-dfn-type=attribute data-export="" id=dom-fontfacesource-fonts>fonts<a class=self-link href=#dom-fontfacesource-fonts></a></dfn>;
797+
}
811798

812-
<pre class=idl> partial interface Document {
813-
readonly attribute FontFaceSet <dfn class=idl-code data-dfn-for=Document data-dfn-type=attribute data-export="" id=dom-document-fonts>fonts<a class=self-link href=#dom-document-fonts></a></dfn>;
814-
};
799+
Document implements <a class=idl-code data-link-type=interface href=#dom-fontfacesource>FontFaceSource</a>;
800+
WorkerGlobalScope implements <a class=idl-code data-link-type=interface href=#dom-fontfacesource>FontFaceSource</a>;
815801
</pre>
816-
<p class=issue id=issue-fbb9c14f><a class=self-link href=#issue-fbb9c14f></a>
817-
Look up what to do to add this to workers as well.
818-
I think I just need to add it to WorkerGlobalScope or something.
802+
<p> Any document, workers, or other context which can use fonts in some manner must implement the <a class=idl-code data-link-type=interface href=#dom-fontfacesource>FontFaceSource</a> interface.
803+
The value of the context’s <a class=idl-code data-link-type=attribute href=#dom-fontfacesource-fonts>fonts</a> attribute is its <dfn data-dfn-type=dfn data-noexport="" id=font-source>font source<a class=self-link href=#font-source></a></dfn>,
804+
which provides all of the fonts used in font-related operations,
805+
unless defined otherwise.
806+
Operations referring to “the font source” must be interpreted as referring to the <a href=#font-source>font source</a> of the relevant context in which the operation is taking place.
819807

820-
<h3 class="heading settled heading" data-level=3.7 id=worker-font-face-set><span class=secno>3.7 </span><span class=content>
821-
Extensions to the <code>WorkerGlobalScope</code> interface</span><a class=self-link href=#worker-font-face-set></a></h3>
808+
<p> For any font-related operation that takes place within one of these contexts,
809+
the <a class=idl-code data-link-type=interface>FontFace</a> objects within the <a href=#font-source>font source</a> are its <dfn data-dfn-type=dfn data-noexport="" id=available-fonts>available fonts<a class=self-link href=#available-fonts></a></dfn>.
822810

823-
<pre class=idl> partial interface WorkerGlobalScope {
824-
readonly attribute FontFaceSet <dfn class=idl-code data-dfn-for=WorkerGlobalScope data-dfn-type=attribute data-export="" id=dom-workerglobalscope-fonts>fonts<a class=self-link href=#dom-workerglobalscope-fonts></a></dfn>;
825-
};
826-
</pre>
827-
<h2 class="heading settled heading" data-level=4 id=font-load-event-examples><span class=secno>4 </span><span class=content>
811+
<p> In other words,
812+
user agents must act as if they used the methods defined in this specification,
813+
such as <a class=idl-code data-link-for=FontFaceSet data-link-type=method href=#dom-fontfaceset-matchfont-text title=match()>FontFaceSet#match()</a>,
814+
on the context’s <a href=#font-source>font source</a> in order to discover which font faces are available to use.
815+
816+
<h3 class="heading settled heading" data-level=4.1 id=document-font-face-set><span class=secno>4.1 </span><span class=content>
817+
Interaction with CSS’s <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> Rule</span><a class=self-link href=#document-font-face-set></a></h3>
818+
819+
<p> The set entries for a document’s <a href=#font-source>font source</a>
820+
must be initially populated with all the <a href=#css-connected>CSS-connected</a> <a class=idl-code data-link-type=interface>FontFace</a> objects
821+
from all of the CSS <a class=css data-link-type=maybe href=http://dev.w3.org/csswg/css-fonts-3/#at-font-face-rule>@font-face</a> rules in the document’s stylesheets,
822+
in document order.
823+
This ordering must be maintained regardless of how the <a class=idl-code data-link-type=interface>FontFace</a> object is added;
824+
if a script manually removes and then re-adds one of them,
825+
it returns to its appropriate document-order position in the initial segment of the set entries.
826+
All non-<a href=#css-connected>CSS-connected</a> <a class=idl-code data-link-type=interface>FontFace</a> objects must be sorted after the <a href=#css-connected>CSS-connected</a> ones,
827+
in insertion order.
828+
829+
<p> Adding or removing a stylesheet from the document must add or remove the corresponding <a href=#css-connected>CSS-connected</a> <a class=idl-code data-link-type=interface>FontFace</a> objects from the document’s <a href=#font-source>font source</a>.
830+
831+
832+
<h2 class="heading settled heading" data-level=5 id=font-load-event-examples><span class=secno>5 </span><span class=content>
828833
API Examples</span><a class=self-link href=#font-load-event-examples></a></h2>
829834

830835
<div class=example>
@@ -1057,10 +1062,11 @@ <h3 class="no-num no-ref heading settled heading" id=informative><span class=con
10571062
<h2 class="no-num no-ref heading settled heading" id=index><span class=content>
10581063
Index</span><a class=self-link href=#index></a></h2>
10591064
<div data-fill-with=index><ul class=indexlist>
1060-
<li>available font faces, <a href=#available-font-faces title="section 3">3</a>
1065+
<li>available fonts, <a href=#available-fonts title="section 4">4</a>
10611066
<li>characters, <a href=#dom-fontfacematch-match-characters title="section 2.4">2.4</a>
10621067
<li>check(), <a href=#dom-fontfaceset-checkfont-text title="section 3.4">3.4</a>
10631068
<li>Constructor(DOMString family, (DOMString or BinaryData) source, FontFaceDescriptors descriptors), <a href=#constructordomstring-family-domstring-or-binarydata-source-fontfacedescriptors-descriptors title="section 2.1">2.1</a>
1069+
<li>CSS-connected, <a href=#css-connected title="section 2.5">2.5</a>
10641070
<li>CSSFontFaceLoadEvent, <a href=#dom-cssfontfaceloadevent title="section 3">3</a>
10651071
<li>CSSFontFaceLoadEventInit, <a href=#dictdef-cssfontfaceloadeventinit title="section 3">3</a>
10661072
<li>[[Data]], <a href=#dom-fontface-data title="section 2">2</a>
@@ -1075,9 +1081,10 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
10751081
<li>fontfaces, <a href=#dom-cssfontfaceloadeventinit-fontfaces title="section 3">3</a>
10761082
<li>fontfaces, <a href=#dom-cssfontfaceloadevent-fontfaces title="section 3">3</a>
10771083
<li>FontFaceSet, <a href=#dom-fontfaceset title="section 3">3</a>
1084+
<li>FontFaceSource, <a href=#dom-fontfacesource title="section 4">4</a>
10781085
<li>font load, <a href=#font-load title="section 3">3</a>
1079-
<li>fonts, <a href=#dom-document-fonts title="section 3.6">3.6</a>
1080-
<li>fonts, <a href=#dom-workerglobalscope-fonts title="section 3.7">3.7</a>
1086+
<li>fonts, <a href=#dom-fontfacesource-fonts title="section 4">4</a>
1087+
<li>font source, <a href=#font-source title="section 4">4</a>
10811088
<li>[[FontStatusPromise]], <a href=#dom-fontface-fontstatuspromise title="section 2">2</a>
10821089
<li>load(), <a href=#dom-fontface-load title="section 2.2">2.2</a>
10831090
<li>load(), <a href=#dom-fontfaceset-loadfont-text title="section 3.3">3.3</a>
@@ -1124,8 +1131,4 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
11241131
Document the FontFaceSet behavior for Workers.
11251132
(They start out empty, but can construct fonts or be sent them via postMessage.)
11261133

1127-
<a href=#issue-30993915></a><p class=issue>
1128-
Look up what to do to add this to workers as well.
1129-
I think I just need to add it to WorkerGlobalScope or something.
1130-
1131-
<a href=#issue-fbb9c14f></a></div>
1134+
<a href=#issue-30993915></a></div>

0 commit comments

Comments
 (0)