├── CODE_OF_CONDUCT.md ├── OFF_AMD2_WD.md ├── README.md ├── colr-gradients-spec.md ├── images ├── PaintCompositeGraph.svg ├── U+1F3B5_notes.svg ├── clock-1.svg ├── clock-2.svg ├── clock-common.svg ├── clock-common_contiguous-layers.svg ├── color_line_extend_modes.svg ├── colr.pptx ├── colr_PaintColrLayers_as_root.png ├── colr_PaintCompositeGraph.png ├── colr_blend_lighten.png ├── colr_clock-1.svg ├── colr_clock-12.svg ├── colr_clock-2.svg ├── colr_clock_common.png ├── colr_clocks-12-1-2.png ├── colr_color_glyph_without_layers.png ├── colr_conic_gradient.png ├── colr_conic_gradient_rotation-0.png ├── colr_conic_gradient_rotation-150.png ├── colr_conic_gradient_sharp_transition.png ├── colr_conic_gradient_start_stop_angles.png ├── colr_filled_shapes.svg ├── colr_gradient_extend_pad.png ├── colr_gradient_extend_reflect.png ├── colr_gradient_extend_repeat.png ├── colr_gradient_mask.png ├── colr_gradient_mask.svg ├── colr_hour-hand-component.png ├── colr_layers_v0.png ├── colr_layers_v1.png ├── colr_linear_gradients_pad.png ├── colr_linear_gradients_reflect.png ├── colr_linear_gradients_repeat.png ├── colr_porter-duff_xor.png ├── colr_radial_gradients.png ├── colr_radial_gradients_circle_within_circle.png ├── colr_radial_gradients_circle_within_circle_pad.png ├── colr_radial_gradients_circle_within_circle_reflect.png ├── colr_radial_gradients_circle_within_circle_repeat.png ├── colr_radial_gradients_direction.png ├── colr_radial_gradients_direction_1.png ├── colr_radial_gradients_direction_2.png ├── colr_radial_gradients_direction_3.png ├── colr_radial_gradients_inner_circle_touching_outer_pad.png ├── colr_radial_gradients_interference_patterns_reflect.png ├── colr_radial_gradients_pad.png ├── colr_radial_gradients_reflect.png ├── colr_radial_gradients_repeat.png ├── colr_radial_gradients_strip.png ├── colr_radial_gradients_strip_pad.png ├── colr_radial_gradients_strip_reflect.png ├── colr_radial_gradients_strip_repeat.png ├── colr_reuse-hour-hand-rotated.png ├── colr_reuse_clock-face_PaintColrGlyph.png ├── colr_reuse_clock-face_PaintColrLayers.png ├── colr_shape_gradient.png ├── colr_shape_shape_gradient.png ├── colr_transform_glyph_gradient.png ├── colr_transform_glyph_transform_gradient.png ├── colr_v0_emoji_sample.png ├── colr_v0_layering.png ├── colr_v1_emoji_sample.png ├── colrv1_enable.png ├── composite_blend.html ├── conic_gradients.html ├── hour_hands.svg ├── linear_gradients_1.svg ├── linear_gradients_2.svg ├── radial_gradients.svg ├── radial_gradients_circle_within_circle.svg ├── radial_gradients_direction.svg ├── radial_gradients_inner_circle_touching_outer.svg ├── radial_gradients_interference_patterns.svg ├── radial_gradients_strip.svg ├── repeating_linear.png └── repeating_radial.png └── iso_docx ├── 2020-10-06-m55371-WG03-COLR-v1-proposal.docx └── OFF_AM2_2020-12-29.docx /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, caste, color, religion, or sexual identity and orientation. 6 | 7 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. 8 | 9 | ## Our Standards 10 | 11 | Examples of behavior that contributes to a positive environment for our community include: 12 | 13 | * Demonstrating empathy and kindness toward other people 14 | * Being respectful of differing opinions, viewpoints, and experiences 15 | * Giving and gracefully accepting constructive feedback 16 | * Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience 17 | * Focusing on what is best not just for us as individuals, but for the overall community 18 | 19 | Examples of unacceptable behavior include: 20 | 21 | * The use of sexualized language or imagery, and sexual attention or advances of any kind 22 | * Trolling, insulting or derogatory comments, and personal or political attacks 23 | * Public or private harassment 24 | * Publishing others’ private information, such as a physical or email address, without their explicit permission 25 | * Other conduct which could reasonably be considered inappropriate in a professional setting 26 | 27 | ## Enforcement Responsibilities 28 | Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. 29 | 30 | Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. 31 | 32 | ## Scope 33 | 34 | This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. 35 | 36 | ## Enforcement 37 | 38 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at dcrossland@google.com. All complaints will be reviewed and investigated promptly and fairly. 39 | 40 | All community leaders are obligated to respect the privacy and security of the reporter of any incident. 41 | 42 | ## Enforcement Guidelines 43 | 44 | Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 45 | 46 | ### 1. Correction 47 | 48 | Community Impact: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. 49 | 50 | Consequence: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 51 | 52 | ### 2. Warning 53 | 54 | Community Impact: A violation through a single incident or series of actions. 55 | 56 | Consequence: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 57 | 58 | ### 3. Temporary Ban 59 | 60 | Community Impact: A serious violation of community standards, including sustained inappropriate behavior. 61 | 62 | Consequence: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 63 | 64 | ### 4. Permanent Ban 65 | Community Impact: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. 66 | 67 | Consequence: A permanent ban from any sort of public interaction within the community. 68 | 69 | ## Attribution 70 | 71 | This Code of Conduct is adapted from the Contributor Covenant, version 2.1, available at https://www.contributor-covenant.org/version/2/1/code_of_conduct.html. 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | colr-gradients-spec.md -------------------------------------------------------------------------------- /colr-gradients-spec.md: -------------------------------------------------------------------------------- 1 | # Gradients for COLR/CPAL Fonts 2 | 3 | December 2019 4 | 5 | ### Authors: 6 | * Behdad Esfahbod ([@behdad](https://github.com/behdad)) 7 | * Dominik Röttsches ([@drott](https://github.com/drott)) 8 | * Roderick Sheeter ([@rsheeter](https://github.com/rsheeter)) 9 | 10 | ## Table of Contents 11 | 12 | - [Introduction](#introduction) 13 | - [Extending ISO/IEC 14496-22 Open Font Format](#extending-isoiec-14496-22-open-font-format) 14 | - [Implementation](#implementation) 15 | - [Font Tooling](#font-tooling) 16 | - [Chromium, Skia, FreeType support](#chromium-skia-freetype-support) 17 | - [C++ Structures](#c-structures) 18 | - [Rendering](#rendering) 19 | - [Pseudocode](#pseudocode) 20 | - [HarfBuzz](#harfbuzz) 21 | - [References](#references) 22 | - [Acknowledgements](#acknowledgements) 23 | 24 | # Introduction 25 | 26 | We propose an extension of the COLR table to support greater graphic 27 | capabilities. The current version number of COLR table is 0. We propose this as 28 | COLR table format version 1. 29 | 30 | The initial design proposal aimed to add support for gradient fills, in addition 31 | to the existing solid color fills, and to integrate variation into color formats 32 | in variable fonts. As the design work progressed, it seemed appropriate to 33 | introduce other capabilities: 34 | 35 | * Different composition modes 36 | * Affine transformations 37 | * Flexible means of re-use of components to provide size reduction 38 | 39 | While extending the design for these additional capabilities, it also seemed 40 | appropriate to change the basic structure for color glyph descriptions from a 41 | vector of layered elements to be a directed, acyclic graph. 42 | 43 | It is our understanding that this brings the capabilities of COLR/CPAL to nearly 44 | match those of [SVG Native](https://svgwg.org/specs/svg-native/) for vector 45 | graphics. SVG Native allows embedding PNG and JPEG images while this proposal 46 | does not. We'd like to explore in the future, how COLR/CPAL can be mixed with 47 | sbix to address that limitation as well. 48 | 49 | The aim is for version 1 of the COLR table to be incorporated into a future 50 | version of the OpenType spec and into an update of the ISO/IEC 14496-22 Open 51 | Font Format (OFF) standard. 52 | 53 | Earlier revisions of this document provided many details regarding the proposed 54 | COLR extensions. These have since been moved and elaborated with full details in 55 | a separate document for submission to OFF—see the next section. 56 | 57 | # Extending ISO/IEC 14496-22 Open Font Format 58 | 59 | The COLR version 1 enhancements have been proposed for incorporation into the 60 | ISO/IEC 14496-22 Open Font Format standard. In ISO process, this would be done 61 | as an amendment (Amendment 2) of the current edition of that standard. Content 62 | for a working draft of that amendment has been prepared in a separate doc: 63 | [Proposed changes to ISO/IEC 14496-22 (Amendment 2)](OFF_AMD2_WD.md). 64 | 65 | # Implementation 66 | 67 | **This section is NOT meant for ISO submissions** 68 | 69 | ## Font Tooling 70 | 71 | Cosimo ([@anthrotype](https://github.com/anthrotype)) and Rod ([@rsheeter](https://github.com/rsheeter)) 72 | have implemented [nanoemoji](https://github.com/googlefonts/nanoemoji) to compile a set of SVGs into color 73 | font formats, including COLR v1. 74 | 75 | [color-fonts](https://github.com/googlefonts/color-fonts) has a collection of sample color fonts. 76 | 77 | ## Chromium, Skia, Freetype support 78 | 79 | Chrome Canary as of version 90.0.4421.5 and above supports COLRv1 fonts when switching on the COLR v1 flag. Chrome 98+ ship COLRv1 enabled by default, see https://developer.chrome.com/blog/colrv1-fonts/. 80 | 81 | To enable the feature and experiment with it, follow these steps: 82 | 1. Download and open [Chrome Canary](https://www.google.com/chrome/canary/), 83 | make sure it's updated to a version equal or newer than 90.0.4421.5. 84 | 2. Go to [chrome://flags/#colr-v1-fonts](chrome://flags/#colr-v1-fonts) and 85 | enable the feature. 86 | 87 | ![Screenshot of Chrome flag settings page.](images/colrv1_enable.png) 88 | 89 | __Skia__ support is in tip-of-tree Skia, [implementation details](https://source.chromium.org/chromium/chromium/src/+/master:third_party/skia/src/ports/SkFontHost_FreeType_common.cpp;l=375) 90 | 91 | __FreeType__ support is in tip-of-tree FreeType, see [freetype.h](https://gitlab.freedesktop.org/freetype/freetype/-/blob/master/include/freetype/freetype.h#L4995) for API details. 92 | 93 | 94 | ## C++ Structures 95 | 96 | The following provides a C++ implementation of the structures defined above. 97 | 98 | ```C++ 99 | // Base template types 100 | 101 | template 102 | struct ArrayOf 103 | { 104 | Length count; 105 | T array[/*count*/]; 106 | }; 107 | 108 | // Index of the first variation record in the variation index map or 109 | // variation store if no variation index map is present. 110 | // A record with N variable fields finds them at VarIdxBase+0, ...,+N-1 111 | // Use 0xFFFFFFFF to indicate no variation. 112 | typedef uint32 VarIdxBase; 113 | 114 | // Color structures 115 | 116 | // The (Var)ColorStop alpha is multiplied into the alpha of the CPAL entry 117 | // (converted to float -- divide by 255) looked up using paletteIndex to 118 | // produce a final alpha. 119 | struct ColorStop 120 | { 121 | F2DOT14 stopOffset; 122 | uint16 paletteIndex; 123 | F2DOT14 alpha; // Default 1.0. Values outside [0.,1.] reserved. 124 | }; 125 | 126 | struct VarColorStop 127 | { 128 | F2DOT14 stopOffset; // VarIdx varIndexBase + 0 129 | uint16 paletteIndex; 130 | F2DOT14 alpha; // Default 1.0. Values outside [0.,1.] reserved. 131 | // VarIdx varIndexBase + 1 132 | VarIdxBase varIndexBase; 133 | }; 134 | 135 | enum Extend : uint8 136 | { 137 | EXTEND_PAD = 0, 138 | EXTEND_REPEAT = 1, 139 | EXTEND_REFLECT = 2, 140 | }; 141 | 142 | struct ColorLine 143 | { 144 | Extend extend; 145 | ArrayOf colorStops; 146 | }; 147 | 148 | struct VarColorLine 149 | { 150 | Extend extend; 151 | ArrayOf colorStops; 152 | }; 153 | 154 | 155 | // Composition modes 156 | 157 | // Compositing modes are taken from https://www.w3.org/TR/compositing-1/ 158 | // NOTE: a brief audit of major implementations suggests most support most 159 | // or all of the specified modes. 160 | enum CompositeMode : uint8 161 | { 162 | // Porter-Duff modes 163 | // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators 164 | COMPOSITE_CLEAR = 0, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_clear 165 | COMPOSITE_SRC = 1, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_src 166 | COMPOSITE_DEST = 2, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dst 167 | COMPOSITE_SRC_OVER = 3, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcover 168 | COMPOSITE_DEST_OVER = 4, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstover 169 | COMPOSITE_SRC_IN = 5, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcin 170 | COMPOSITE_DEST_IN = 6, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstin 171 | COMPOSITE_SRC_OUT = 7, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcout 172 | COMPOSITE_DEST_OUT = 8, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstout 173 | COMPOSITE_SRC_ATOP = 9, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_srcatop 174 | COMPOSITE_DEST_ATOP = 10, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_dstatop 175 | COMPOSITE_XOR = 11, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_xor 176 | COMPOSITE_PLUS = 12, // https://www.w3.org/TR/compositing-1/#porterduffcompositingoperators_plus 177 | 178 | // Blend modes 179 | // https://www.w3.org/TR/compositing-1/#blending 180 | COMPOSITE_SCREEN = 13, // https://www.w3.org/TR/compositing-1/#blendingscreen 181 | COMPOSITE_OVERLAY = 14, // https://www.w3.org/TR/compositing-1/#blendingoverlay 182 | COMPOSITE_DARKEN = 15, // https://www.w3.org/TR/compositing-1/#blendingdarken 183 | COMPOSITE_LIGHTEN = 16, // https://www.w3.org/TR/compositing-1/#blendinglighten 184 | COMPOSITE_COLOR_DODGE = 17, // https://www.w3.org/TR/compositing-1/#blendingcolordodge 185 | COMPOSITE_COLOR_BURN = 18, // https://www.w3.org/TR/compositing-1/#blendingcolorburn 186 | COMPOSITE_HARD_LIGHT = 19, // https://www.w3.org/TR/compositing-1/#blendinghardlight 187 | COMPOSITE_SOFT_LIGHT = 20, // https://www.w3.org/TR/compositing-1/#blendingsoftlight 188 | COMPOSITE_DIFFERENCE = 21, // https://www.w3.org/TR/compositing-1/#blendingdifference 189 | COMPOSITE_EXCLUSION = 22, // https://www.w3.org/TR/compositing-1/#blendingexclusion 190 | COMPOSITE_MULTIPLY = 23, // https://www.w3.org/TR/compositing-1/#blendingmultiply 191 | 192 | // Modes that, uniquely, do not operate on components 193 | // https://www.w3.org/TR/compositing-1/#blendingnonseparable 194 | COMPOSITE_HSL_HUE = 24, // https://www.w3.org/TR/compositing-1/#blendinghue 195 | COMPOSITE_HSL_SATURATION = 25, // https://www.w3.org/TR/compositing-1/#blendingsaturation 196 | COMPOSITE_HSL_COLOR = 26, // https://www.w3.org/TR/compositing-1/#blendingcolor 197 | COMPOSITE_HSL_LUMINOSITY = 27, // https://www.w3.org/TR/compositing-1/#blendingluminosity 198 | }; 199 | 200 | // Affine 2D transformations 201 | 202 | // This is a standard 2x3 matrix for 2D affine transformation. 203 | struct Affine2x3 204 | { 205 | Fixed xx; 206 | Fixed yx; 207 | Fixed xy; 208 | Fixed yy; 209 | Fixed dx; 210 | Fixed dy; 211 | }; 212 | 213 | struct VarAffine2x3 214 | { 215 | Fixed xx; // VarIdx varIndexBase + 0 216 | Fixed yx; // VarIdx varIndexBase + 1 217 | Fixed xy; // VarIdx varIndexBase + 2 218 | Fixed yy; // VarIdx varIndexBase + 3 219 | Fixed dx; // VarIdx varIndexBase + 4 220 | Fixed dy; // VarIdx varIndexBase + 5 221 | VarIdxBase varIndexBase; 222 | }; 223 | 224 | // Paint tables 225 | 226 | // Each layer is composited on top of previous with mode COMPOSITE_SRC_OVER. 227 | // NOTE: uint8 size saves bytes in most cases and does not 228 | // preclude use of large layer counts via PaintComposite or a tree 229 | // of PaintColrLayers. 230 | struct PaintColrLayers 231 | { 232 | uint8 format; // = 1 233 | uint8 numLayers; 234 | uint32 firstLayerIndex; // index into COLRv1::layerList 235 | } 236 | 237 | // The Paint(Var)Solid alpha is multiplied into the alpha of the CPAL entry 238 | // (converted to float -- divide by 255) looked up using paletteIndex to 239 | // produce a final alpha. 240 | struct PaintSolid 241 | { 242 | uint8 format; // = 2 243 | uint16 paletteIndex; 244 | F2DOT14 alpha; // Default 1.0. Values outside [0.,1.] reserved. 245 | }; 246 | 247 | struct PaintVarSolid 248 | { 249 | uint8 format; // = 3 250 | uint16 paletteIndex; 251 | F2DOT14 alpha; // Default 1.0. Values outside [0.,1.] reserved. 252 | // VarIdx varIndexBase + 0 253 | VarIdxBase varIndexBase; 254 | }; 255 | 256 | struct PaintLinearGradient 257 | { 258 | uint8 format; // = 4 259 | Offset24 colorLine; 260 | FWORD x0; 261 | FWORD y0; 262 | FWORD x1; 263 | FWORD y1; 264 | FWORD x2; // Normal; Equal to (x1,y1) in simple cases. 265 | FWORD y2; 266 | }; 267 | 268 | struct PaintVarLinearGradient 269 | { 270 | uint8 format; // = 5 271 | Offset24 colorLine; 272 | FWORD x0; // VarIdx varIndexBase + 0 273 | FWORD y0; // VarIdx varIndexBase + 1 274 | FWORD x1; // VarIdx varIndexBase + 2 275 | FWORD y1; // VarIdx varIndexBase + 3 276 | FWORD x2; // VarIdx varIndexBase + 4. Normal; Equal to (x1,y1) in simple cases. 277 | FWORD y2; // VarIdx varIndexBase + 5 278 | VarIdxBase varIndexBase; 279 | }; 280 | 281 | struct PaintRadialGradient 282 | { 283 | uint8 format; // = 6 284 | Offset24 colorLine; 285 | FWORD x0; 286 | FWORD y0; 287 | UFWORD radius0; 288 | FWORD x1; 289 | FWORD y1; 290 | UFWORD radius1; 291 | }; 292 | 293 | struct PaintVarRadialGradient 294 | { 295 | uint8 format; // = 7 296 | Offset24 colorLine; 297 | FWORD x0; // VarIdx varIndexBase + 0 298 | FWORD y0; // VarIdx varIndexBase + 1 299 | UFWORD radius0; // VarIdx varIndexBase + 2 300 | FWORD x1; // VarIdx varIndexBase + 3 301 | FWORD y1; // VarIdx varIndexBase + 4 302 | UFWORD radius1; // VarIdx varIndexBase + 5 303 | VarIdxBase varIndexBase; 304 | }; 305 | 306 | struct PaintSweepGradient 307 | { 308 | uint8 format; // = 8 309 | Offset24 colorLine; 310 | FWORD centerX; 311 | FWORD centerY; 312 | F2DOT14 startAngle; // 180° in counter-clockwise degrees per 1.0 of value 313 | F2DOT14 endAngle; // 180° in counter-clockwise degrees per 1.0 of value 314 | }; 315 | 316 | struct PaintVarSweepGradient 317 | { 318 | uint8 format; // = 9 319 | Offset24 colorLine; 320 | FWORD centerX; // VarIdx varIndexBase + 0 321 | FWORD centerY; // VarIdx varIndexBase + 1 322 | F2DOT14 startAngle; // VarIdx varIndexBase + 2. 180° in counter-clockwise degrees per 1.0 of value 323 | F2DOT14 endAngle; // VarIdx varIndexBase + 3. 180° in counter-clockwise degrees per 1.0 of value 324 | VarIdxBase varIndexBase; 325 | }; 326 | 327 | // Paint a non-COLR glyph, filled as indicated by paint. 328 | struct PaintGlyph 329 | { 330 | uint8 format; // = 10 331 | Offset24 paint; 332 | uint16 glyphID; // not a COLR-only gid 333 | // shall be less than maxp.numGlyphs 334 | } 335 | 336 | struct PaintColrGlyph 337 | { 338 | uint8 format; // = 11 339 | uint16 glyphID; // shall be a COLR gid 340 | } 341 | 342 | struct PaintTransform 343 | { 344 | uint8 format; // = 12 345 | Offset24 paint; 346 | Offset24 transform; 347 | }; 348 | 349 | struct PaintVarTransform 350 | { 351 | uint8 format; // = 13 352 | Offset24 paint; 353 | Offset24 transform; 354 | }; 355 | 356 | struct PaintTranslate 357 | { 358 | uint8 format; // = 14 359 | Offset24 paint; 360 | FWORD dx; 361 | FWORD dy; 362 | }; 363 | 364 | struct PaintVarTranslate 365 | { 366 | uint8 format; // = 15 367 | Offset24 paint; 368 | FWORD dx; // VarIdx varIndexBase + 0 369 | FWORD dy; // VarIdx varIndexBase + 1 370 | VarIdxBase varIndexBase; 371 | }; 372 | 373 | struct PaintScale 374 | { 375 | uint8 format; // = 16 376 | Offset24 paint; 377 | F2DOT14 scaleX; 378 | F2DOT14 scaleY; 379 | }; 380 | 381 | struct PaintVarScale 382 | { 383 | uint8 format; // = 17 384 | Offset24 paint; 385 | F2DOT14 scaleX; // VarIdx varIndexBase + 0 386 | F2DOT14 scaleY; // VarIdx varIndexBase + 1 387 | VarIdxBase varIndexBase; 388 | }; 389 | 390 | struct PaintScaleAroundCenter 391 | { 392 | uint8 format; // = 18 393 | Offset24 paint; 394 | F2DOT14 scaleX; 395 | F2DOT14 scaleY; 396 | FWORD centerX; 397 | FWORD centerY; 398 | }; 399 | 400 | struct PaintVarScaleAroundCenter 401 | { 402 | uint8 format; // = 19 403 | Offset24 paint; 404 | F2DOT14 scaleX; // VarIdx varIndexBase + 0 405 | F2DOT14 scaleY; // VarIdx varIndexBase + 1 406 | FWORD centerX; // VarIdx varIndexBase + 2 407 | FWORD centerY; // VarIdx varIndexBase + 3 408 | VarIdxBase varIndexBase; 409 | }; 410 | 411 | struct PaintScaleUniform 412 | { 413 | uint8 format; // = 20 414 | Offset24 paint; 415 | F2DOT14 scale; 416 | }; 417 | 418 | struct PaintVarScaleUniform 419 | { 420 | uint8 format; // = 21 421 | Offset24 paint; 422 | F2DOT14 scale; // VarIdx varIndexBase + 0 423 | VarIdxBase varIndexBase; 424 | }; 425 | 426 | struct PaintScaleUniformAroundCenter 427 | { 428 | uint8 format; // = 22 429 | Offset24 paint; 430 | F2DOT14 scale; 431 | FWORD centerX; 432 | FWORD centerY; 433 | }; 434 | 435 | struct PaintVarScaleUniformAroundCenter 436 | { 437 | uint8 format; // = 23 438 | Offset24 paint; 439 | F2DOT14 scale; // VarIdx varIndexBase + 0 440 | FWORD centerX; // VarIdx varIndexBase + 1 441 | FWORD centerY; // VarIdx varIndexBase + 2 442 | VarIdxBase varIndexBase; 443 | }; 444 | 445 | struct PaintRotate 446 | { 447 | uint8 format; // = 24 448 | Offset24 paint; 449 | F2DOT14 angle; // 180° in counter-clockwise degrees per 1.0 of value 450 | }; 451 | 452 | struct PaintVarRotate 453 | { 454 | uint8 format; // = 25 455 | Offset24 paint; 456 | F2DOT14 angle; // VarIdx varIndexBase + 0. 180° in counter-clockwise degrees per 1.0 of value 457 | VarIdxBase varIndexBase; 458 | }; 459 | 460 | struct PaintRotateAroundCenter 461 | { 462 | uint8 format; // = 26 463 | Offset24 paint; 464 | F2DOT14 angle; // 180° in counter-clockwise degrees per 1.0 of value 465 | FWORD centerX; 466 | FWORD centerY; 467 | }; 468 | 469 | struct PaintVarRotateAroundCenter 470 | { 471 | uint8 format; // = 27 472 | Offset24 paint; 473 | F2DOT14 angle; // VarIdx varIndexBase + 0. 180° in counter-clockwise degrees per 1.0 of value 474 | FWORD centerX; // VarIdx varIndexBase + 1 475 | FWORD centerY; // VarIdx varIndexBase + 2 476 | VarIdxBase varIndexBase; 477 | }; 478 | 479 | struct PaintSkew 480 | { 481 | uint8 format; // = 28 482 | Offset24 paint; 483 | F2DOT14 xSkewAngle; // 180° in counter-clockwise degrees per 1.0 of value 484 | F2DOT14 ySkewAngle; // 180° in counter-clockwise degrees per 1.0 of value 485 | }; 486 | 487 | struct PaintVarSkew 488 | { 489 | uint8 format; // = 29 490 | Offset24 paint; 491 | F2DOT14 xSkewAngle; // VarIdx varIndexBase + 0. 180° in counter-clockwise degrees per 1.0 of value 492 | F2DOT14 ySkewAngle; // VarIdx varIndexBase + 1. 180° in counter-clockwise degrees per 1.0 of value 493 | VarIdxBase varIndexBase; 494 | }; 495 | 496 | struct PaintSkewAroundCenter 497 | { 498 | uint8 format; // = 30 499 | Offset24 paint; 500 | F2DOT14 xSkewAngle; // 180° in counter-clockwise degrees per 1.0 of value 501 | F2DOT14 ySkewAngle; // 180° in counter-clockwise degrees per 1.0 of value 502 | FWORD centerX; 503 | FWORD centerY; 504 | }; 505 | 506 | struct PaintVarSkewAroundCenter 507 | { 508 | uint8 format; // = 31 509 | Offset24 paint; 510 | F2DOT14 xSkewAngle; // VarIdx varIndexBase + 0. 180° in counter-clockwise degrees per 1.0 of value 511 | F2DOT14 ySkewAngle; // VarIdx varIndexBase + 1. 180° in counter-clockwise degrees per 1.0 of value 512 | FWORD centerX; // VarIdx varIndexBase + 2 513 | FWORD centerY; // VarIdx varIndexBase + 3 514 | VarIdxBase varIndexBase; 515 | }; 516 | 517 | struct PaintComposite 518 | { 519 | uint8 format; // = 32 520 | Offset24 sourcePaint; 521 | CompositeMode compositeMode; // If mode is unrecognized use COMPOSITE_CLEAR 522 | Offset24 backdropPaint; 523 | }; 524 | 525 | struct ClipBox { 526 | uint8 format; // = 1 527 | FWORD xMin; 528 | FWORD yMin; 529 | FWORD xMax; 530 | FWORD yMax; 531 | } 532 | 533 | struct VarClipBox { 534 | uint8 format; // = 2 535 | FWORD xMin; // VarIdx varIndexBase + 0. 536 | FWORD yMin; // VarIdx varIndexBase + 1. 537 | FWORD xMax; // VarIdx varIndexBase + 2. 538 | FWORD yMax; // VarIdx varIndexBase + 3. 539 | VarIdxBase varIndexBase; // Set to 0 in non-variable fonts. 540 | } 541 | 542 | struct Clip { 543 | uint16 startGlyphID; // first gid clip applies to 544 | uint16 endGlyphID; // last gid clip applies to, inclusive 545 | Offset24 clipBox; // Box or VarBox 546 | } 547 | 548 | struct BaseGlyphPaintRecord 549 | { 550 | uint16 glyphID; 551 | Offset32 paint; // Typically PaintColrLayers 552 | }; 553 | 554 | // Entries shall be sorted in ascending order of the `glyphID` field of the `BaseGlyphPaintRecord`s. 555 | typedef ArrayOf BaseGlyphList; 556 | 557 | // Only layers accessed via PaintColrLayers (format 1) need be encoded here. 558 | typedef ArrayOf, uint32> LayerList; 559 | 560 | struct ClipList 561 | { 562 | uint8 format; // Set to 1. 563 | ArrayOf clips; // Clip records, sorted by startGlyphID 564 | } 565 | 566 | struct COLRv1 567 | { 568 | // Version-0 fields 569 | uint16 version; 570 | uint16 numBaseGlyphRecords; 571 | Offset32> baseGlyphRecords; 572 | Offset32> layerRecords; 573 | uint16 numLayerRecords; 574 | // Version-1 additions 575 | Offset32 baseGlyphList; 576 | Offset32 layerList; 577 | Offset32 clipList; // May be NULL 578 | Offset32 varIdxMap; // May be NULL 579 | Offset32 varStore; 580 | }; 581 | 582 | ``` 583 | 584 | ## Rendering 585 | 586 | ### Pseudocode 587 | 588 | ``` 589 | Allocate a bitmap for the glyph, using the ClipBox for the glyph (if present) or 590 | by traversing the paint graph to determine bounds. 591 | 0) Start at base glyph paint. 592 | a) Paint a paint, switch: 593 | 1) PaintColrLayers 594 | Paint each referenced layer by performing a) 595 | 2) PaintSolid 596 | SkCanvas::drawColor with color configured 597 | 3) PaintLinearGradient 598 | SkCanvas::drawPaint with liner gradient configured 599 | (expected to be bounded by parent composite mode or clipped by current clip, check bounds?) 600 | 4) PaintRadialGradient 601 | SkCanvas::drawPaint with radial gradient configured 602 | (expected to be bounded by parent composite mode or clipped by current clip, check bounds?) 603 | 5) PaintGlyph 604 | gid must not COLRv1 605 | saveLayer 606 | setClipPath to gid path 607 | recurse to a) 608 | restore 609 | 6) PaintColrGlyph 610 | gid must be from 611 | if gid on recursion blacklist, do nothing 612 | recurse to 0) with different gid 613 | 7) PaintTransform 614 | saveLayer() 615 | apply transform 616 | call a) for paint 617 | restore 618 | 8) PaintTranslate 619 | saveLayer() 620 | apply transform 621 | call a) for paint 622 | restore 623 | 9) PaintScale 624 | saveLayer() 625 | apply transform 626 | call a) for paint 627 | restore 628 | 10) PaintRotate 629 | saveLayer() 630 | apply transform 631 | call a) for paint 632 | restore 633 | 11) PaintSkew 634 | saveLayer() 635 | apply transform 636 | call a) for paint 637 | restore 638 | 12) PaintComposite 639 | saveLayer() 640 | paint Paint for backdrop, call a) 641 | saveLayer() with setting composite mode on SkPaint 642 | paint Paint for src, call a) 643 | restore with saved composite mode 644 | restore the outer layer 645 | ``` 646 | 647 | ## HarfBuzz 648 | 649 | HarfBuzz implementation will follow later. No major client relies on HarfBuzz 650 | for color fonts currently, but we certainly want to implement later as there are 651 | clients who like to remove FreeType dependency completely. 652 | 653 | # References 654 | 655 | * 2D Graphics Libraries 656 | * [Cairo](https://cairographics.org/) 657 | * [Skia](https://skia.org/) 658 | * [CoreGraphics](https://developer.apple.com/documentation/coregraphics) 659 | * [Direct2D](https://docs.microsoft.com/en-us/windows/win32/direct2d/direct2d-portal) 660 | 661 | # Acknowledgements 662 | 663 | Thanks to Benjamin Wagner ([@bungeman](https://github.com/bungeman)), Dave 664 | Crossland ([@davelab6](https://github.com/davelab6)), and Roderick Sheeter 665 | ([@rsheeter](https://github.com/rsheeter)) for review and detailed feedback on 666 | earlier proposal. 667 | - [Gradients for COLR/CPAL Fonts](#gradients-for-colrcpal-fonts) 668 | - [Authors:](#authors) 669 | - [Table of Contents](#table-of-contents) 670 | - [Introduction](#introduction) 671 | - [Extending ISO/IEC 14496-22 Open Font Format](#extending-isoiec-14496-22-open-font-format) 672 | - [Implementation](#implementation) 673 | - [C++ Structures](#c-structures) 674 | - [Font Tooling](#font-tooling) 675 | - [Rendering](#rendering) 676 | - [Pseudocode](#pseudocode) 677 | - [FreeType](#freetype) 678 | - [Chromium](#chromium) 679 | - [HarfBuzz](#harfbuzz) 680 | - [References](#references) 681 | - [Acknowledgements](#acknowledgements) 682 | -------------------------------------------------------------------------------- /images/PaintCompositeGraph.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | A 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /images/U+1F3B5_notes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /images/clock-1.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /images/clock-2.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /images/clock-common.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/clock-common_contiguous-layers.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /images/color_line_extend_modes.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /images/colr.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr.pptx -------------------------------------------------------------------------------- /images/colr_PaintColrLayers_as_root.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_PaintColrLayers_as_root.png -------------------------------------------------------------------------------- /images/colr_PaintCompositeGraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_PaintCompositeGraph.png -------------------------------------------------------------------------------- /images/colr_blend_lighten.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_blend_lighten.png -------------------------------------------------------------------------------- /images/colr_clock-1.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 16 | 17 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /images/colr_clock-12.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 16 | 17 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /images/colr_clock-2.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 16 | 17 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /images/colr_clock_common.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_clock_common.png -------------------------------------------------------------------------------- /images/colr_clocks-12-1-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_clocks-12-1-2.png -------------------------------------------------------------------------------- /images/colr_color_glyph_without_layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_color_glyph_without_layers.png -------------------------------------------------------------------------------- /images/colr_conic_gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_conic_gradient.png -------------------------------------------------------------------------------- /images/colr_conic_gradient_rotation-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_conic_gradient_rotation-0.png -------------------------------------------------------------------------------- /images/colr_conic_gradient_rotation-150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_conic_gradient_rotation-150.png -------------------------------------------------------------------------------- /images/colr_conic_gradient_sharp_transition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_conic_gradient_sharp_transition.png -------------------------------------------------------------------------------- /images/colr_conic_gradient_start_stop_angles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_conic_gradient_start_stop_angles.png -------------------------------------------------------------------------------- /images/colr_filled_shapes.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | 13 | 14 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | abc 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /images/colr_gradient_extend_pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_gradient_extend_pad.png -------------------------------------------------------------------------------- /images/colr_gradient_extend_reflect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_gradient_extend_reflect.png -------------------------------------------------------------------------------- /images/colr_gradient_extend_repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_gradient_extend_repeat.png -------------------------------------------------------------------------------- /images/colr_gradient_mask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_gradient_mask.png -------------------------------------------------------------------------------- /images/colr_gradient_mask.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /images/colr_hour-hand-component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_hour-hand-component.png -------------------------------------------------------------------------------- /images/colr_layers_v0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_layers_v0.png -------------------------------------------------------------------------------- /images/colr_layers_v1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_layers_v1.png -------------------------------------------------------------------------------- /images/colr_linear_gradients_pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_linear_gradients_pad.png -------------------------------------------------------------------------------- /images/colr_linear_gradients_reflect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_linear_gradients_reflect.png -------------------------------------------------------------------------------- /images/colr_linear_gradients_repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_linear_gradients_repeat.png -------------------------------------------------------------------------------- /images/colr_porter-duff_xor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_porter-duff_xor.png -------------------------------------------------------------------------------- /images/colr_radial_gradients.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_circle_within_circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_circle_within_circle.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_circle_within_circle_pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_circle_within_circle_pad.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_circle_within_circle_reflect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_circle_within_circle_reflect.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_circle_within_circle_repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_circle_within_circle_repeat.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_direction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_direction.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_direction_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_direction_1.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_direction_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_direction_2.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_direction_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_direction_3.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_inner_circle_touching_outer_pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_inner_circle_touching_outer_pad.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_interference_patterns_reflect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_interference_patterns_reflect.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_pad.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_reflect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_reflect.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_repeat.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_strip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_strip.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_strip_pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_strip_pad.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_strip_reflect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_strip_reflect.png -------------------------------------------------------------------------------- /images/colr_radial_gradients_strip_repeat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_radial_gradients_strip_repeat.png -------------------------------------------------------------------------------- /images/colr_reuse-hour-hand-rotated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_reuse-hour-hand-rotated.png -------------------------------------------------------------------------------- /images/colr_reuse_clock-face_PaintColrGlyph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_reuse_clock-face_PaintColrGlyph.png -------------------------------------------------------------------------------- /images/colr_reuse_clock-face_PaintColrLayers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_reuse_clock-face_PaintColrLayers.png -------------------------------------------------------------------------------- /images/colr_shape_gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_shape_gradient.png -------------------------------------------------------------------------------- /images/colr_shape_shape_gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_shape_shape_gradient.png -------------------------------------------------------------------------------- /images/colr_transform_glyph_gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_transform_glyph_gradient.png -------------------------------------------------------------------------------- /images/colr_transform_glyph_transform_gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_transform_glyph_transform_gradient.png -------------------------------------------------------------------------------- /images/colr_v0_emoji_sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_v0_emoji_sample.png -------------------------------------------------------------------------------- /images/colr_v0_layering.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_v0_layering.png -------------------------------------------------------------------------------- /images/colr_v1_emoji_sample.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colr_v1_emoji_sample.png -------------------------------------------------------------------------------- /images/colrv1_enable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/colrv1_enable.png -------------------------------------------------------------------------------- /images/composite_blend.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /images/conic_gradients.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /images/hour_hands.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /images/linear_gradients_1.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | p₀ 34 | 35 | p₁ 36 | 37 | p₂ 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /images/linear_gradients_2.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | p₀ 34 | 35 | p₁ 36 | 37 | p₂ 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /images/radial_gradients.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | c₀ 43 | r₀ 44 | 45 | 46 | 47 | c₁ 48 | r₁ 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /images/radial_gradients_circle_within_circle.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 24 | 25 | 26 | 27 | 28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | c₀ 48 | r₀ 49 | 50 | 51 | 52 | 53 | c₁ 54 | r₁ 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /images/radial_gradients_direction.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 24 | 25 | 26 | 27 | 28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | c₀ 52 | r₀ 53 | c₁ 54 | r₁ 55 | 56 | 57 | 58 | 59 | c₁ 60 | r₁ 61 | c₀ 62 | r₀ 63 | 64 | 65 | 66 | 67 | 68 | c₁ 69 | r₁ 70 | c₀ 71 | r₀ 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /images/radial_gradients_inner_circle_touching_outer.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 24 | 25 | 26 | 27 | 28 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | c₀ 48 | r₀ 49 | 50 | 51 | 52 | 53 | c₁ 54 | r₁ 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /images/radial_gradients_interference_patterns.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | c₀ 43 | r₀ 44 | 45 | 46 | 47 | c₁ 48 | r₁ 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /images/radial_gradients_strip.svg: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | c₀ 43 | r₀ 44 | 45 | 46 | 47 | c₁ 48 | r₁ 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /images/repeating_linear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/repeating_linear.png -------------------------------------------------------------------------------- /images/repeating_radial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/images/repeating_radial.png -------------------------------------------------------------------------------- /iso_docx/2020-10-06-m55371-WG03-COLR-v1-proposal.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/iso_docx/2020-10-06-m55371-WG03-COLR-v1-proposal.docx -------------------------------------------------------------------------------- /iso_docx/OFF_AM2_2020-12-29.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/googlefonts/colr-gradients-spec/f9be7a7ec52b8ab5e653f0889027c99e163386a6/iso_docx/OFF_AM2_2020-12-29.docx --------------------------------------------------------------------------------