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 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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Writing Modes Test: Test orientation of characters where vo=R (#1/9, 2048 code points in U+0020-0B27).</title>
<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#text-orientation">
<meta name="assert" content="Test orientation of characters where vo=R (#1/9, 2048 code points in U+0020-0B27)">
<meta name="flags" content="dom">
<link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@font-face {
font-family: "orientation";
src: url("support/adobe-fonts/CSSHWOrientationTest.otf");
}
.test {
font: 16px/1 "orientation";
height: 17em;
writing-mode: vertical-rl;
}
.line {
white-space: pre;
}
.U {
text-orientation: upright;
}
.R {
text-orientation: sideways;
}
#details {
margin: 1em .5em;
}
summary {
font-size: 1.2em;
font-weight: bold;
margin-top: .5em;
}
</style>
<div id="log"></div>
<div id="details"></div>
<div id="container">
<div data-vo="R" class="test">
<div data-block="Basic">
<div class="line"> !"#$%&'()*+,-./0123456789:;<=>?</div>
<div class="line">@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_</div>
<div class="line">`abcdefghijklmnopqrstuvwxyz{|}~</div>
</div>
<div data-block="Latin">
<div class="line"> ¡¢£¤¥¦¨ª«¬¯°²³´µ¶·¸¹º»¿ÀÁÂÃÄÅÆÇ</div>
<div class="line">ÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçè</div>
<div class="line">éêëìíîïðñòóôõöøùúûüýþÿĀāĂ㥹ĆćĈĉ</div>
<div class="line">ĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩ</div>
<div class="line">ĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼn</div>
<div class="line">ŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũ</div>
<div class="line">ŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƀƁƂƃƄƅƆƇƈƉ</div>
<div class="line">ƊƋƌƍƎƏƐƑƒƓƔƕƖƗƘƙƚƛƜƝƞƟƠơƢƣƤƥƦƧƨƩ</div>
<div class="line">ƪƫƬƭƮƯưƱƲƳƴƵƶƷƸƹƺƻƼƽƾƿǀǁǂǃDŽDždžLJLjlj</div>
<div class="line">NJNjnjǍǎǏǐǑǒǓǔǕǖǗǘǙǚǛǜǝǞǟǠǡǢǣǤǥǦǧǨǩ</div>
<div class="line">ǪǫǬǭǮǯǰDZDzdzǴǵǶǷǸǹǺǻǼǽǾǿȀȁȂȃȄȅȆȇȈȉ</div>
<div class="line">ȊȋȌȍȎȏȐȑȒȓȔȕȖȗȘșȚțȜȝȞȟȠȡȢȣȤȥȦȧȨȩ</div>
<div class="line">ȪȫȬȭȮȯȰȱȲȳȴȵȶȷȸȹȺȻȼȽȾȿɀɁɂɃɄɅɆɇɈɉ</div>
<div class="line">ɊɋɌɍɎɏ</div>
</div>
<div data-block="IPA">
<div class="line">ɐɑɒɓɔɕɖɗɘəɚɛɜɝɞɟɠɡɢɣɤɥɦɧɨɩɪɫɬɭɮɯ</div>
<div class="line">ɰɱɲɳɴɵɶɷɸɹɺɻɼɽɾɿʀʁʂʃʄʅʆʇʈʉʊʋʌʍʎʏ</div>
<div class="line">ʐʑʒʓʔʕʖʗʘʙʚʛʜʝʞʟʠʡʢʣʤʥʦʧʨʩʪʫʬʭʮʯ</div>
</div>
<div data-block="Spacing">
<div class="line">ʰʱʲʳʴʵʶʷʸʹʺʻʼʽʾʿˀˁ˂˃˄˅ˆˇˈˉˊˋˌˍˎˏ</div>
<div class="line">ːˑ˒˓˔˕˖˗˘˙˚˛˜˝˞˟ˠˡˢˣˤ˥˦˧˨˩ˬ˭ˮ˯˰˱</div>
<div class="line">˲˳˴˵˶˷˸˹˺˻˼˽˾˿</div>
</div>
<div data-block="Greek">
<div class="line">ͰͱͲͳʹ͵Ͷͷͺͻͼͽ;Ϳ΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗ</div>
<div class="line">ΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθ</div>
<div class="line">ικλμνξοπρςστυφχψωϊϋόύώϏϐϑϒϓϔϕϖϗϘ</div>
<div class="line">ϙϚϛϜϝϞϟϠϡϢϣϤϥϦϧϨϩϪϫϬϭϮϯϰϱϲϳϴϵ϶Ϸϸ</div>
<div class="line">ϹϺϻϼϽϾϿ</div>
</div>
<div data-block="Cyrillic">
<div class="line">ЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОП</div>
<div class="line">РСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмноп</div>
<div class="line">рстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџ</div>
<div class="line">ѠѡѢѣѤѥѦѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿ</div>
<div class="line">Ҁҁ҂ҊҋҌҍҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦ</div>
<div class="line">ҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆ</div>
<div class="line">ӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢӣӤӥӦ</div>
<div class="line">ӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆ</div>
<div class="line">ԇԈԉԊԋԌԍԎԏԐԑԒԓԔԕԖԗԘԙԚԛԜԝԞԟԠԡԢԣԤԥԦ</div>
<div class="line">ԧԨԩԪԫԬԭԮԯ</div>
</div>
<div data-block="Armenian">
<div class="line">ԱԲԳԴԵԶԷԸԹԺԻԼԽԾԿՀՁՂՃՄՅՆՇՈՉՊՋՌՍՎՏՐ</div>
<div class="line">ՑՒՓՔՕՖՙ՚՛՜՝՞՟աբգդեզէըթժիլխծկհձղճ</div>
<div class="line">մյնշոչպջռսվտրցւփքօֆև։֊֍֎֏</div>
</div>
<div data-block="Hebrew">
<div class="line">־׀׃׆אבגדהוזחטיךכלםמןנסעףפץצקרשתװ</div>
<div class="line">ױײ׳״</div>
</div>
<div data-block="Arabic">
<div class="line">؆؇؈؉؊؋،؍؎؏؛؞؟ؠءآأؤإئابةتثجحخدذرز</div>
<div class="line">سشصضطظعغػؼؽؾؿـفقكلمنهوىي٠١٢٣٤٥٦٧</div>
<div class="line">٨٩٪٫٬٭ٮٯٱٲٳٴٵٶٷٸٹٺٻټٽپٿڀځڂڃڄڅچڇڈ</div>
<div class="line">ډڊڋڌڍڎڏڐڑڒړڔڕږڗژڙښڛڜڝڞڟڠڡڢڣڤڥڦڧڨ</div>
<div class="line">کڪګڬڭڮگڰڱڲڳڴڵڶڷڸڹںڻڼڽھڿۀہۂۃۄۅۆۇۈ</div>
<div class="line">ۉۊۋیۍێۏېۑےۓ۔ە۞ۥۦ۩ۮۯ۰۱۲۳۴۵۶۷۸۹ۺۻۼ</div>
<div class="line">۽۾ۿ</div>
</div>
<div data-block="Syriac">
<div class="line">܀܁܂܃܄܅܆܇܈܉܊܋܌܍ܐܒܓܔܕܖܗܘܙܚܛܜܝܞܟܠܡܢ</div>
<div class="line">ܣܤܥܦܧܨܩܪܫܬܭܮܯݍݎݏ</div>
</div>
<div data-block="Arabic">
<div class="line">ݐݑݒݓݔݕݖݗݘݙݚݛݜݝݞݟݠݡݢݣݤݥݦݧݨݩݪݫݬݭݮݯ</div>
<div class="line">ݰݱݲݳݴݵݶݷݸݹݺݻݼݽݾݿ</div>
</div>
<div data-block="Thaana">
<div class="line">ހށނރބޅކއވމފދތލގޏސޑޒޓޔޕޖޗޘޙޚޛޜޝޞޟ</div>
<div class="line">ޠޡޢޣޤޥޱ</div>
</div>
<div data-block="NKo">
<div class="line">߀߁߂߃߄߅߆߇߈߉ߊߋߌߍߎߏߐߑߒߓߔߕߖߗߘߙߚߛߜߝߞߟ</div>
<div class="line">ߠߡߢߣߤߥߦߧߨߩߪߴߵ߶߷߸߹ߺ</div>
</div>
<div data-block="Samaritan">
<div class="line">ࠀࠁࠂࠃࠄࠅࠆࠇࠈࠉࠊࠋࠌࠍࠎࠏࠐࠑࠒࠓࠔࠕࠚࠤࠨ࠰࠱࠲࠳࠴࠵࠶</div>
<div class="line">࠷࠸࠹࠺࠻࠼࠽࠾</div>
</div>
<div data-block="Mandaic">
<div class="line">ࡀࡁࡂࡃࡄࡅࡆࡇࡈࡉࡊࡋࡌࡍࡎࡏࡐࡑࡒࡓࡔࡕࡖࡗࡘ࡞</div>
</div>
<div data-block="Arabic">
<div class="line">ࢠࢡࢢࢣࢤࢥࢦࢧࢨࢩࢪࢫࢬࢭࢮࢯࢰࢱࢲࢳࢴࢶࢷࢸࢹࢺࢻࢼࢽ</div>
</div>
<div data-block="Devanagari">
<div class="line">ऄअआइईउऊऋऌऍऎएऐऑऒओऔकखगघङचछजझञटठडढण</div>
<div class="line">तथदधनऩपफबभमयरऱलळऴवशषसहऽॐक़ख़ग़ज़ड़ढ़फ़य़</div>
<div class="line">ॠॡ।॥०१२३४५६७८९॰ॱॲॳॴॵॶॷॸॹॺॻॼॽॾॿ</div>
</div>
<div data-block="Bengali">
<div class="line">ঀঅআইঈউঊঋঌএঐওঔকখগঘঙচছজঝঞটঠডঢণতথদধ</div>
<div class="line">নপফবভমযরলশষসহঽৎড়ঢ়য়ৠৡ০১২৩৪৫৬৭৮৯ৰৱ</div>
<div class="line">৲৳৴৵৶৷৸৹৺৻</div>
</div>
<div data-block="Gurmukhi">
<div class="line">ਅਆਇਈਉਊਏਐਓਔਕਖਗਘਙਚਛਜਝਞਟਠਡਢਣਤਥਦਧਨਪਫ</div>
<div class="line">ਬਭਮਯਰਲਲ਼ਵਸ਼ਸਹਖ਼ਗ਼ਜ਼ੜਫ਼੦੧੨੩੪੫੬੭੮੯ੲੳੴ</div>
</div>
<div data-block="Gujarati">
<div class="line">અઆઇઈઉઊઋઌઍએઐઑઓઔકખગઘઙચછજઝઞટઠડઢણતથદ</div>
<div class="line">ધનપફબભમયરલળવશષસહઽૐૠૡ૦૧૨૩૪૫૬૭૮૯૰૱</div>
<div class="line">ૹ</div>
</div>
<div data-block="Oriya">
<div class="line">ଅଆଇଈଉଊଋଌଏଐଓଔକଖଗଘଙଚଛଜଝଞଟଠଡଢଣତଥଦଧ</div>
</div>
</div>
</div>
<script src="support/text-orientation.js"></script>
|