[サイト管理人向け]DirectWriteによるAAのズレを修正するスクリプト 劇場風やる夫まとめ

やる夫まとめ。ビューア付き。JavaScript をON にするとビューアで見ることができます。

Top Page > お知らせ系 > [サイト管理人向け]DirectWriteによるAAのズレを修正するスクリプト

[サイト管理人向け]DirectWriteによるAAのズレを修正するスクリプト

お知らせ系  の記事一覧

※今回は AA を使ったサイトを運営・管理している人向けの記事です

ダウンロードURL:
2016/08/24 3文字(U+2007, U+2009, U+200a)追加
新URL
http://www1.axfc.net/u/3709692/yaruo

旧URL
http://www1.axfc.net/u/3647668/yaruo

※無保証です。使用は自己責任でお願いします

※このスクリプトを適用すると、正しいサイズでも文字がにじんでしまうという現象が発生する場合があります
恐らくですが、記事の位置を左右のmarginをautoにすることで中央寄せにしている場合など、
記事の位置が小数点単位のピクセルやパーセント単位で配置されている場合、ブラウザの表示域の幅によっては
文字がにじんでしまう場合がある、と今のところ推測しています。
ピクセル単位で記事を配置しているサイトは大丈夫だと思います。
対策としては、記事の中央寄せをやめる等、記事の配置を整数ピクセル単位にする、
ブラウザの表示域の幅を文字がにじまなくなるように調節する、
等がありますが、管理人、読者どちらにも手間を強いるので現実的ではありません
今回はこのスクリプトのために「このやる夫スレ、まとめてもよろしいですか?」様とその読者様、
「暇な時にやる夫まとめ」様とその読者様にいらぬ手間をかけさせてしまいました。申し訳ありませんでした。

1◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo

      、-ー'`Y <,___
  __≦ー`___ _二z<_
   > 7  ̄、-‐ ´ ̄`'┴<
 <之′Y´/        \         こんにちは。管理人代理のできない子です
   >{  ,'  | 、 , ,.  ,.l  ,  ゙i
   | !、{  | 寸寸T ハT7} ィ,l          DirectWriteが原因で発生するAAのズレを
   ′Ji, ゙i ゙i ( ●)  (●)|ハ|       大体修正するスクリプトを作ったので公開します
    i⌒ヽ'(1. '''  _'  ''' ノ川/⌒)
.     ヽ  ヽx>、(_.ノ__,イ l |::::ヽ/
     ∧ 人lハ:::::l,三|:::/l| ,:::::ハ

2◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo
  ┌────────────┐
  |
  | DirectWriteが原因で
  | 発生するAAのズレとは?
  |
  ,_   _
  └ 、-ー'`Y <,___  ────┘
 __≦ー`___ _二z<_
 > 7  ̄、-‐ ´ ̄`'┴<
<之′Y´/        \
  >{  ,'  |、 , ,.  ,.l  ,   ゙i
 | !、{  | 寸寸T ハT7} ィ, l        最近、webブラウザはテキストの表示に DirectWrite という API を
 ′J゙i, ゙i ゙i (●) (●)| ハ|        利用するようになりました
    ゙i|゙i'(1 ,,,   ,    |          (Internet Explorer (以降 IE) はバージョン9から)
    ゙iTィ.,_   ―   _ノ
      │「ィ::ニE7 l | |
     └l´::::,r'\ト  | |
        |:::::|´  ̄`i、 | |
       ヽ::::::::::::::::::l^`i }
       /  ̄ ̄ ̄`¨

3◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo

                                                            __    __
                                                           \ ヽ/ ∠_
                                                         <⌒\ /ヘ ≧
                                                          -=ニ¨ 匸>=<二}、`ー 、
                                                       >'"´ ̄ ̄`\ \\  >
                                                         /          ヽ. ヽ}i ハ
                                                      /,  / /_|   \__ヽ.  ハ!  }|

                    この DirectWrite はとある欠陥があるそうで、         ,イ/  |:/|:∧ :|\{\ ! } i|  i|!
               この欠陥のため、DirectWrite 環境下では              ノ八 .{ ---\l --- |厶ノ  八
               AA が少しズレて表示されるようになってしまいました       \| (三)  (三).ノr'}! /
                    (MS は直す気は無さそう)                           人''  __   '' ィT´!∨
                                                         ` ァ┬=≦:ノj |! |
                                                          〈xく矢¨¨ヽ|ノL!
                                                         /Y ̄ ̄Y´|
                                                         ,′}  ...::::| |
                                                         / ノ   ::| │
                                                          //  .::::::::| │


http://altebute.hatenablog.com/entry/2014/08/30/175901

※左が Internet Explorer 11 で、右が OrinrinEditor のプレビュー

(2ちゃんねる専用ブラウザは DirectWrite を利用していないので大丈夫です)



4◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo

       ,_   _
     、-ー'`Y <,___
  __≦ー`___ _二z<_
  > 7  ̄、-‐ ´ ̄`'┴<
 <之′Y´/        \
   >{  ,' | 、 , ,.  ,.l  ,   ゙i
  | !、{  | 寸寸T ハT7} ィ, l 
    Firefox は独自にその欠陥を修正していて
  ′J゙i, ゙i ゙i (●) (●)| ハ|      DirectWrite 下でもほぼ正しく表示されます
     ゙i|゙i'(1    ,    |
     ゙iTィ.,_  'ー=-' _ノ
      │「ィ::ニE7 l __
      └l´::::/ヽト /  /
        |::::|´  ̄`i/ とヽ
        |::::|     | ̄=-'
        |:::::|    \

http://www.d-toybox.com/studio/weblog/show.php?id=2011012403

       ,_   _
     、-ー'`Y <,___
  __≦ー`___ _二z<_
  > 7  ̄、-‐ ´ ̄`'┴<
 <之′Y´/        \
   >{  ,' | 、 , ,.  ,.l  ,   ゙i 
     Google Chrome はデフォルトで DirectWrite が適用されていますが、
  | !、{  | 寸寸T ハT7} ィ, l 
     設定で DirectWrite を無効にできるそうです
  ′J゙i, ゙i ゙i (●) (●)| ハ|
     ゙i|゙i'(1    ,    |     
    しかし、初見の方はズレたAAを見ることになるし、
     ゙iTィ.,_   ー   _ノ     
    テキスト表示に影響する設定の変更に抵抗感もあるでしょう
      │「ィ::ニE7 l __
      └l´::::/ヽト /  /
        |::::|´  ̄`i/ とヽ
        |::::|     | ̄=-'
        |:::::|    \



       ,_   _
     、-ー'`Y <,___
  __≦ー`___ _二z<_
  > 7  ̄、-‐ ´ ̄`'┴<
 <之′Y´/        \
   >{  ,' | 、 , ,.  ,.l  ,   ゙i
  | !、{  | 寸寸T ハT7} ィ, l 
    IE は 11 以降
  ′J゙i, ゙i ゙i =・=  =・= | ハ| 
    設定で DirectWrite を無効にすることもできなくなったそうです
     ゙i|゙i'(1    ,    |
     ゙iTィ.,_   ―   _ノ
      │「ィ::ニE7 l __
      └l´::::/ヽト /  /
        |::::|´  ̄`i/ とヽ
        |::::|     | ̄=-'
        |:::::|    \


5◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo

/////≧\  ,ノ.       / {     ハ          ',
/////// 〉 ̄ V、/ { /   ヽ   /  i          |
////// /       ヽ /≧z __ヽ_{, 斗'  }       ト   !
///// /       ` イ.//≧=- _` ヽ /.      / ヽノ
   これがどういうことかというと、
/// 〃           | |////////≧z V..     {      まとめをPCのwebブラウザで見ている人の六割以上は
 ̄ /             l {//////// / /     ィ{        少しズレたAAを見ていることになります
`¨´             | '/////// / /     / ヽゝ     やる夫スレ新規参加者獲得にもマイナスになっているでしょう
.                ! ヽ=='' ´ /∠_ ,ィ ´  __
                ヽ     /  / /       
     ゆゆしき事態なので修正しましょう
                   `¨¨´     /´
                 ´ ´    /
                      /


https://webrage.jp/mobile/data/pc_browser_share.html

7◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo
  ┏──────┓
  │            │
  │ 修正方法  │
  │            │
  ┗──────┛


       ,_   _
     、-ー'`Y <,___
  __≦ー`___ _二z<_
  > 7  ̄、-‐ ´ ̄`'┴<
 <之′Y´/        \
   >{  ,' | 、 , ,.  ,.l  ,   ゙i
  | !、{  | 寸寸T ハT7} ィ, l      手順は3つです。
  ′J゙i, ゙i ゙i (●) (●)| ハ|
     ゙i|゙i'(1    ,    |           1、CSS の font-family の修正
     ゙iTィ.,_   ―   _ノ          2、patchForAA.js アップロード
      │「ィ::ニE7 l __        3、patchForAA.js の読み込み
      └l´::::/ヽト /  /
        |::::|´  ̄`i/ とヽ
        |::::|     | ̄=-'
        |:::::|    \

8◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo
┌────────┐
│ 1、CSS の修正  │
└────────┘


                                                ___,> Y´'ー-、
                                                _>z二_ ___`ー≧__
                                                >┴'´ ̄` ‐-、 ̄ 7 <
                                               /        ヽ `Y′之>
                                           .   /  ,  l、 、 , 、 |  ヽ }<
                                              l ,ィ {7Tハ T寸寸 |  }ノ |
              まず、CSS を修正します。修正するのは            |ハ | (●) (●)/ / ,/レ′
             AA を表示する部分の font-family です。             `|    ヽ   「)'/|/
                                                ヽ、_  ―  _,.ィT/
                                                  l 7Eニ::ィ1│
                                         パカッ   ___ハ  _/:::\
                                               ___( レ::::|
                                                    (ろ ̄T ̄ \;:::/


9◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo


.AA {
font-family: 'MS Pゴシック', 'MS PGothic', ... , sans-serif;
}

                           / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄\
                            |  おそらく font-family にはこんな風に       
           |       |            |  'MS Pゴシック' が指定されているはずです   | ̄
           |       |            |  (してない人はした方がいいと思います)     |
         \|       |/        \___________________/
           \   /
            \/

.AA {
font-family: patchForAA, 'MS Pゴシック', 'MS PGothic', ... , sans-serif;
}

                           / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄\
                           |  その手前に patchForAA という値を追加します        
                           |  大文字、小文字も合わせましょう                     | ̄
                          \________________________/

    _, -‐ ⌒ヽ_
    > /⌒_⌒≧=-
  / // -‐   ̄⌒`ヽ
  >/ ./ /  __.    / __ヽヽ
. / ム.       /|. /  ヽ . } i
. ムィ . Y l  /.┳ l/   ┳ヽ! | 
    このように設定することで、ズレる文字は patchForAA の文字で表示され、
   {  | |  {  ┃     ┃ ∨} 
    ズレない文字はそのまま MS Pゴシックで表示されるようになります
   !ヘ { {^∨ゝ            }リ
.    ⌒ヽ- 、   ー‐      ノ
        >  __   イ


10◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo
┌───────────────┐
│ 2、patchForAA.js のアップロード  │
└───────────────┘

                                                 ___,> Y´'ー-、
                                                 _>z二_ ___`ー≧__
                                                 >┴'´ ̄` ‐-、 ̄ 7 <
                                                /        ヽ `Y′之>
                                            .   /  ,|          ヽ }<
                                                l ,ィ {   l、 、 , 、  |   }ノ |
       次に上のリンクの JavaScript ファイルをダウンロードして、      |ハ |7Tハ T寸寸(/ / ,/レ′
       自サイトにアップロードして下さい。このとき、                    `| ●)、(● )  「)'/|/
       アップロードした patchForAA.js の URL をメモっておきます        ヽ、_  _  _,.ィT/
                                                   l 7Eニ::ィ1│
                                                  ___ハ  _/:::\
                                                \__\_ ( レ::::|
                                                     (ろ ̄T ̄ \;:::/
(FC2ブログの場合)


                         このURL(人によって違う)をメモする


11◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo
┌──────────────┐
│3、patchForAA.js の読み込み  │
└──────────────┘


        ゞ_{ー- 、∧ノ{
       r _ ゞ ≦    ̄ ヽ
        |/r ′ - > -―  ̄`ーー
      / / .|/  /    ヽ     ヽ     最後にアップロードした patchForAA.js を読み込むようにします。
      ム./  /  /   i ヽ  i iヽ     FC2ブログでは HTML テンプレートに以下のタグを追加します
.        / /lムl   |⌒i八 \jヽ  i i      __________
      ノ川|l .|   /7:::::T \}r:::‐rV| |     /〉------------------ヘ
     ノ リノ川   | .、::::ノ   、::ノ リi |.    //  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄/
.        } 人Y|  .i         ( |   //                   /
      ノ   iト|  .|、         ノ |.  //                  /
           八  V> ,__.. イ .jノ  //                  /
          /\乙 ニE7::\厶イ  //                   /
            /:::::::`⌒>‐く::::::::j>r- 、//                   /
        ../:::: ̄`7‐ヘ._)))>ヘ人ノ/〈_________________ノ
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄


<script type="text/javascript" src="メモしたURL/patchForAA.js" charset="UTF-8"></script>


(FC2ブログの場合)



※ここではbodyタグの最後に入れてますが、headタグの中に入れても大丈夫です



          ,_   _
        、-ー'`Y <,___
     __≦ー`___ _二z<_
     > 7  ̄、-‐ ´ ̄`'┴<
    <之′Y´/        \
      >{  ,'  |、 , ,. ,.l   ,   ゙i
     | !、{  |リル\ レハ /} ィ, l 
   これで完了です。ページを更新して表示を確認してみて下さい。
     ′J゙i, ゙i ゙i (●) (●)| ハ|
        ゙i|゙i'(1  、_,、_,  |
        ゙iTィ.,_   '、_ノ _ノ
        /「ィ::ニE7 l
        └ l´::: /ヽト|
          |::::|´  ̄|::|


12◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo
┏────┓
注意点 │
┗────┛


       ,_   _
     、-ー'`Y <,___
  __≦ー`___ _二z<_
  > .,,_  ̄、-‐ ´ ̄`'┴<
 <之′Y´/        \
   >{  ,'  |、 , ,.  ,.l  ,   ゙i
  | ヽ,{  // /{   ハ   ハ |      patchForAA は font-size: 16px; font-weight:normal; の時にしか
   ヽレⅣ ハ|寸寸T ハT7} ィ,l      綺麗に表示されません。
     V ト'(1 (●) (●)}"         他のサイズや太さにすると文字がにじんでしまいます。
       Vィ丶,  _'  ,.ノ
      │「ィ::ニE7l´
      └l´::::/ヽ.ト,
        |::::|´  ̄`il

(例示画像)



13◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo

       ,_   _
     、-ー'`Y <,___
  __≦ー`___ _二z<_
  > 7  ̄、-‐ ´ ̄`'┴<
 <之′Y´/        \
   >{  ,'  |、 , ,.  ,.l  ,   ゙i
  | !、{  | 寸寸T ハT7} ィ, l      そのため、上の patchForAA を指定する font-family の適用範囲を
  ′J゙i, ゙i ゙i (●) (●)| ハ|       なるべく AA 表示箇所だけに絞るようにすると見栄えが良くなります
     ゙i|゙i'(1    ,    |
     ゙iTィ.,_   ―   _ノ    _______
      │「ィ::ニE7 l     // ̄ ̄ ̄ ̄ ̄ ̄/
      └l´::::/ヽト     //         /
        |::::|´  ̄`i __//         /
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ `―-((皿ニニニニニニ) ̄

ダメな例
/* 適用範囲がページ全体 */
body {
font-family: patchForAA, 'MS Pゴシック', 'MS PGothic', ... , sans-serif;
}


もっとダメな例
/* 適用範囲が全ての要素 */
* {
font-family: patchForAA, 'MS Pゴシック', 'MS PGothic', ... , sans-serif;
}


良い例
/* 適用範囲が AA の部分のみ */
.AA {
font-family: patchForAA, 'MS Pゴシック', 'MS PGothic', ... , sans-serif;
}


14◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo

  |
  |
  ト. .イ
  | ∨ }__ノ
  |__-イ{¨¨之____
  |   `ヾ{   イ
  |     \  乂
  |        .   \_
  | ! |  |  !  |⌒      DirectWrite 下でズレる文字は約1200文字あります。そのうちの
  |  | 广ヽ |  !  |        AAで使用頻度の高い約430文字(+α)を patchForAA.js は修正します。
  |ノ (●)レ}  |  (        そのためズレが修正されない箇所があるかもしれませんが、
  | ,  ,,  ムノ  |`\_     それもごくわずかだと思います。
  |_    /   ノ
  |_`. イ   | (_
  |:::ス }イハノ ノ{
  |¨ヽ乂 {_
  |::::::::\
  |:::::::::::::}
  |:::::::::::/

15◆theateryaruo1999/99/99(無) 99:99:99 ID:gekizyoufoo

                                         _
                     ヽ.、  i',  ノi___ _           /.)/ )
                   __ゝ\!.iノ´ ‐- .. ノ      .r-、 / // //)
                 >. , ´           `ヽ      ヽ ゝ   ' /
                , ´:  ,′              ',        ゝ   ニニ⊃
                ,′: : ,′  ,          : : :',      _ /` /´
                  / _: : : i: :i: : /i: : : : : : :ム∧_: : : :i    />.Y_
               '´ ノi: : |: :|: / !ノ!i: :/i/  !ノi : : |   .///////
                   |: :|: :| >ァ=ミ .ノ ′彳尓x.| : 人  ///////      以上です それでは また会いましょう
                 |/i: : l.i ヒcノ  ,  ゞcノ .ノ'Yヽ_`///////
                /`Y   ¨ __ _    ,' .! ///////
                ', ,∧    l    .l   y-'´ ///////
                    ̄i,\  ゝ   ノ  ,.イ   ///////
                     |: : >,.. _..<: :i  ///////
                     |:,r-'~`'~`'~`ー┴'~//////
                    /´///////.////////,'////
                    ,i´ ̄`.、///////ヽ//////,'////
                〈    i//////~~~>.._///ノ
               ヽ   ノ ///ノ!>・<i;;;;;;;;;i〉//
               , 斗</i/i´;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;|!´                        _n_,、   r !    _n__   __
                 i//////|/|;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;|                     └i rヘ〉   ||     ⊇ ⊆   l |  n
                 |//////|/|;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;|                         (才P_)   ヽニフ  (⊆广   L.ユ U

関連記事

コメント

    • 575
    • :yaruok:
    • 2016/04/07(木) 23:07:16
    • ID:-
    • [ 編集 ]
    • 早速導入させていただきました。ありがとうございます。
    • 576
    • :himanyaruo:
    • 2016/04/09(土) 00:22:52
    • ID:BpAghoiw
    • [ 編集 ]
    • 導入させていただきました!
      YEditorといい、いつもお世話になっております。

コメント投稿

※最近キツめのコメントが散見されます。投稿する前には一呼吸置くようお願い致します。

最新記事

カテゴリ

ボタン群

Twitter: 
Facebook: 
ブログランキング: 

トラックバック

トラックバック URL
http://theateryaruo.blog71.fc2.com/tb.php/302-5b3ec4b6

この記事にトラックバックする(FC2ブログユーザー)


プロフィール

Author:theateryaruo
個人的におもしろい!と感じたやる夫系の話をまとめるブログです。

JavaScript をON にするとビューアで観ることができます。

ビューアの使い方については、ビューアの使い方 をご覧下さい。

まだまだ拙いですが、のんびりじっくりやっていこうと思います。よろしくお願いします。

こっそりと作ったツール

カスタム検索でAA検索を作ってみました。AAを探している人は使ってみてください。(未熟な出来)

月別アーカイブ

カテゴリ別リンク

RSSリンクの表示

カテゴリ

最新記事