[css-color] Define device-cmyk().

Author: tabatkins

css-color/Overview.html

@@ -40,7 +40,7 @@
 </a></p>
   <h1 class="p-name no-ref" id=title>CSS Color Module Level 4</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20130923>23 September 2013</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20130924>24 September 2013</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-color/>http://dev.w3.org/csswg/css-color/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-color/>http://dev.w3.org/csswg/css-color/</a>
 <dt>Feedback:</dt>
     <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-color%5D%20feedback">www-style@w3.org</a>
@@ -1698,12 +1698,52 @@ <h2 class="heading settled heading" data-level=6 id=grays><span class=secno>6 </
 
 
 <h2 class="heading settled heading" data-level=7 id=cmyk-colors><span class=secno>7 </span><span class=content>
-CMYK Colors: the <span class=css data-link-type=maybe title=device-cmyk()>device-cmyk()</span> function</span><a class=self-link href=#cmyk-colors></a></h2>
+CMYK Colors: the <a class=css data-link-type=maybe href=#funcdef-device-cmyk title=device-cmyk()>device-cmyk()</a> function</span><a class=self-link href=#cmyk-colors></a></h2>
 
-	<p class=issue id=issue-84e118fb><a class=self-link href=#issue-84e118fb></a>
-		Import the <span class=css data-link-type=maybe title=device-cmyk()>device-cmyk()</span> definition from GCPM,
-		filling in the spec details we hammered out at the Paris 2013 F2F.
+<p>	While screens typically display colors directly with RGB pixels,
+	printers often represent colors in different ways.
+	In particular, one of the most common print-based ways of representing colors is with CMYK:
+	a combination of cyan, magenta, yellow, and black.
+	The <a class=css data-link-type=maybe href=#funcdef-device-cmyk title=device-cmyk()>device-cmyk()</a> function allows authors to specify a color in this way:
 
+	<pre class=prod>  <dfn class=css-code data-dfn-type=function data-export="" id=funcdef-device-cmyk title=device-cmyk()>device-cmyk()<a class=self-link href=#funcdef-device-cmyk></a></dfn> = device-cmyk( <a class="production css-code" data-link-type=type href=#typedef-cmyk-components title="<cmyk-components>">&lt;cmyk-components&gt;</a> [, <a class="production css-code" data-link-type=type href=#typedef-alpha-value title="<alpha-value>">&lt;alpha-value&gt;</a>]? [, <a class="production css-code" data-link-type=type href=#typedef-color title="<color>">&lt;color&gt;</a> ]? )
+  <dfn class=css-code data-dfn-type=type data-export="" id=typedef-cmyk-components>&lt;cmyk-components&gt;<a class=self-link href=#typedef-cmyk-components></a></dfn> = <a class="production css-code" data-link-type=type href=#typedef-cmyk-component title="<cmyk-component>">&lt;cmyk-component&gt;</a>, <a class="production css-code" data-link-type=type href=#typedef-cmyk-component title="<cmyk-component>">&lt;cmyk-component&gt;</a>, <a class="production css-code" data-link-type=type href=#typedef-cmyk-component title="<cmyk-component>">&lt;cmyk-component&gt;</a>, <a class="production css-code" data-link-type=type href=#typedef-cmyk-component title="<cmyk-component>">&lt;cmyk-component&gt;</a>
+  <dfn class=css-code data-dfn-type=type data-export="" id=typedef-cmyk-component>&lt;cmyk-component&gt;<a class=self-link href=#typedef-cmyk-component></a></dfn> = <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#number-value title="<number>">&lt;number&gt;</a> | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#percentage-value title="<percentage>">&lt;percentage&gt;</a>
+</pre>
+<p>	The arguments of the <a class=css data-link-type=maybe href=#funcdef-device-cmyk title=device-cmyk()>device-cmyk()</a> function specify the cyan, magenta, yellow, and black components, in order,
+	as a number between 0 and 1 or a percentage between 0% and 100%.
+	These two usages are equivalent, and map to each other linearly.
+	Values less than 0 or 0%, or greater than 1 or 100%,
+	are not invalid;
+	instead, they are clamped to 0/0% or 1/100%.
+
+<p>	The fifth argument specifies the alpha channel of the color.
+	It’s interpreted identically to the fourth argument of the <a class=css data-link-type=maybe href=#funcdef-rgba title=rgba()>rgba()</a> function.
+	If omitted, it defaults to <span class=css data-link-type=maybe title=100%>100%</span>.
+
+<p>	The sixth argument specifies the fallback color,
+	used when the user agent doesn’t know how to accurately transform the CMYK color to RGB.
+	If omitted, it defaults to an RGBA color calculated as follows:
+
+<p>	<ul>
+		<li><code>red   = 1.0 - min(1.0, cyan + black)</code>
+		<li><code>green = 1.0 - min(1.0, magenta + black)</code>
+		<li><code>blue  = 1.0 - min(1.0, yellow + black)</code>
+		<li>Alpha remains as specified.
+	</ul>
+
+<p>	Typically, print-based applications will actually store the used colors as CMYK,
+	and send them to the printer in that form.
+	Unfortunately, CSS cannot do that;
+	various CSS features require an RGB color,
+	so that compositing/blending/etc. can be done.
+	As such, CMYK colors must be converted to an equivalent RGB color.
+	This is not trivial, like the conversion from HSL or HWB to RGB;
+	the precise conversion depends on the precise characteristics of the output device.
+
+<p>	If the user agent has information about the output device such that it believes it can accurately convert the CMYK color to a correct RGB color,
+	the computed value of the <a class=css data-link-type=maybe href=#funcdef-device-cmyk title=device-cmyk()>device-cmyk()</a> function must be that RGBA color.
+	Otherwise, the computed value must be the fallback color.
 
 
 <h2 class="heading settled heading" data-level=8 id=modifying-colors><span class=secno>8 </span><span class=content>
@@ -2633,6 +2673,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>CaptionText, <a href=#captiontext title="section Unnumbered section">Unnumbered section</a>
 <li>chartreuse (value), <a href=#valuedef-chartreuse title="section 3.3">3.3</a>
 <li>chocolate (value), <a href=#valuedef-chocolate title="section 3.3">3.3</a>
+<li>&lt;cmyk-component&gt;, <a href=#typedef-cmyk-component title="section 7">7</a>
+<li>&lt;cmyk-components&gt;, <a href=#typedef-cmyk-components title="section 7">7</a>
 <li>&lt;color&gt;, <a href=#typedef-color title="section 3">3</a>
 <li>color(), <a href=#funcdef-color title="section 8">8</a>
 <li>&lt;color-adjuster&gt;, <a href=#typedef-color-adjuster title="section 8">8</a>
@@ -2665,6 +2707,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>darkviolet (value), <a href=#valuedef-darkviolet title="section 3.3">3.3</a>
 <li>deeppink (value), <a href=#valuedef-deeppink title="section 3.3">3.3</a>
 <li>deepskyblue (value), <a href=#valuedef-deepskyblue title="section 3.3">3.3</a>
+<li>device-cmyk(), <a href=#funcdef-device-cmyk title="section 7">7</a>
 <li>dimgray (value), <a href=#valuedef-dimgray title="section 3.3">3.3</a>
 <li>dimgrey (value), <a href=#valuedef-dimgrey title="section 3.3">3.3</a>
 <li>dodgerblue (value), <a href=#valuedef-dodgerblue title="section 3.3">3.3</a>
@@ -2843,13 +2886,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 	</p><a href=#issue-f73c1044> ↵ </a></div>
 
 
-<p class=issue>
-		Import the <span class=css data-link-type=maybe title=device-cmyk()>device-cmyk()</span> definition from GCPM,
-		filling in the spec details we hammered out at the Paris 2013 F2F.
-
-
-
-<a href=#issue-84e118fb> ↵ </a><div class=issue>
+<div class=issue>
 		More possibilities:
 
 <p>		<ul>

css-color/Overview.src.html

@@ -1635,10 +1635,52 @@ <h2 id='grays'>
 <h2 id='cmyk-colors'>
 CMYK Colors: the ''device-cmyk()'' function</h2>
 
-	<p class='issue'>
-		Import the ''device-cmyk()'' definition from GCPM,
-		filling in the spec details we hammered out at the Paris 2013 F2F.
+	While screens typically display colors directly with RGB pixels,
+	printers often represent colors in different ways.
+	In particular, one of the most common print-based ways of representing colors is with CMYK:
+	a combination of cyan, magenta, yellow, and black.
+	The ''device-cmyk()'' function allows authors to specify a color in this way:
+
+	<pre class='prod'>
+		<dfn>device-cmyk()</dfn> = device-cmyk( <<cmyk-components>> [, <<alpha-value>>]? [, <<color>> ]? )
+		<dfn>&lt;cmyk-components></dfn> = <<cmyk-component>>, <<cmyk-component>>, <<cmyk-component>>, <<cmyk-component>>
+		<dfn>&lt;cmyk-component></dfn> = <<number>> | <<percentage>>
+	</pre>
+
+	The arguments of the ''device-cmyk()'' function specify the cyan, magenta, yellow, and black components, in order,
+	as a number between 0 and 1 or a percentage between 0% and 100%.
+	These two usages are equivalent, and map to each other linearly.
+	Values less than 0 or 0%, or greater than 1 or 100%,
+	are not invalid;
+	instead, they are clamped to 0/0% or 1/100%.
+
+	The fifth argument specifies the alpha channel of the color.
+	It's interpreted identically to the fourth argument of the ''rgba()'' function.
+	If omitted, it defaults to ''100%''.
+
+	The sixth argument specifies the fallback color,
+	used when the user agent doesn't know how to accurately transform the CMYK color to RGB.
+	If omitted, it defaults to an RGBA color calculated as follows:
+
+	<ul>
+		<li><code>red   = 1.0 - min(1.0, cyan + black)</code>
+		<li><code>green = 1.0 - min(1.0, magenta + black)</code>
+		<li><code>blue  = 1.0 - min(1.0, yellow + black)</code>
+		<li>Alpha remains as specified.
+	</ul>
 
+	Typically, print-based applications will actually store the used colors as CMYK,
+	and send them to the printer in that form.
+	Unfortunately, CSS cannot do that;
+	various CSS features require an RGB color,
+	so that compositing/blending/etc. can be done.
+	As such, CMYK colors must be converted to an equivalent RGB color.
+	This is not trivial, like the conversion from HSL or HWB to RGB;
+	the precise conversion depends on the precise characteristics of the output device.
+
+	If the user agent has information about the output device such that it believes it can accurately convert the CMYK color to a correct RGB color,
+	the computed value of the ''device-cmyk()'' function must be that RGBA color.
+	Otherwise, the computed value must be the fallback color.
 
 
 <h2 id='modifying-colors'>