Dakuten on HTML

History:: July 14, 2015 (added -webkit-font-feature-settings: 'ccmp' 1;); March 10, 2015 (added Iron 41 image of @alt); February 21, 2015 (OSX); February 20, 2015 (added <U+3041 U+3099>, non-standard @font); February 17, 2015 (published)
About “Dakuten”:: https://en.wikipedia.org/wiki/Dakuten
About “Horizontal and vertical writing in East Asian scripts”:: https://en.wikipedia.org/wiki/Horizontal_and_vertical_writing_in_East_Asian_scripts
About “UTR #50: Unicode Vertical Text Layout”:: https://www.unicode.org/reports/tr50/
About “Glyph Composition/Decomposition (ccmp)” — Syntax for OpenType features in CSS: https://helpx.adobe.com/typekit/using/open-type-syntax.html#ccmp
<U+3041> HIRAGANA LETTER SMALL A: ぁ
<U+3042> HIRAGANA LETTER A: あ
<U+304B> HIRAGANA LETTER KA: か
<U+304C> HIRAGANA LETTER GA: が
<U+3099> COMBINING KATAKANA-HIRAGANA VOICED SOUND MARK: ゙
<U+309B> KATAKANA-HIRAGANA VOICED SOUND MARK: ゛

Rendering test (Windows)

Fonts:

Yu Gothic, Yu Mincho, Meiryo, MS Gothic, MS Mincho, IPAexGothic, IPAexMincho, MS PGothic, MS PMincho

Horizontal samples:

あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛

あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙

ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙

か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛

が, が, が, が, が, が, が, が, が

が, が, が, が, が, が, が, が, が

A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛

A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙

Vertical samples (if possible):

あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛

あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙

ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙

か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛

が, が, が, が, が, が, が, が, が

が, が, が, が, が, が, が, が, が

A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛

A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙

Results (Windows)

Windows 8.1 + Internet Explorer 11.0.9600.17631

Font:: Yu Gothic; Yu Mincho; Meiryo; MS Gothic; MS Mincho; IPAexGothic; IPAexMincho; MS PGothic; MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304C

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

U+3042 U+309B (vert)

U+3042 U+3099 (vert)

U+3041 U+3099 (vert)

U+304B U+309B (vert)

U+304C (vert)

U+304B U+3099 (vert)

U+0041 U+309B (vert)

U+0041 U+3099 (vert)

Windows 8.1 + Firefox 35.0.1 (case WinXP?)

Font:: Yu Gothic; Yu Mincho; Meiryo; MS Gothic; MS Mincho; IPAexGothic; IPAexMincho; MS PGothic; MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+3099

U+0041 U+3099

Windows 8.1 + Firefox 38.0a1

Font:: Yu Gothic; Yu Mincho; Meiryo; MS Gothic; MS Mincho; IPAexGothic; IPAexMincho; MS PGothic; MS PMincho

U+3042 U+309B (vert)

U+3042 U+3099 (vert)

U+3041 U+3099 (vert)

U+304B U+3099 (vert)

U+0041 U+3099 (vert)

Note: about:config → layout.css.vertical-text.enabled (Nightly Build only)

Windows 8.1 + Firefox 35.0.1 + NVDA 2014.4jp

Unicode
Character: Audio

U+3042

U+3042 U+309B

U+3042 U+3099
: This is same as “U+3042”.

U+304B

U+304B U+309B

U+304C

U+304B U+3099
: This is same as “U+304C”.

U+0041

U+0041 U+309B

U+0041 U+3099

Note: “U+3041” and “U+3041 U+3099” are read equally.

Windows 8.1 + Opera 12.17

Font:: Yu Gothic; Yu Mincho; Meiryo; MS Gothic; MS Mincho; IPAexGothic; IPAexMincho; MS PGothic; MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+3099

U+0041 U+3099

Windows 8.1 + Blink (Iron 40.0.2150.0, Opera 27.0.1689.69, Vivaldi 1.0.94.2, etc.)

Font:: Yu Gothic; Yu Mincho; Meiryo; MS Gothic; MS Mincho; IPAexGothic; IPAexMincho; MS PGothic; MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

U+3042 U+309B (vert)

U+3042 U+3099 (vert)

U+3041 U+3099 (vert)

U+304B U+309B (vert)

U+304B U+3099 (vert)

U+0041 U+309B (vert)

U+0041 U+3099 (vert)

Note: If “-webkit-font-feature-settings: 'ccmp' 1;” is applied, the same result as Firefox is brought.

Windows 8.1 + Midori 0.5.9

Font:: Yu Gothic; Yu Mincho; Meiryo; MS Gothic; MS Mincho; IPAexGothic; IPAexMincho; MS PGothic; MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

U+3042 U+309B (vert)

U+3042 U+3099 (vert)

U+3041 U+3099 (vert)

U+304B U+309B (vert)

U+304B U+3099 (vert)

U+0041 U+309B (vert)

U+0041 U+3099 (vert)

Note: If “-webkit-font-feature-settings: 'ccmp' 1;” is applied, the same result as Firefox is brought.

Windows 8.1 + Amaya 11.4.7

Font:: sans-serif; serif

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304C

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

Windows 8.1 + Lynx 2.8.6rel.4THjp

Character:: Numeric character reference; UTF-8 in @alt attribute; UTF-8 in textnode

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304C

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

Windows 8.1 + Lynx 2.8.9dev.3

Character:: Numeric character reference; UTF-8 in @alt attribute; UTF-8 in textnode

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304C

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

Windows XP + Internet Explorer 6 (KB943922)

Font:: Meiryo; Meiryo lang=ja; MS Gothic; MS Gothic lang=ja; MS Mincho; MS Mincho lang=ja; MS PGothic; MS PGothic lang=ja; MS PMincho; MS PMincho lang=ja

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304C

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

U+3042 U+309B (vert)

U+3042 U+3099 (vert)

U+3041 U+3099 (vert)

U+304B U+309B (vert)

U+304C (vert)

U+304B U+3099 (vert)

U+0041 U+309B (vert)

U+0041 U+3099 (vert)

Windows XP + Internet Explorer 8.0.6001.18702

About the same:: Windows 8.1 + Blink (Iron 40)

Difference 1:: Windows XP has no YuGothic/YuMincho

Difference 2:: Vertical <U+3042 U+3099> Meiryo Dakuten position (IE8: top-left; Blink: middle-right;)

Difference 3:: Vertical <U+3041 U+3099> Meiryo Dakuten position (IE8: top-left; Blink: middle-right;)

Difference 4:: Vertical <U+0041 U+3099> Meiryo Dakuten position (IE8: top-left; Blink: middle-right;)

Windows XP + Safari 5.1.7

About the same:: Windows 8.1 + Midori 0.5.9

Difference 1:: Windows XP has no YuGothic/YuMincho

Difference 2:: On Windows XP, Safari 5.1.7 draws MS (P)Mincho as bitmap font

Difference 3:: Default font-size of Safari are 16 pixels (like many browsers)

Windows XP + Firefox 35.0.1 (case Win8.1?)

Font:: Meiryo; MS Gothic; MS Mincho; IPAexGothic; IPAexMincho; MS PGothic; MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+3099

U+0041 U+3099

Appendix: `<img>` @`alt` styling

CSS & HTML

img {
  font-size: 2em;
  white-space: nowrap;
}

.v {
  /* for IE5.5+ */
  writing-mode: tb-rl;
}

html:root .v {
  -ms-writing-mode: tb-rl;
  -ms-text-orientation: mixed;
  -webkit-writing-mode: vertical-rl;
  -webkit-text-orientation: mixed;

  /* for Fx36+ (Nightly) */
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.Meiryo {
  font-family:
    /* escape for Presto */
    '\30E1\30A4\30EA\30AA',
    Meiryo,
    sans-serif;
}

<img class="v Meiryo"
  alt="&#x3042;&#x309B; (vertical Meiryo)"
  title="&#x3042;&#x309B; (vertical Meiryo)">

Test

Windows 8.1 + Internet Explorer 11.0.9600.17631

Windows XP + Internet Explorer 8.0.6001.18702

Windows XP + Internet Explorer 6

Windows 8.1 + Firefox 35.0.1

styled text (but unsupported writing-mode)

Windows 8.1 + Firefox 38.0a1

Windows 8.1 + Opera 12.17

styled text (but fixed height 22 pixel, text clipped)

Windows 8.1 + Blink (Iron 40)

Windows 8.1 + Blink (Iron 41)

Windows 8.1 + Midori 0.5.9

styled text (but uneffective writing-mode)

Windows XP + Safari 5.1.7

Appendix: Rendering test about non-standard Windows vertical font

About “Vertical Writing and Printing”: https://msdn.microsoft.com/en-us/library/cc194859.aspx

Fonts (Windows vertical font):

@Yu Gothic, @Yu Mincho, @Meiryo, @MS Gothic, @MS Mincho, @IPAexGothic, @IPAexMincho, @MS PGothic, @MS PMincho

Horizontal samples (Windows vertical font):

あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛

あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙

ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙

か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛

が, が, が, が, が, が, が, が, が

が, が, が, が, が, が, が, が, が

A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛

A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙

Vertical samples (Windows vertical font, if possible):

あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛, あ゛

あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙, あ゙

ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙, ぁ゙

か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛, か゛

が, が, が, が, が, が, が, が, が

が, が, が, が, が, が, が, が, が

A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛, A゛

A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙, A゙

<img> @alt styling test (Windows vertical font)

Results (vertical font)

Windows 8.1 + Internet Explorer 11.0.9600.17631

Font:: @Yu Gothic; @Yu Mincho; @Meiryo; @MS Gothic; @MS Mincho; @IPAexGothic; @IPAexMincho; @MS PGothic; @MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304C

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

Note: In “writing-mode: tb-rl;”, the result is same as the case of default font (IE11).

Windows 8.1 + Firefox 38.0a1

Font:: sans-serif; serif; sans-serif (vert); serif (vert)

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

“font-family: 'font', sans-serif;” … 'font' matches
“font-family: '@font', sans-serif;” … 'font' unmatches
“sans-serif”: Arial, MS PGothic
“serif”: Times New Roman, MS PGothic
“U+0041 U+3099” (vertical): there is dust

Windows 8.1 + Opera 12.17

Font:: @Yu Gothic; @Yu Mincho; @Meiryo; @MS Gothic; @MS Mincho; @IPAexGothic; @IPAexMincho; @MS PGothic; @MS PMincho

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304C

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

Windows 8.1 + Blink (Iron 40.0.2150.0, etc.)

Coincident:: Windows 8.1 + Blink (Iron 40) default font

i.e.:: “font-family: 'font'” == “font-family: '@font'”

Windows 8.1 + Midori 0.5.9

Font:: sans-serif; serif; sans-serif (vert); serif (vert)

U+3042 U+309B

U+3042 U+3099

U+3041 U+3099

U+304B U+309B

U+304B U+3099

U+0041 U+309B

U+0041 U+3099

Windows 8.1 + Amaya 11.4.7

Coincident:: Windows 8.1 + Amaya default font

i.e.:: “font-family: '@font'” … 'font' unmatches

Windows XP + Internet Explorer 6 (KB943922)

Font:: @Yu Gothic (miss); @Yu Mincho (miss); @Meiryo; @Meiryo lang=ja; @MS Gothic; @MS Gothic lang=ja; @MS Mincho; @MS Mincho lang=ja; @MS PGothic; @MS PGothic lang=ja; @MS PMincho; @MS PMincho lang=ja