JavaScriptからHTMLでUnicode文字が絵文字としてレンダリングされないようにするにはどうすればよいですか？

119

FileFormat.Infoの検索から、特殊文字のUnicodeを見つけています。

一部の文字は、⚠（警告記号、\u26A0または⚠）などの古典的な白黒のグリフとしてレンダリングされます。CSSスタイル（色など）を適用できるので、これらの方が望ましいです。

警告記号の画像

その他は、⌛（砂時計、\u231Bまたは⌛）などの新しい漫画の絵文字としてレンダリングしています。私はそれらを完全にスタイルすることができないので、これらは好ましくありません。

砂時計の絵文字の画像

Mac ChromeでもMac SafariでもないMac Firefoxで砂時計のグリフを見ることができるので、ブラウザーがこの変更を行っているようです。

ブラウザーに古い（フラットモノトーン）バージョンを強制的に表示させる方法はありますか？

更新：（以下のコメントから）text-vs-emojiを適用するために使用できるテキストプレゼンテーションセレクターがFE0Eあるようです。セレクターは⌛︎、HTML hexや\u231B\uFE0EJS などのように、文字のコード上にスペースのないサフィックスとして連結されます。ただし、すべてのブラウザー（ChromeやEdgeなど）でこれが受け入れられるわけではありません。

javascript  html  css  unicode  emoji 
— あんた
ソース
CSSルールにフォントファミリを設定しますか？
— G-Cyrillus、2015年
2
— 字形
1
@janaspage ︎と\uFE0Eサファリ（8および9）に（2,8）、正しいと正常に動作しているが、答えのように述べています。ブラウザのサポートはむらである、とChrome（46）が完全に壊れています。
— 一二三
2
絵文字のレンダリングを制御する標準的な方法はありません。
— nwellnhof、2015年
1
あなたがしなければならないのは、この文字のグリフを含むフォントを適用することだけであり、そのグリフはあなたが望むように見えます（色、形、またはあなたが好むものは何もありません）。
— ShreevatsaR 2017

回答:

133

追加Unicodeのバリエーション選択、テキスト、VS15を強制するために文字を︎。
これにより、前の文字が絵文字シンボルではなくテキストとしてレンダリングされます。

<p>🔒&#xFE0E;</p>

結果：🔒︎

詳細：テキストまたは絵文字としてのUnicodeシンボル

— 黄
ソース
1
これは非常に役立つので、先日私はそれを賛成しました。私が書いているFacebook広告に絵文字とこの非表示の文字を貼り付けるにはどうすればよいのでしょうか。PSこれも面白かった：apple.stackexchange.com/a/240450/53510
— Ryan
3
この&#xFE0E;トリックは特定のフォントでは機能しないことに気づきました。すべてのマシン（Windows、iOS、Mac、Androidなど）にインストールできると合理的に期待できるフォントを見つけるのに苦労しています。
— ライアン
12
このソリューションは、入力フィールドでさえ発生する可能性のあるシンボルに対しては実際には受け入れられません。ロジックで使用されている記号thisでこの問題が発生しています。これが絵文字である必要があると誰もが考える理由を、私の人生では理解できません！
— 2017年
2
次のページは、絵文字の直後にその特殊文字をコピーアンドペーストして、スタイルを適用せずにフラットに表示するのに役立ちます。たとえば、💬の代わりに💬および🌟︎の代わりに💬およびseeの代わりに🌟および⌛︎が表示される場合があります（デバイスによって異なります）unicode-symbol.com/u/FE0E.html
— Ryan
14
これは私の例では絵文字としてレンダリングされます。Mac10.11.6のChrome 71です。
— lahwran
13

私は、中にUnicode文字ていたcontentのをspan::before、私は持っていたfont-familyのをspan「のSegoe UI記号」に設定されています。ただし、Chromeではレンダリングにフォントとして「Segoe UI Emoji」を使用していました。

ただし、だけでなくに対して明示的font-familyに「Segoe UI Symbol」を設定すると、機能しました。span::beforespan

— グリア
ソース
これは正解です。特に、古い非表示の文字メソッドは、ほとんどの主要なブラウザーで受け入れられていないためです。
— サラC.コリアー
2

iOSで絵文字が表示されないようにするCSSのみのソリューションfont-family: monospaceでは、デフォルトで絵文字バリアントではなくグリフのテキストバリアントを使用できます。

— cmbuckley
ソース
1

Androidフォントは期待どおりに機能が豊富ではありません。フォントファイルにはこれらのエキゾチックなグリフがありません。Androidには、グリフのない数文字のハックがあります。アイコンに置き換わります。

したがって、解決策は、サイトをWebフォント（woff）と統合することです。FontForgeを使用して新しいフォントファイルを作成し、たとえば必要なグリフを無料のセリフTTFから選択します。すべてのグリフは1kかかります。woffファイルを生成します。

カスタムフォントファミリをインポートするための簡単なCSSを準備します。

style.css：

@font-face {
  font-family: 'Exotic Icons';
  src: url('exotic-icons.woff') format('woff');
}

.exotic-symbol-font {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Exotic Icons';
    font-style: normal;
    font-weight: normal;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

index.htmlファイル：

<html>
  <head>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet"></head>
    <title>Test custom glyphs</title>
  </head>
  <body>
    <table>
      <tr>
        <td class="exotic-symbol-font">
            😭 ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>
— ダニール・S・ヤイツコフ
ソース
1

絵文字がテキストからあまり目立たないようにモノクロ表示を強制することが主な関心事である場合、CSSフィルターは、単独で、またはUnicodeバリエーションセレクターと組み合わせて、必要なものになる可能性があります。

p.gscale { 
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
a {
  color: #999;
  -webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
   filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}
<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>

<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>
スニペットを展開

バリエーションセレクターとは異なり、CSSフィルターはすべてに適用されるため、絵文字のレンダリング方法は問題になりません。（私はそれらを使用して、ウェイバックマシンを指すように変更されたハイパーリンク上のPNG形式の「リンクタイプ」アイコンをグレースケールします。）

ただ、注意点を気に。子の親要素のフィルターをオーバーライドすることはできないため、この手法を使用して段落をグレースケールし、その中のリンクの色を変更することはできません。😢

...それでも、全体をハイパーリンクにするか、その中のリッチマークアップを許可しない場合に役立ちます。（例：タイトルと説明）

ただし、CSSが実際に適用されない限り、これは機能しません。そのため、より信頼性の高い2番目のオプションを指定します。 <title>、Unicodeバリエーションセレクターよりも要素の（私はGitHubを見ています。ブラウザのタブ）：

ユーザーが指定した文字列を<title>要素に入れる場合は、太字/斜体/下線などとともに絵文字を除外します。マークアップ。（はい、それを見逃した人のために、標準は<title>アンパサンドエスケープと私がテストしたすべてのタグをリテラルテキストとして解釈するブラウザを除いて、コンテンツがプレーンテキストであることを求めています。）

私が考えることができる2つの方法は次のとおりです。

  1. 手動で維持された正規表現を直接使用する最新バージョンのUnicodeが絵文字とその修飾子を配置するブロックに一致を。
  2. 書記素クラスタを反復処理し、認識された絵文字コードポイントを含むものをすべて破棄します。（書記素クラスターは、ベースグリフに加えて、表示文字を構成するすべての分音記号とその他の修飾子です。私がリンクする例では、Pythonの正規表現エンジンを使用してトークン化してからemoji、データベースのパッケージを使用していますが、Rustは言語の良い例ですここで、書記素クラスターの反復は、などのクレートを使用してすばやく簡単にできunicode-segmentationます。
— ssokolow
ソース
0

デスクトップバージョン75のGoogle Chromeは、ページの読み込み中に最初に遭遇するUnicodeエスケープに基づいてUnicode文字をレンダリングするアプローチを明確にするようです。たとえば、ページソースで最初のHTML Unicodeエスケープとして解析され、同等の絵文字がない場合、＆＃9207; 絵文字としてレンダリングされないエスケープがページに含まれていることをChromeに明らかにするようです。

— クレイアレン
ソース
0

ssokolowの答えを拡張する、フィルターを使用するのは便利で、少なくとも単純なフォントを使用する代わりに輪郭が表示されますが、特定の色を使用する場合、RGBカラーをCSSフィルターのシーケンスに変換することは非常に困難です。

<feColorMatrix>SVGフィルターを使用することをお勧めします（ただし、かなり簡潔ですが）。グレースケールフィルターおよびデータURIスキームと組み合わせると、RGBおよびインラインCSSを介して色を表すことができます。

.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0  0 0.082 0 0 0  0 0 0.522 0 0  0 0 0 1 0'/></filter></svg>#f");
}

残念ながら、URLをデータ（属性または変数から取得）で補間することはできませんが、少なくともRGBからCSSフィルターを計算する必要はありません。

— IllidanS4はモニカを取り戻したい
ソース
-2

絵文字タイプのレンダリングをオフにする方法がわかりません。通常私はfont awesomeやglyphiconsなどのアイコンフォントを使用します（Bootstrap 3に付属）。

Unicode文字よりもこれらを使用する利点は、

  1. サイトのデザインに合うように、さまざまなスタイルから選択できます。
  2. それらはブラウザー間で一貫しています（ユニコードのスター文字を試したことがある場合、IEと他のブラウザーでは異なることに気付くでしょう）。
  3. また、使用しようとしているUnicode文字のように、完全にスタイル設定できます。

唯一の欠点は、ブラウザがページを表示するときにブラウザがダウンロードすることがもう1つあることです。

— dave.mcalpine
ソース
-3

上記の解決策はいずれも、「Google Chromeの絵文字」拡張機能では機能しませんでした。

そこで、回避策として、 Unicode文字 'BALLOT BOX WITH CHECK'（U + 2611）のスクリーンショットを作成し、phpで画像として追加しました。

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

ここに画像の説明を入力してください

参照：https : //spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

— rubo77
ソース
テキストツール（適切なライセンスが選択されたフォントを使用）を使用してInkscapeに貼り付けてから自動トレースを実行すると、SVGを取得して、必要なサイズにスケーリングできます。（できるだけ小さくするには、SVGミニファイアと手動編集を組み合わせて、自動トレースが失敗したパスのノード数を減らします。）
— ssokolow
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.