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

Windows 8.1 + Firefox 38.0a1

Windows 8.1 + Opera 12.17

Windows 8.1 + Blink (Iron 40)

Windows 8.1 + Blink (Iron 41)

Windows 8.1 + Midori 0.5.9

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

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 (IE6).

Windows XP + Internet Explorer 8.0.6001.18702

Font:

@Yu Gothic (miss)

@Yu Mincho (miss)

@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

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

Windows XP + Safari 5.1.7

Font:

@Yu Gothic (miss)

@Yu Mincho (miss)

@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)

CSS hacks for Windows vertical font:

.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;
}

/* Blink & WebKit only */
.v .Meiryo:not(*:root) {
  font-family:
    '@Meiryo',
    sans-serif;
}

/* Opera 9.5-12.17 only */
_:-o-prefocus,
body:last-child .v .Meiryo {
  font-family:
    '@\30E1\30A4\30EA\30AA',
    '@Meiryo',
    sans-serif;
}

/* Opera 12.1x only */
@supports ( -o-object-fit: contain ) {
  body:last-child .v .Meiryo {
    font-family:
      '@\30E1\30A4\30EA\30AA',
      '@Meiryo',
      sans-serif;
  }
}

Rendering test (OS X)

Fonts (Mac):

YuGothic, YuMincho, Hiragino Kaku Gothic ProN, Hiragino Maru Gothic ProN, Hiragino Mincho ProN, Osaka-Mono, Osaka

Horizontal samples (Mac):

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

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

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

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

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

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

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

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

Vertical samples (Mac, if possible):

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

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

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

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

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

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

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

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

Results (OSX)

OS X Yosemite + Safari 8

Font:

YuGothic

YuMincho

Hiragino Kaku Gothic ProN

Hiragino Maru Gothic ProN

Hiragino Mincho ProN

Osaka-Mono

Osaka

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: “font-family: '@font'” unmatches

OS X Yosemite + Firefox 38.0a1 (case Win?)

Font:

YuGothic

YuMincho

Hiragino Kaku Gothic ProN

Hiragino Maru Gothic ProN

Hiragino Mincho ProN

Osaka-Mono

Osaka

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)

OS X Yosemite + Chrome 40.0.2214.115

About the same:

OS X Yosemite + Safari 8

Difference 1:

In horizontal Osaka, paddings of U+309B are larger than Safari 8

Difference 2:

In horizontal Osaka, U+3042 and U+3041 are same width

Difference 3:

In vertical Osaka, U+309B Dakuten position (Sf8: center, Ch40: top-left)

Difference 4:

In vertical Osaka, U+0041 is the same angles as other fonts

Note: “font-family: '@font'” unmatches