W3cubDocs

/Support Tables

text-emphasis styling

Method of using small symbols next to each glyph to emphasize a run of text, commonly used in East Asian languages. The text-emphasis shorthand, and its text-emphasis-style and text-emphasis-color longhands, can be used to apply marks to the text. The text-emphasis-position property, which inherits separately, allows setting the emphasis marks' position with respect to the text.

Spec https://drafts.csswg.org/css-text-decor-3/#text-emphasis-property
Status W3C Candidate Recommendation
IE Edge Firefox Chrome Safari Opera
      73 (1,*)    
    65 72 (1,*)    
    64 71 (1,*) TP  
11 18 63 70 (1,*) 12 56 (1,*)
10 17 62 69 (1,*) 11.1 55 (1,*)
9 16 61 68 (1,*) 11 54 (1,*)
8 15 60 67 (1,*) 10.1 53 (1,*)
Show all
7 14 59 66 (1,*) 10 52 (1,*)
6 13 58 65 (1,*) 9.1 51 (1,*)
5.5 12 57 64 (1,*) 9 50 (1,*)
    56 63 (1,*) 8 49 (1,*)
    55 62 (1,*) 7.1 48 (1,*)
    54 61 (1,*) 7 (1,*) 47 (1,*)
    53 60 (1,*) 6.1 (1,*) 46 (1,*)
    52 59 (1,*) 6 45 (1,*)
    51 58 (1,*) 5.1 44 (1,*)
    50 57 (1,*) 5 43 (1,*)
    49 56 (1,*) 4 42 (1,*)
    48 55 (1,*) 3.2 41 (1,*)
    47 54 (1,*) 3.1 40 (1,*)
    46 53 (1,*)   39 (1,*)
    45 (2) 52 (1,*)   38 (1,*)
    44 51 (1,*)   37 (1,*)
    43 50 (1,*)   36 (1,*)
    42 49 (1,*)   35 (1,*)
    41 48 (1,*)   34 (1,*)
    40 47 (1,*)   33 (1,*)
    39 46 (1,*)   32 (1,*)
    38 45 (1,*)   31 (1,*)
    37 44 (1,*)   30 (1,*)
    36 43 (1,*)   29 (1,*)
    35 42 (1,*)   28 (1,*)
    34 41 (1,*)   27 (1,*)
    33 40 (1,*)   26 (1,*)
    32 39 (1,*)   25 (1,*)
    31 38 (1,*)   24 (1,*)
    30 37 (1,*)   23 (1,*)
    29 36 (1,*)   22 (1,*)
    28 35 (1,*)   21 (1,*)
    27 34 (1,*)   20 (1,*)
    26 33 (1,*)   19 (1,*)
    25 32 (1,*)   18 (1,*)
    24 31 (1,*)   17 (1,*)
    23 30 (1,*)   16 (1,*)
    22 29 (1,*)   15 (1,*)
    21 28 (1,*)   12.1
    20 27 (1,*)   12
    19 26 (1,*)   11.6
    18 25 (1,*)   11.5
    17 24   11.1
    16 23   11
    15 22   10.6
    14 21   10.5
    13 20   10.0-10.1
    12 19   9.5-9.6
    11 18   9
    10 17    
    9 16    
    8 15    
    7 14    
    6 13    
    5 12    
    4 11    
    3.6 10    
    3.5 9    
    3 8    
    2 7    
      6    
      5    
      4    
iOS Safari Opera Mini Android Browser Blackberry Browser Opera Mobile Android Chrome Android Firefox IE Mobile Android UC Browser Samsung Internet QQ Browser Baidu Browser
12 all 67 (1,*) 10 (1,*) 46 (1,*) 70 (1,*) 63 11 11.8 (1,*) 7.2 (1,*) 1.2 (1,*) 7.12 (1,*)
11.3-11.4   4.4.3-4.4.4 (1,*) 7 12.1     10   6.2 (1,*)    
11.0-11.2   4.4 (1,*)   12         5 (1,*)    
10.3   4.2-4.3   11.5         4 (1,*)    
Show all
10.0-10.2   4.1   11.1              
9.3   4   11              
9.0-9.2   3   10              
8.1-8.4   2.3                  
8   2.2                  
7.0-7.1   2.1                  
6.0-6.1                      
5.0-5.1                      
4.2-4.3                      
4.0-4.1                      
3.2                      

Notes

Some old WebKit browsers (like Chrome 24) support -webkit-text-emphasis, but does not support CJK languages and is therefore considered unsupported.

  1. Partial support refers to incorrect support for -webkit-text-emphasis-position. These browsers support over and under as values, but not the added left and right values required by the spec.

  2. Can be enabled in Firefox using the layout.css.text-emphasis.enabled flag

* Partial support with prefix.

Bugs

  • Chrome on Android occasionally has issues rendering emphasis glyphs correctly.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=text-emphasis