Styling reference

Interactive Ink SDK makes it easy to style content with css properties listed in this page. In addition to these css styling properties, you can adjust its default configuration with different options presented here.

Restrictions from CSS

The following restrictions apply:

  • Noto is the only supported font for Chinese, Japanese, Korean and Armenian.

  • For other languages, Google Fonts are supported.

  • Only a limited subset of CSS properties is supported.
  • Supported types are different from regular CSS types (e.g. type selectors like h1, p or div are not supported).
  • The default unit is mm and properties provided with an explicit unit will be ignored.
  • Keywords such as inherit, initial or unset are not supported.
  • Universal selector (*) and combinators are not supported.
  • Possibilities to express colors are constrained.

Type hierarchy

Interactive Ink SDK exposes the following type hierarchy:

  • ink - Groups all the types described below:
    • stroke - Handwritten strokes only.
    • glyph - Converted text glyphs.
    • line - Converted lines, e.g. obtained when converting a diagram.
    • arc - Converted elliptical arcs, ellipses and circles.
    • guide - Text guides.

It is possible to combine class and type selectors:

glyph.text {}
line.diagram {}
arc.diagram {}

Available classes per content type

Math block

Class Description
.math Default class for items in a “Math” content block.
.math-variable Style applied to the variables after ink conversion.
.math-solved Style applied to the glyphs that are generated by the solver.

Text block

Class Description
.text Default class for items in a “Text” content block.
.text-heading1 Style of text headings of level 1 (Text Document only).
.text-heading2 Style of text headings of level 2 (Text Document only).
.text-emphasis1 Style of text emphasis type 1 (Text Document only).
.text-emphasis2 Style of text emphasis type 2 (Text Document only).
.text-highlight Style of highlighted text.

Properties per class

.math

Property Default value Remarks
font-family STIXGeneral  
font-style normal  
font-variant normal  
font-weight 300 Only numerical values are supported.
color #000000FF See possible values.
-myscript-pen-width 0.625 Unit is mm.
-myscript-pen-brush FeltPen See possible values.

.math-variable

Property Default value Remarks
font-family STIX  
font-style italic  
font-variant normal  
font-weight 300 Only numerical values are supported.
color #000000FF See possible values.

.math-solved

Property Default value Remarks
font-family STIXGeneral  
font-style normal  
font-variant normal  
font-weight 300 Only numerical values are supported.
color #A8A8A8FF See possible values.

.text

Property Default value Remarks
font-family “Open Sans”  
font-style normal  
font-variant normal  
font-weight 300 Only numerical values are supported.
font-size None1 In millimeters (model unit).
line-height None1 Multiplier of the font size.
color #000000FF See possible values.
-myscript-pen-width 0.625 In millimeters (model unit).
-myscript-pen-brush FeltPen See possible values.

Note that “Text” and “Text Document” guides spacings are not identical.

  • For “Text” parts, the spacing of handwriting guides (if enabled) is given by font-size * line-height.

  • For “Text Document” parts, the guides spacing considers the font-size and line-height product too. But some more computation adjusts the line gap.

For instance, the following CSS will correspond to a 13-millimeter spacing when the theme is set to a “Text” part. For a “Text Document” part, the example is still valid but the outcome might be slightly different.

.text {
  font-size: 10;
  line-height: 1.3;
}
In both cases, to avoid visual artifacts, you should change the editor theme before opening the part.

.text-heading1

Property Default value Remarks
font-family “Open Sans”  
font-style normal  
font-variant normal  
font-weight 700 Only numerical values are supported.
font-size None1 In millimeters (model unit).
line-height None1 Multiplier of the font size.
color #000000FF See possible values.
-myscript-pen-width 0.625 In millimeters (model unit).
-myscript-text-decoration-pen-width 0.625 In millimeters (model unit).
-myscript-pen-brush FeltPen See possible values.

stroke.text-heading1

Property Default value Remarks
-myscript-text-decoration-style double-underlined See possible values

glyph.text-heading1

Property Default value Remarks
-myscript-text-decoration-style none See possible values

.text-heading2

Property Default value Remarks
font-family “Open Sans”  
font-style normal  
font-variant normal  
font-weight 700 Only numerical values are supported.
font-size None1 In millimeters (model unit).
line-height None1 Multiplier of the font size.
color #000000FF See possible values.
-myscript-pen-width 0.625 In millimeters (model unit).
-myscript-text-decoration-pen-width 0.625 In millimeters (model unit).
-myscript-pen-brush FeltPen See possible values.

stroke.text-heading2

Property Default value Remarks
-myscript-text-decoration-style underlined See possible values

glyph.text-heading2

Property Default value Remarks
-myscript-text-decoration-style none See possible values

.text-emphasis1

Property Default value Remarks
font-family “Open Sans”  
font-style normal  
font-variant normal  
font-weight 700 Only numerical values are supported.
font-size None1 In millimeters (model unit).
color #000000FF See possible values.
-myscript-pen-width 0.625 In millimeters (model unit).
-myscript-text-decoration-pen-width 0.625 In millimeters (model unit).
-myscript-pen-brush FeltPen See possible values.

stroke.text-emphasis1

Property Default value Remarks
-myscript-text-decoration-style underlined See possible values

glyph.text-emphasis1

Property Default value Remarks
-myscript-text-decoration-style none See possible values

.text-emphasis2

Property Default value Remarks
font-family “Open Sans”  
font-style normal  
font-variant normal  
font-weight 700 Only numerical values are supported.
font-size None1 In millimeters (model unit).
color #000000FF See possible values.
-myscript-pen-width 0.625 In millimeters (model unit).
-myscript-text-decoration-pen-width 0.625 In millimeters (model unit).
-myscript-pen-brush FeltPen See possible values.

stroke.text-emphasis2

Property Default value Remarks
-myscript-text-decoration-style double-underlined See possible values

glyph.text-emphasis2

Property Default value Remarks
-myscript-text-decoration-style none See possible values

.text-highlight

Property Default value Remarks
font-family “Open Sans”  
font-style normal  
font-variant normal  
font-weight 700 Only numerical values are supported.
font-size None1 In millimeters (model unit).
-myscript-pen-width 0.625 In millimeters (model unit).
-myscript-text-decoration-pen-width 0.625 In millimeters (model unit).
-myscript-pen-brush FeltPen See possible values.

stroke.text-highlight

Property Default value Remarks
-myscript-text-decoration-style framed-background See possible values

glyph.text-highlight

Property Default value Remarks
-myscript-text-decoration-style framed-background See possible values

Possible values

Fonts

Interactive Ink Cloud supports all the Google fonts except when the language is set to zh_CN, zh_HK, zh_TW, ko_KR, ja_JP or hy_AM, in which case only the “Noto” font is supported.

However, if it does not meet all your requirements, or if you need to add a font that is not listed on MyScript Developer portal, please contact_us.

The font-family attribute accept list of font. Each font have to be separated by a comma ,.

The list of possible font-family values is displayed below.

Configured language Supported font-family
zh_CN ‘Noto Sans CJK tc’
zh_HK ‘Noto Sans CJK tc’
zh_TW ‘Noto Sans CJK tc’
ko_KR ‘Noto Sans CJK kr’
ja_JP ‘Noto Sans CJK jp’
hy_AM ‘Noto Sans Armenian’
All other supported language “ABeeZee”,”Abel”,”Abhaya Libre”,”Abril Fatface”,”Abyssinica SIL”,”Aclonica”,”Acme”,”Actor”,”Adamina”,”Advent Pro”,”Aguafina Script”,”Aldrich”,”Alegreya”,”Alegreya Sans”,”Alegreya Sans SC”,”Alegreya SC”,”Alex Brush”,”Alfa Slab One”,”Alice”,”Alike”,”Alike Angular”,”Allan”,”Allura”,”Almendra”,”Almendra Display”,”Almendra SC”,”Amarante”,”Amaranth”,”Amatic SC”,”Amethysta”,”Amiko”,”Amiri”“Amiri”,”Amita”,”Anaheim”,”Andada SC”,”Andika”,”Annie Use Your Telescope”,”Anonymous Pro”,”Antic Didone”,”Anton”,”Arapey”,”Arbutus”,”Arbutus Slab”,”Architects Daughter”,”Archivo”,”Archivo Black”,”Archivo Narrow”,”Arima Madurai”,”Arimo”,”Arizonia”,”Armata”,”Arsenal”,”Artifika”,”Arya”,”Asap”,”Asap Condensed”,”Asar”,”Asset”,”Asul”,”Athiti”,”Atma”,”Atomic Age”,”Aubrey”,”Audiowide”,”Autour One”,”Average”,”Average Sans”,”Averia Gruesa Libre”,”Averia Libre”,”Averia Sans Libre”,”Averia Serif Libre”,”Bad Script”,”Bahiana”,”Baloo”,”Baloo Bhai”,”Baloo Bhaijaan”,”Baloo Bhaina”,”Baloo Chettan”,”Baloo Da”,”Baloo Paaji”,”Baloo Tamma”,”Baloo Tammudu”,”Baloo Thambi”,”Balthazar”,”Bangers”,”Barlow”,”Barlow Condensed”,”Barlow Semi Condensed”,”Barrio”,”Basic”,”Baumans”,”Belgrano”,”Bellefair”,”Belleza”,”Berkshire Swash”,”Bevan”,”Bhavuka”,”Bigelow Rules”,”Bigshot One”,”Bilbo”,”Bilbo Swash Caps”,”Bitter”,”Black Ops One”,”Bonbon”,”Boogaloo”,”Bowlby One”,”Bowlby One SC”,”Brawler”,”Bree Serif”,”Bruno Ace”,”Bruno Ace SC”,”Bubblegum Sans”,”Bubbler One”,”Buenard”,”Bungee”,”Bungee Hairline”,”Bungee Inline”,”Bungee Outline”,”Bungee Shade”,”Butterfly Kids”“Butterfly Kids”,”Cabin”,”Cabin Condensed”,”Cabin Sketch”,”Cagliostro”,”Cairo”,”Calligraffitti”,”Cambay”,”Cambo”,”Candal”,”Cantarell”,”Cantata One”,”Cantora One”,”Capriola”,”Cardo”,”Carrois Gothic”,”Carrois Gothic SC”,”Carter One”,”Catamaran”,”Caudex”,”Caveat”,”Caveat Brush”,”Cedarville Cursive”,”Ceviche One”,”Changa”,”Changa One”,”Chango”,”Chau Philomene One”,”Chela One”,”Cherry Swash”,”Chewy”,”Chicle”,”Chivo”,”Chonburi”,”Clara”,”Clicker Script”,”Coda”,”Coda Caption”,”Codystar”,”Coiny”,”Combo”,”Comfortaa”,”Coming Soon”,”Concert One”,”Condiment”,”Contrail One”,”Convergence”,”Cookie”,”Copse”,”Corben”,”Courgette”,”Cousine”,”Coustard”,”Crafty Girls”,”Crete Round”,”Crimson Text”,”Croissant One”,”Crushed”,”Cuprum”,”Cutive Mono”,”Damion”,”Dancing Script”,”Dawning of a New Day”,”Days One”,”Dekko”,”Delius”,”Delius Swash Caps”,”Delius Unicase”,”Della Respira”,”Denk One”,”Devonshire”,”Dhyana”,”Didact Gothic”,”Dinah”,”Diplomata”,”Diplomata SC”,”Domine”,”Donegal One”,”Doppio One”,”Dorsa”,”Dosis”,”Duru Sans”,”Dynalight”,”Eagle Lake”,”Eater”,”Eater Caps”,”EB Garamond”,”Economica”,”Eczar”,”Ek Mukta”,”Electrolize”,”El Messiri”,”Elsie”,”Elsie Swash Caps”,”Emblema One”,”Encode Sans”,”Encode Sans Condensed”,”Encode Sans Expanded”,”Encode Sans Semi Condensed”,”Encode Sans Semi Expanded”,”Engagement”,”Englebert”,”Erica One”,”Esteban”,”Euphoria Script”,”Exo”,”Expletus Sans”,”Fanwood Text”,”Farsan”,”Fascinate”,”Fascinate Inline”,”Faster One”,”Fauna One”,”Faustina”,”Federant”,”Federo”,”Felipa”,”Fenix”,”Finger Paint”,”Fira Mono”,”Fira Sans”,”Fira Sans Condensed”“Fira Sans Condensed”,”Fira Sans Extra Condensed”,”Fjalla One”,”Fjord One”,”Flamenco”,”Fondamento”,”Fontdiner Swanky”,”Francois One”,”Frank Ruhl Libre”,”Freckle Face”,”Fredoka One”,”Fresca”,”Fruktur”,”Fugaz One”,”Gabriela”,”Gafata”,”Galdeano”,”Galindo”,”Gemunu Libre”,”Gentium Basic”,”Gentium Book Basic”,”Geostar”,”Geostar Fill”,”Germania One”,”GFS Didot”,”GFS Neohellenic”,”Gidugu”,”Gilda Display”,”Give You Glory”,”Glegoo”,”Gloria Hallelujah”,”Goblin One”,”Gochi Hand”,”Gorditas”,”Gothic A1”,”Graduate”,”Grand Hotel”,”Gravitas One”,”Great Vibes”,”Griffy”,”Gruppo”,”Gudea”,”Habibi”,”Halant”,”Hammersmith One”,”Hanalei”,”Hanalei Fill”,”Happy Monkey”,”Harmattan”,”Headland One”,”Henny Penny”,”Hermeneus One”,”Hind”,”Hind Colombo”,”Hind Guntur”,”Hind Jalandhar”,”Hind Kochi”,”Hind Madurai”,”Hind Mysuru”,”Hind Siliguri”,”Hind Vadodara”,”Homemade Apple”,”Homenaje”,”IBM Plex Mono”,”IBM Plex Sans”,”IBM Plex Sans Condensed”,”IBM Plex Serif”,”Iceberg”,”Iceland”,”IM Fell Double Pica”,”IM Fell Double Pica SC”,”IM Fell DW Pica”,”IM Fell DW Pica SC”,”IM Fell English”,”IM Fell English SC”,”IM Fell French Canon”,”IM Fell French Canon SC”,”IM Fell Great Primer”,”IM Fell Great Primer SC”,”Imprima”,”Inconsolata”,”Inder”,”Indie Flower”,”Inika”,”Inknut Antiqua”,”Irish Grover”,”Istok Web”,”Italianno”,”Itim”,”Jacques Francois”,”Jacques Francois Shadow”,”Jaldi”,”Jolly Lodger”,”Jomhuria”,”Josefin Sans”,”Josefin Sans Std Light”,”Joti One”,”Judson”,”Julee”,”Julius Sans One”,”Junge”,”Jura”,”Just Another Hand”,”Just Me Again Down Here”,”Kadwa”,”Kalam”,”Kameron”,”Karma”,”Katibeh”,”Kaushan Script”,”Kavoon”,”Keania One”,”Khand”,”Kite One”,”Kotta One”,”Kranky”,”Kreon”,”Krona One”,”Kurale”,”La Belle Aurore”,”Laila”,”Lateef”,”Lato”,”Leckerli One”,”Lemon”,”Lemonada”,”Libre Baskerville”,”Libre Caslon Text”,”Life Savers”,”Lilita One”,”Limelight”,”Linden Hill”,”Lobster”,”Lobster Two”,”Londrina Outline”,”Londrina Shadow”,”Londrina Sketch”,”Londrina Solid”,”Lora”“Lora”,”Loved by the King”,”Lovers Quarrel”,”Love Ya Like A Sister”,”Luckiest Guy”,”Lusitana”,”Lustria”,”Macondo”,”Macondo Swash Caps”,”Mada”,”Magra”,”Maiden Orange”,”Maitree”,”Mako”,”Manuale”,”Marcellus”,”Marcellus SC”,”Marck Script”,”Margarine”,”Marko One”,”Marmelad”,”Mate”,”Mate SC”,”Maven Pro”,”McLaren”,”Meddon”,”MedievalSharp”,”Medula One”,”Meera Inimai”,”Meie Script”,”Merge One”,”Merienda”,”Merienda One”,”Merriweather”,”Merriweather Sans”,”Mervale Script”,”Metal Mania”,”Metamorphous”,”Metrophobic”,”Michroma”,”Milonga”,”Miltonian”,”Miltonian Tattoo”,”Mina”,”Mirza”,”Miss Fajardose”,”Miss Saint Delafield”,”Mitr”,”Modak”,”Modern Antiqua”,”Mogra”,”Monda”,”Monofett”,”Monoton”,”Monsieur La Doulaise”,”Montaga”,”Montez”,”Montserrat”,”Montserrat Alternates”,”Mountains of Christmas”,”Mouse Memoirs”,”Mr Bedford”,”Mr Bedfort”,”Mr Dafoe”,”Mr De Haviland”,”Mrs Saint Delafield”,”Mukta”,”Mukta Mahee”,”Mukta Malar”,”Mukta Vaani”,”Muli”,”Mystery Quest”,”Nanum Gothic”,”Nanum Myeongjo”,”NATS”,”Neuton”,”New Rocker”,”News Cycle”,”Niconne”,”Nixie One”,”Nobile”,”Norican”,”Nosifer”,”Nosifer Caps”,”Nothing You Could Do”,”Noticia Text”,”Noto Sans”,”Noto Sans Armenian”“Noto Sans CJK jp”“Noto Sans CJK jp”,”Noto Sans CJK kr”,”Noto Sans CJK sc”,”Noto Sans CJK tc”,”Noto Serif”,”Noto Serif Armenian”,”Noto Serif CJK jp”,”Noto Serif CJK kr”,”Noto Serif CJK sc”,”Noto Serif CJK tc”“Nova Cut”,”Nova Flat”,”Nova Mono”,”Nova Oval”,”Nova Round”,”Nova Script”,”Nova Slim”,”Nova Square”,”Numans”,”Nunito”,”Nunito Sans”,”Offside”,”OFL Sorts Mill Goudy TT”,”Oldenburg”,”Old Standard TT”,”Oleo Script”,”Oleo Script Swash Caps”,”Open Sans”,”Open Sans Condensed”,”Oranienbaum”,”Oregano”,”Orienta”,”Original Surfer”,”Oswald”,”Overlock”,”Overlock SC”,”Overpass”,”Overpass Mono”,”Over the Rainbow”,”Ovo”,”Oxygen Mono”,”Pacifico”,”Palanquin”,”Palanquin Dark”,”Pangolin”,”Paprika”,”Parisienne”,”Passero One”,”Passion One”,”Pathway Gothic One”,”Pattaya”,”Patua One”,”Paytone One”,”Pecita”,”Peralta”,”Permanent Marker”,”Petit Formal Script”,”Petrona”,”Philosopher”,”Piedra”,”Pinyon Script”,”Pirata One”,”Plaster”,”Play”,”Playball”,”Podkova”,”Poetsen One”,”Poiret One”,”Poller One”,”Poly”,”Pompiere”,”Poppins”,”Port Lligat Sans”,”Port Lligat Slab”,”Post No Bills Colombo”,”Post No Bills Jaffna”,”Pragati Narrow”,”Prata”,”Press Start 2P”,”Prosto One”,”PT Mono”,”PT Sans”,”PT Sans Caption”,”PT Sans Narrow”,”PT Serif”,”PT Serif Caption”,”Purple Purse”,”Quando”,”Quantico”,”Quattrocento”,”Quattrocento Sans”,”Questrial”,”Quicksand”,”Quintessential”,”Qwigley”,”Racing Sans One”,”Radley”,”Rakkas”,”Raleway”,”Raleway Dots”,”Rambla”,”Rammetto One”,”Ranchers”,”Ranga”,”Rasa”,”Rationale”,”Redressed”,”Reem Kufi”,”Reenie Beanie”,”Rhodium Libre”,”Ribeye”,”Ribeye Marrow”,”Righteous”,”Risque”,”Roboto”,”Roboto Condensed”,”Roboto Mono”,”Roboto Slab”,”Rochester”,”Rock Salt”,”Rokkitt”,”Romanesco”,”Ropa Sans”,”Rosario”,”Rosarivo”,”Rouge Script”,”Rozha One”,”Rubik Mono One”,”Rubik One”,”Ruda”,”Rufina”,”Ruge Boogie”,”Rum Raisin”,”Ruslan Display”,”Russo One”,”Ruthie”,”Rye”,”Sacramento”,”Sail”,”Saira”,”Saira Condensed”,”Saira Extra Condensed”,”Saira Semi Condensed”,”Sancreek”,”Sansation”,”Sansita One”,”Sarabun”“Sarabun”,”Sarina”,”Sarpanch”,”Scada”,”Scheherazade”,”Schoolbell”,”Scope One”,”Seaweed Script”,”Secular One”,”Sedan”,”Sedan SC”,”Sevillana”,”Seymour One”,”Shadows Into Light”,”Shadows Into Light Two”,”Shanti”,”Share”,”Share Tech”,”Share Tech Mono”,”Shojumaru”,”Short Stack”,”Shrikhand”,”Sigmar One”,”Simonetta”,”Sintony”,”Sirin Stencil”,”Six Caps”,”Skranji”,”Slabo 13px”,”Slabo 27px”,”Slackey”,”Smokum”,”Smythe”,”Sniglet”,”Snippet”,”Snowburst One”,”Sofadi One”,”Sofia”,”Sonsie One”,”Sorts Mill Goudy”,”Source Code Pro”,”Source Sans Pro”,”Source Serif Pro”,”Space Mono”,”Special Elite”,”Spectral”,”Spectral SC”“Spectral SC”,”Spicy Rice”,”Spinnaker”,”Spirax”,”Sriracha”,”Stalemate”“Stalemate”,”Stalinist One”,”Stalin One”,”Stardos Stencil”,”Stint Ultra Condensed”,”Stint Ultra Expanded”,”Stoke”,”Strait”,”Strong”,”Sue Ellen Francisco”,”Sumana”,”Sunshiney”,”Supermercado One”,”Swanky and Moo Moo”,”Syncopate”,”Tajawal”,”Tangerine”,”Tauri”,”Teko”,”Tenor Sans”,”Terminal Dosis”,”Terminal Dosis Light”,”Text Me One”,”The Girl Next Door”,”Tienne”,”Tillana”,”Tinos”,”Titan One”,”Titillium Web”,”Trykker”,”Tuffy”,”Tulpen One”,”Ubuntu”,”Ubuntu Condensed”,”Ubuntu Mono”,”Ultra”,”Uncial Antiqua”,”Underdog”,”Unica One”,”Unkempt”,”Unlock”,”Unna”,”Vampiro One”,”Varela”,”Varela Round”,”Varta”,”Vast Shadow”,”Vesper Libre”,”Vibur”,”Vidaloka”,”Viga”,”Voces”,”Volkhov”,”Vollkorn”,”Voltaire”,”VT323”,”Wallpoet”,”Walter Turncoat”,”Warnes”,”Wellfleet”,”Wire One”,”Work Sans”,”Yaldevi Colombo”,”Yanone Kaffeesatz”,”Yantramanav”,”Yatra One”,”Yellowtail”,”Yeseva One”,”Yesteryear”,”Yrsa”,”Zeyada”,”Zilla Slab”,”Zilla Slab Highlight”

Colors

Colors can be specified as rgb(), rgba(), hsl(), hsla(), #rgb, #rgba, #rrggbb, #rrggbbaa.

Named colors (black, red, etc.) are not supported.

-myscript-pen-brush

Possible values for pen brushes are: Polyline, FountainPen, CalligraphicQuill, CalligraphicBrush, Qalam and FeltPen.

-myscript-text-decoration-style

  • none - No decoration.
  • underlined - Simple underline.
  • double-underlined - Double underline.
  • framed - Rectangular frame drawn around the content and background color.
  • circled - Rounded frame drawn around the content and background color.
  • framed-outline - Rectangular frame around the content, no background is drawn.
  • framed-background - Rectangular frame around the content with only the background being rendered.
  • circled-outline - Circle frame around the content, no background is drawn.
  • circled-background - Circle frame around the content with only the background being rendered.

The highlight background color is the pen color with alpha, and the frame color is the pen color.

  1. iink computes the default line height and font size based on the device resolution instead of using a static css containing default values. ↩ ↩2 ↩3 ↩4 ↩5 ↩6 ↩7 ↩8 ↩9

We use cookies to ensure that we give you the best experience on our website • Read the privacy policy