Various webfont for Japanese special characters
I am working on a Japanese website and I am using the Meiryo website. I really like this font, but special characters have too much headroom. The exact problem is that there is too much space before special characters such as,, which makes the design disabled if such a character is the first on the line.
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
<h3>【好き】</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3>【好きくない】</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、プンプンしてる人</p>
<h3>【弱点】</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>
Image of the problem in my browser: http://i.stack.imgur.com/OYqMt.jpg
My idea to solve this problem is to write a script that puts each special character in a container with negative margin. This is obviously very hacky and not really practical, so are there any better solutions, for example, for fonts only for special characters?
source to share
I wouldn't say this is a great option, but you can let CSS render the lenticular brackets. By doing this, you completely remove the parentheses from the text, so they can no longer be selected, indexed, etc., but this will solve the problem of filling those characters with a simple CSS class and work with any element.
This only applies to these two characters. Other special characters need similar CSS rules.
.brackets:before {
content:'\3010';
margin-left:-1.5%;
}
.brackets:after {
content:'\3011';
margin-right:-1.5%;
}
And then in your HTML, just add the brackets class and remove the brackets in the text:
<h3 class="brackets">好き</h3>
.brackets:before {
content:'\3010';
margin-left:-1.5%;
}
.brackets:after {
content:'\3011';
margin-right:-1.5%;
}
<h3 class="brackets">好き</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3 class="brackets">好きくない</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、<span class="brackets">プンプンしてる人</span></p>
<h3 class="brackets">弱点</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>
source to share