list-marker-symbol-bidi-ref.html (4624B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Reference: Symbol markers with unicode-bidi</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <style> 6 section { 7 float: left; 8 } 9 .inside { 10 list-style-position: inside; 11 } 12 span { 13 float: right; 14 } 15 ::marker { font-family: inherit; } 16 </style> 17 <section> 18 <ul dir="ltr"> 19 <li class="outside embed-none">text</li> 20 <li class="outside embed-item">text</li> 21 <li class="outside embed-marker">text</li> 22 <li class="outside embed-both">text</li> 23 <li class="inside embed-none">text</li> 24 <li class="inside embed-item">text</li> 25 <li class="inside embed-marker">text</li> 26 <li class="inside embed-both">text</li> 27 </ul> 28 <ul dir="rtl"> 29 <li class="outside isolate-none">text</li> 30 <li class="outside isolate-item">text</li> 31 <li class="outside isolate-marker">text</li> 32 <li class="outside isolate-both">text</li> 33 <li class="inside isolate-none">text</li> 34 <li class="inside isolate-item">text</li> 35 <li class="inside isolate-marker">text</li> 36 <li class="inside isolate-both">text</li> 37 </ul> 38 </section> 39 <section> 40 <ul dir="ltr"> 41 <li class="outside isolate-none">text</li> 42 <li class="outside isolate-item">text</li> 43 <li class="outside isolate-marker">text</li> 44 <li class="outside isolate-both">text</li> 45 <li class="inside isolate-none">text</li> 46 <li class="inside isolate-item">text</li> 47 <li class="inside isolate-marker">text</li> 48 <li class="inside isolate-both">text</li> 49 </ul> 50 <ul dir="rtl"> 51 <li class="outside isolate-none">text</li> 52 <li class="outside isolate-item">text</li> 53 <li class="outside isolate-marker">text</li> 54 <li class="outside isolate-both">text</li> 55 <li class="inside isolate-none">text</li> 56 <li class="inside isolate-item">text</li> 57 <li class="inside isolate-marker">text</li> 58 <li class="inside isolate-both">text</li> 59 </ul> 60 </section> 61 <section> 62 <ul dir="ltr"> 63 <li class="outside override-none">text</li> 64 <li class="outside override-item">text</li> 65 <li class="outside override-marker">text</li> 66 <li class="outside override-both">text</li> 67 <li class="inside override-none">text</li> 68 <li class="inside override-item">text</li> 69 <li class="inside override-marker">text</li> 70 <li class="inside override-both">text</li> 71 </ul> 72 <ul dir="rtl"> 73 <li class="outside override-none">text</li> 74 <li class="outside override-item">txet</li> 75 <li class="outside override-marker">text</li> 76 <li class="outside override-both">txet</li> 77 <li class="inside override-none">text</li> 78 <li class="inside override-item">txet</li> 79 <li class="inside override-marker">text</li> 80 <li class="inside override-both">txet</li> 81 </ul> 82 </section> 83 <section> 84 <ul dir="ltr"> 85 <li class="outside isolateoverride-none">text</li> 86 <li class="outside isolateoverride-item">text</li> 87 <li class="outside isolateoverride-marker">text</li> 88 <li class="outside isolateoverride-both">text</li> 89 <li class="inside isolateoverride-none">text</li> 90 <li class="inside isolateoverride-item">text</li> 91 <li class="inside isolateoverride-marker">text</li> 92 <li class="inside isolateoverride-both">text</li> 93 </ul> 94 <ul dir="rtl"> 95 <li class="outside isolateoverride-none">text</li> 96 <li class="outside isolateoverride-item">txet</li> 97 <li class="outside isolateoverride-marker">text</li> 98 <li class="outside isolateoverride-both">txet</li> 99 <li class="inside isolateoverride-none">text</li> 100 <li class="inside isolateoverride-item">txet</li> 101 <li class="inside isolateoverride-marker">text</li> 102 <li class="inside isolateoverride-both">txet</li> 103 </ul> 104 </section> 105 <section> 106 <ul dir="ltr"> 107 <li class="outside plaintext-none">text</li> 108 <li class="outside plaintext-item">text</li> 109 <li class="outside plaintext-marker">text</li> 110 <li class="outside plaintext-both">text</li> 111 <li class="inside plaintext-none">text</li> 112 <li class="inside plaintext-item">text</li> 113 <li class="inside plaintext-marker">text</li> 114 <li class="inside plaintext-both">text</li> 115 </ul> 116 <ul dir="rtl"> 117 <li class="outside plaintext-none">text</li> 118 <li class="outside plaintext-item">text</li> 119 <li class="outside plaintext-marker">text</li> 120 <li class="outside plaintext-both">text</li> 121 <li class="inside plaintext-none">text</li> 122 <li class="inside plaintext-item"><span>text</span></li> 123 <li class="inside plaintext-marker">text</li> 124 <li class="inside plaintext-both"><span>text</span></li> 125 </ul> 126 </section>