⁉を書くときに縦書きにすると赤色になる
-
1文字の⁉を書くときに
<pre style=”font-size: 12pt; writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;”>神楽坂、今日は⁉
⁉だけが赤色になる。どうして黒色にならないのは
-
⁉
は環境依存文字(inspect)ですが、環境、フォントによってはカラー絵文字同様に扱われます。また環境によってはうまく表示できてませんね;(⁉はなぜか一部のフォントで!?だったり?!だったりするのです。実際今まさに自分の環境でそれが起こっています)
なおカラー絵文字以外でそれを含むフォントを強制できれば黒くなるはずです……
フォントを強制できれば黒くなるはず……どうやってするのでしょうか?
⁉;やってみても同じで、やはり赤文字になってします。フォントを強制するのは以下の書き方で出来そうです(以下はもちろん、「おひさまフォント」が入っているWindows端末で閲覧した時にしか効果はないと思いますが)。
<pre style="font-family:'@おひさまフォント'!important; font-size: 12pt; writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;">神楽坂、今日は⁉</pre>
でも、「おひさまフォント」にその字はそもそも無いみたいですね、「おひさまフォント」が入っているWindows端末である私のPCで見た限りでは。字体が全然違う赤い文字が出ます。
ちなみに、これ、私のiPad Air(iOSは最新版)で見ると別に赤く見えないんですけど(Windows端末では赤く見えてます)、とすると、iOSにデフォルトで入ってるような日本語フォント(ヒラギノとかでしょうか?)を強制すると、赤くならずに済むかもしれませんね。もちろん、それが入ってる端末では、でしょうけど。
問題の文字がちゃんと入ってるウェブフォントを使うと、どの端末で見ても赤くならずに済む可能性はあると思います。
ちなみに@はWindowsで縦書き用フォントを指定する書き方だったような気がしますが、他の環境では通用しなさそうな気もするので@なしで指定した方が確実かもしれません。
なおダッシュボードの外観の下のCSS編集(デフォルトで入っている機能なのか、JetPackによる拡張なのかは忘れてしまいましたが)で以下のようにウェブフォントを追加すると
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 500; src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format("opentype"); }
多分、以下のような書き方で当該ウェブフォントの使用を強制できると思うのですが、
<pre style="font-family:'Noto Sans JP'!important; font-size: 12pt; writing-mode: vertical-rl; -epub-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;">神楽坂、今日は⁉</pre>
実際やってみましたが、Noto Sans JPでも赤くなります。
あと、私が使ってるWindows版のGoogle Chromeだと、縦書きにせず、普通に横書きのままでもしっかり赤いです。
このページを見ていて思ったのですが
Unicode Character ‘EXCLAMATION QUESTION MARK’ (U+2049)
Variantsが、二つあるんですけど、
U+2049 U+FE0E text style
U+2049 U+FE0F emoji style
どうもemoji style解釈になってるんじゃないかと思いますね。絵文字の方は、上記のページでの表示例も赤いから。仮にそうだとすると、’VARIATION SELECTOR-15′ (U+FE0E)を使って、「text styleだ!」って明示できればいいんでしょうけど、どうすれば明示できるんでしょうねぇ?。まさか、
⁉;︎;
って続けて書けばいいってわけでもないでしょうしねぇ。。。
って思ってたら、おおっと!
⁉;のところを⁉;︎;にしてみてください。私のサイトでは(少なくとも横書きでは)黒くなりましたよ。
縦も確認しました。いけます。⁉;︎;とかけば黒くなります。ただ、残念ながら、iPad Air上のGoogle Chromeだと、この書き方では縦書きになりません。問題の文字だけ横に寝てしまいます。なので、この問題の解決にはならないですね。
こんにちは、
emoji を使用しなくてもよいのであれば、WP Disable Emoji プラグイン
https://wordpress.org/plugins/disable-emojis/
を使うと、画像への置換が行われなくなり、通常の色で表示されるようになります。
emoji を有効のまま、機種依存文字を使用するという事でしたら、
@tg29359 の書いていただいた事を、フィルタでしょりすると、いいかもしれません。
functions.php
<?php add_filter('the_content','force_emoji_notation'); function force_emoji_notation( $content ) { return str_replace( '⁉', '⁉;︎;', $content ); } ?>
試してみました。
⁉;の記述だけで、MacOSX Safari, Chrome では縦書き表示できました。
更に検証続けます。上記のページをWindows10, Google Chrome46.0.2490.86 mで見てみました。たしかに、縦書きで、赤くならず、正常に表示できていますね。私のサイトではなぜ赤くなってしまうのでしょう?。不思議です。
私のサイトで試してみたページは下記です。
http://tg29359.rdy.jp/1300私のサイトの属性で、関係しそうな属性としては
WordPressのバージョン:4.4-RC1-35769
テーマ:Twenty Sixteen
ダッシュボード->設定->投稿設定->:-) や 😛 のような顔文字を画像に変換して表示する:チェックなし
です。私のサイトの前述のページをChromeで表示したあと、「ページを表示」でみると、赤く表示される箇所は「⁉;」として表示されます。黒く表示される箇所は「⁉;︎;」と表示されます。
テキストモードで⁉;と入れたあと、ビジュアル画面に移ると⁉に自動置き換えされてます。
そのまま公開にしましたが、縦書き表示できました。WordPressのバージョン:4.3.1-Ja
テーマ:Twenty Fourteen
ダッシュボード->設定->投稿設定->:-) や 😛 のような顔文字を画像に変換して表示する:チェックあり
です。類似の条件でやってみたのですが、私のサイトではやはり赤くなってしまいます。
http://kabanenoimina.x0.com/s1/11/
emojiを無効にするプラグインは何かインストールされていますか?。
僕はうまくいきました。不思議です。でもありがとうございました。
テキストモードで⁉;と入れたあと、ビジュアル画面に移って自動置き換えされてから、そのまま公開したら上手く行ったということですよね?。なんで私のサイトだけ駄目なんだろう?(笑)。
でも、元々の質問者さんの問題は解決したようなので良かったです。私のサイトはなんか設定壊れてるような気がして少し不安になりましたが(笑)。
ちなみに絵文字だけのフォントでWebフォント用に配布されてる国産フォントもありますよ~
http://emojisymbols.com/emojilist.php
🙂 や 😛 のような顔文字を画像に変換して表示する
はスマイリーのための設定であって絵文字(twemoji)には関係ありません……(このオプションで絵文字も無効化してくれ~って議論はありましたが完全に別物なので却下されました……プラグイン無しで絵文字無効化するオプションあってもいいと思うんだけどな……)@tg29359 さん バリエーションシーケンス とっても参考になりました
<pre style="font-size: 12pt; writing-mode: tb-rl; -epub-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;">神楽坂、今日は⁉%emoji%</pre> <pre style="font-size: 12pt; writing-mode: tb-rl; -epub-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;">神楽坂、今日は⁉%text%</pre> ☎ ;%text% ☎ ;%emoji%
functions.php
add_filter('the_content','force_emoji_notation'); function force_emoji_notation( $content ) { $content = str_replace( array('%text%','%emoji%'),array('︎ ;','️ ;'), $content); return $content ; }
で、
http://tenman.info/labo/snip/files/emoji-variation-sequences.jpg
なんですね
バリエーションの件、私は今回初めて知りましたが、異体字を使い分ける時に便利そうですよね。
葛;󠄀;葛󠄀
と
葛;󠄁;葛󠄁
とか。
- トピック「⁉を書くときに縦書きにすると赤色になる」には新たに返信することはできません。