Bugfix 05b6175

pb-100 · May 9, 2024 · 70721eb · 70721eb
1 parent d411733
commit 70721eb
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 70 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -44,10 +44,20 @@ <h3>ムシハカセ <a href="//pbrocky.blogspot.com/2020/01/Insect-chaser.html"
 <span class="pbRow"><span class="pbLine">2&nbsp;</span><span class="pbCmd">Q=B+6:H=INT P*5:$=KEY:$=&quot;0&quot;+$:A=VAL($):IF U=4;PRINT &quot; Get&hearts;&quot;:END</span></span>
 <span class="pbRow"><span class="pbLine">3&nbsp;</span><span class="pbCmd">D(P)=Q*4:$=&quot;_&yen;A,aJ '&quot;:PRINT :PRINT MID(P-U,1);D;G;:IF P-U&lt;5 THEN 1</span></span>
 <span class="pbRow"><span class="pbLine">4&nbsp;</span><span class="pbCmd">PRINT H;:IF H&lt;1;PRINT &quot;Win&quot;:B=B+.5:M(P)=4:I(SQR D)=8:GOTO (P+U)/4</span></span>
+</code></pre>
+
+<h4>pbskip="prettify"</h4>
+<pre class="pbList" pbskip="prettify"><code lang="en">
 <span class="pbRow"><span class="pbLine">5&nbsp;</span><span class="pbCmd">C=RAN#↑RAN#↑RAN#+π:IF KEY=&quot;5&quot;;IF C≧4;PRINT &quot;Ec&quot;:GOTO 1</span></span>
+</code></pre>
+
+<h4>pbskip="fallback:img"</h4>
+<pre class="pbList" pbskip="fallback:img"><code lang="en">
 <span class="pbRow"><span class="pbLine">6&nbsp;</span><span class="pbCmd">IF G&gt;0;D(C)=D(C)-INT (RAN#*M(C):GOTO 3</span></span>
 </code></pre>
-<pre class="pbList" pbskip="prettify fallback:img"><code lang="en"><span class="pbRow">P1</span>
+
+<h4>pbskip="prettify fallback:img"</h4>
+<pre class="pbList" pbskip="prettify"><code lang="en"><span class="pbRow">P1</span>
 <span class="pbRow"><span class="pbLine">1&nbsp;</span><span class="pbCmd">VAC :GOTO #0</span></span>
 </code></pre>
 

diff --git a/docs/nowebfont-fallback-test.html b/docs/nowebfont-fallback-test.html
@@ -51,10 +51,20 @@ <h3>ムシハカセ <a href="//pbrocky.blogspot.com/2020/01/Insect-chaser.html"
 <span class="pbRow"><span class="pbLine">2&nbsp;</span><span class="pbCmd">Q=B+6:H=INT P*5:$=KEY:$=&quot;0&quot;+$:A=VAL($):IF U=4;PRINT &quot; Get&hearts;&quot;:END</span></span>
 <span class="pbRow"><span class="pbLine">3&nbsp;</span><span class="pbCmd">D(P)=Q*4:$=&quot;_&yen;A,aJ '&quot;:PRINT :PRINT MID(P-U,1);D;G;:IF P-U&lt;5 THEN 1</span></span>
 <span class="pbRow"><span class="pbLine">4&nbsp;</span><span class="pbCmd">PRINT H;:IF H&lt;1;PRINT &quot;Win&quot;:B=B+.5:M(P)=4:I(SQR D)=8:GOTO (P+U)/4</span></span>
+</code></pre>
+
+<h4>pbskip="prettify"</h4>
+<pre class="pbList" pbskip="prettify"><code lang="en">
 <span class="pbRow"><span class="pbLine">5&nbsp;</span><span class="pbCmd">C=RAN#↑RAN#↑RAN#+π:IF KEY=&quot;5&quot;;IF C≧4;PRINT &quot;Ec&quot;:GOTO 1</span></span>
+</code></pre>
+
+<h4>pbskip="fallback:img"</h4>
+<pre class="pbList" pbskip="fallback:img"><code lang="en">
 <span class="pbRow"><span class="pbLine">6&nbsp;</span><span class="pbCmd">IF G&gt;0;D(C)=D(C)-INT (RAN#*M(C):GOTO 3</span></span>
 </code></pre>
-<pre class="pbList" pbskip="prettify fallback:img"><code lang="en"><span class="pbRow">P1</span>
+
+<h4>pbskip="prettify fallback:img"</h4>
+<pre class="pbList" pbskip="prettify"><code lang="en"><span class="pbRow">P1</span>
 <span class="pbRow"><span class="pbLine">1&nbsp;</span><span class="pbCmd">VAC :GOTO #0</span></span>
 </code></pre>
 

diff --git a/docs/webfont-blocked-test.html b/docs/webfont-blocked-test.html
@@ -54,9 +54,19 @@ <h3>ムシハカセ <a href="//pbrocky.blogspot.com/2020/01/Insect-chaser.html"
 <span class="pbRow"><span class="pbLine">2&nbsp;</span><span class="pbCmd">Q=B+6:H=INT P*5:$=KEY:$=&quot;0&quot;+$:A=VAL($):IF U=4;PRINT &quot; Get&hearts;&quot;:END</span></span>
 <span class="pbRow"><span class="pbLine">3&nbsp;</span><span class="pbCmd">D(P)=Q*4:$=&quot;_&yen;A,aJ '&quot;:PRINT :PRINT MID(P-U,1);D;G;:IF P-U&lt;5 THEN 1</span></span>
 <span class="pbRow"><span class="pbLine">4&nbsp;</span><span class="pbCmd">PRINT H;:IF H&lt;1;PRINT &quot;Win&quot;:B=B+.5:M(P)=4:I(SQR D)=8:GOTO (P+U)/4</span></span>
+</code></pre>
+
+<h4>pbskip="prettify"</h4>
+<pre class="pbList" pbskip="prettify"><code lang="en">
 <span class="pbRow"><span class="pbLine">5&nbsp;</span><span class="pbCmd">C=RAN#↑RAN#↑RAN#+π:IF KEY=&quot;5&quot;;IF C≧4;PRINT &quot;Ec&quot;:GOTO 1</span></span>
+</code></pre>
+
+<h4>pbskip="fallback:img"</h4>
+<pre class="pbList" pbskip="fallback:img"><code lang="en">
 <span class="pbRow"><span class="pbLine">6&nbsp;</span><span class="pbCmd">IF G&gt;0;D(C)=D(C)-INT (RAN#*M(C):GOTO 3</span></span>
 </code></pre>
+
+<h4>pbskip="prettify fallback:img"</h4>
 <pre class="pbList" pbskip="prettify"><code lang="en"><span class="pbRow">P1</span>
 <span class="pbRow"><span class="pbLine">1&nbsp;</span><span class="pbCmd">VAC :GOTO #0</span></span>
 </code></pre>

diff --git a/docs/webfont-test.html b/docs/webfont-test.html
@@ -48,10 +48,20 @@ <h3>ムシハカセ <a href="//pbrocky.blogspot.com/2020/01/Insect-chaser.html"
 <span class="pbRow"><span class="pbLine">2&nbsp;</span><span class="pbCmd">Q=B+6:H=INT P*5:$=KEY:$=&quot;0&quot;+$:A=VAL($):IF U=4;PRINT &quot; Get&hearts;&quot;:END</span></span>
 <span class="pbRow"><span class="pbLine">3&nbsp;</span><span class="pbCmd">D(P)=Q*4:$=&quot;_&yen;A,aJ '&quot;:PRINT :PRINT MID(P-U,1);D;G;:IF P-U&lt;5 THEN 1</span></span>
 <span class="pbRow"><span class="pbLine">4&nbsp;</span><span class="pbCmd">PRINT H;:IF H&lt;1;PRINT &quot;Win&quot;:B=B+.5:M(P)=4:I(SQR D)=8:GOTO (P+U)/4</span></span>
+</code></pre>
+
+<h4>pbskip="prettify"</h4>
+<pre class="pbList" pbskip="prettify"><code lang="en">
 <span class="pbRow"><span class="pbLine">5&nbsp;</span><span class="pbCmd">C=RAN#↑RAN#↑RAN#+π:IF KEY=&quot;5&quot;;IF C≧4;PRINT &quot;Ec&quot;:GOTO 1</span></span>
+</code></pre>
+
+<h4>pbskip="fallback:img"</h4>
+<pre class="pbList" pbskip="fallback:img"><code lang="en">
 <span class="pbRow"><span class="pbLine">6&nbsp;</span><span class="pbCmd">IF G&gt;0;D(C)=D(C)-INT (RAN#*M(C):GOTO 3</span></span>
 </code></pre>
-<pre class="pbList" pbskip="prettify fallback:img"><code lang="en"><span class="pbRow">P1</span>
+
+<h4>pbskip="prettify fallback:img"</h4>
+<pre class="pbList" pbskip="prettify"><code lang="en"><span class="pbRow">P1</span>
 <span class="pbRow"><span class="pbLine">1&nbsp;</span><span class="pbCmd">VAC :GOTO #0</span></span>
 </code></pre>
 

diff --git a/src/js/pbList.js b/src/js/pbList.js
@@ -143,6 +143,12 @@ function pbList_updateElement( node, skipPrettify, skipImageFallback, opt_onComp
         i = pbList_TARGET_LIST.indexOf( node );
         0 <= i && pbList_TARGET_LIST.splice( i, 5 );
 
+        if( !pbList_webFontTestResult && ( p_imageEnabled && !skipImageFallback ) ){
+            if( p_DOM_hasClassName( node, 'pbList' ) ){
+                p_DOM_addClassName( node.firstChild, 'pbList-fallback-img' )
+            };
+        };
+
         p_Trident < 5 ? collectElementsHasOnlyString( node, textNodes ) : collectTextNodes( node, textNodes );
 
         while( textNode = textNodes.shift() ){
@@ -386,7 +392,7 @@ function pbList_prettify( originalCode, elmTarget, skipPrettify, skipImageFallba
                             ? ( chrCode ? chrCode + ' ' : '' ) + 'pbList-' + color
                             : chrCode;
                 } else {
-                    className = chrCode || '';
+                    className = isNBSP || isSP ? '' : chrCode || '';
                 };
             };
             style = undefined;

diff --git a/src/scss/pbList/02_main.scss b/src/scss/pbList/02_main.scss
@@ -82,10 +82,10 @@
                     zoom         : 1; /* space が部分的に欠落するのを回避。IE11 IE5 mode では確認できず。*/
                     width        : .4em;
                     padding-left : 3px; /* text-indent : -3px; のズレを戻す */
-                    .pbList-noWebFont & {
-                        @if( $UA_IE6 ){
-                            padding : 0;
-                        }
+                }
+                .pbList-fallback-img font {
+                    @if( $UA_IE6 ){
+                        padding : 0;
                     }
                 }
             }

diff --git a/src/scss/pbList/03_fallback.scss b/src/scss/pbList/03_fallback.scss
@@ -3,63 +3,61 @@
 $FLOAT_FONT_ELEMENT : $UA_Opera70 or $IS_LTE_GECKO09 or $UA_Gecko12 or $UA_Gecko13 or $UA_Gecko19; /* Gecko 1.2~1.3, ゴミが消える */
 
 @if( $OPTION_USE_WEBFONT_FALLBACK ){
-    .pbList-noWebFont {
-        .pbList {
-            @if( $CANUSE_DISPLAY_INLINE_BLOCK ){
-                white-space : normal;
-                @if( $IS_IE8_OR_9 ){
-                    line-height : 0; // 行間の解消 https://twitter.com/pbrocky/status/1445069954974248960
-                }
+    .pbList-fallback-img {
+        @if( $CANUSE_DISPLAY_INLINE_BLOCK ){
+            white-space : normal;
+            @if( $IS_IE8_OR_9 ){
+                line-height : 0; // 行間の解消 https://twitter.com/pbrocky/status/1445069954974248960
             }
-            font {
-                @if( $OPTION_USE_PBCHR ){
-                    border-width : 0;
-                } @else {
-                    @extend %PBChrBase;
+        }
+        font {
+            @if( $OPTION_USE_PBCHR ){
+                border-width : 0;
+            } @else {
+                @extend %PBChrBase;
+            }
+            @if( $CANUSE_GOOD_CSS_GENERATED_BLOCK ){
+                &:after {
+                    content : url($ASSET_PATH_PBFONT + 'x3mask.png');
                 }
-                @if( $CANUSE_GOOD_CSS_GENERATED_BLOCK ){
-                    &:after {
-                        content : url($ASSET_PATH_PBFONT + 'x3mask.png');
-                    }
-                } @else {
-                    background-image : url($ASSET_PATH_PBFONT + 'x3mask.png'); // 735 bytes
-                    @if( $UA_Gecko09 ){
-                        .pbLCD-gecko09To091 & {
-                            background-image : url($ASSET_PATH_PBFONT + 'x3mask.gecko0.9.1.gif'); // 2895 bytes.
-                        }
+            } @else {
+                background-image : url($ASSET_PATH_PBFONT + 'x3mask.png'); // 735 bytes
+                @if( $UA_Gecko09 ){
+                    .pbLCD-gecko09To091 & {
+                        background-image : url($ASSET_PATH_PBFONT + 'x3mask.gecko0.9.1.gif'); // 2895 bytes.
                     }
                 }
-                width       : 10px;
-                height      : 21px;
-                font-size   : 21px;
-                line-height : 1;
-                overflow    : hidden;
+            }
+            width       : 10px;
+            height      : 21px;
+            font-size   : 21px;
+            line-height : 1;
+            overflow    : hidden;
 
-                @if( $PATCH_FOR_PBCHR_SPACE ){
-                    visibility  : hidden; /* `hidden` only appling space */
-                }
+            @if( $PATCH_FOR_PBCHR_SPACE ){
+                visibility  : hidden; /* `hidden` only appling space */
+            }
 
-                @if( $UA_Modern or $IS_IE8_OR_9 or $IS_LTE_GECKO09 ){
-                    margin : 5px 1px;
-                } @else {
-                    /* 行間の補正は Gecko 0.9.6 にも有効, mac ie5 は不明 */
-                    margin : 10px 1px 0; /* 行間の補正 https://twitter.com/pbrocky/status/1445079494746796041 */
-                }
-
-                @if( $USE_FLOAT_FOR_LAYOUT or $IS_IE10_TO_11 ){
-                    @include inline-block;
-                }
-                @if( $UA_Modern ){
-                    vertical-align : top; /* 3DS 行がズレる https://x.com/pbrocky/status/1042771141591330817 */
-                }
-                @if( $FLOAT_FONT_ELEMENT ){
-                    /* https://twitter.com/pbrocky/status/1450728844021796864 Gecko 0.9.4 float が無いとプログラムエリアの下に隙間が空く */
-                    float : left;
-                }
-                @if( $IS_LTE_WIN_IE7 ){
-                    text-align     : left; /* 親の text-align:right で text-indent:-21px 出来ないテキストを消す */
-                    vertical-align : top;  /* この指定が無いと下にズレる */
-                }
+            @if( $UA_Modern or $IS_IE8_OR_9 or $IS_LTE_GECKO09 ){
+                margin : 5px 1px;
+            } @else {
+                /* 行間の補正は Gecko 0.9.6 にも有効, mac ie5 は不明 */
+                margin : 10px 1px 0; /* 行間の補正 https://twitter.com/pbrocky/status/1445079494746796041 */
+            }
+
+            @if( $USE_FLOAT_FOR_LAYOUT or $IS_IE10_TO_11 ){
+                @include inline-block;
+            }
+            @if( $UA_Modern ){
+                vertical-align : top; /* 3DS 行がズレる https://x.com/pbrocky/status/1042771141591330817 */
+            }
+            @if( $FLOAT_FONT_ELEMENT ){
+                /* https://twitter.com/pbrocky/status/1450728844021796864 Gecko 0.9.4 float が無いとプログラムエリアの下に隙間が空く */
+                float : left;
+            }
+            @if( $IS_LTE_WIN_IE7 ){
+                text-align     : left; /* 親の text-align:right で text-indent:-21px 出来ないテキストを消す */
+                vertical-align : top;  /* この指定が無いと下にズレる */
             }
         }
 

diff --git a/src/scss/pbList/04_prettify.scss b/src/scss/pbList/04_prettify.scss
@@ -31,7 +31,7 @@
 }
 
 @if( $OPTION_USE_WEBFONT_FALLBACK ){
-    .pbList-noWebFont .pbList {
+    .pbList-fallback-img {
         background-color : #fff;
 
         font {
@@ -84,7 +84,7 @@
     }
 
     @if( $OPTION_USE_WEBFONT_FALLBACK ){
-        .pbList-noWebFont .pbList {
+        .pbList-fallback-img {
             background-color : #000;
             font {
                 background-color : white;
@@ -115,12 +115,12 @@
 }
 @if( $UA_Modern ){
     @include forced-colors(native){
-        .pbList-noWebFont .pbList font:after {
+        .pbList-fallback-img font:after {
             filter : invert(0); // Overide A
         }
     }
     @include forced-colors(fallback){
-        .pbList-noWebFont .pbList font:after {
+        .pbList-fallback-img font:after {
             filter : invert(0); // Overide A
         }
     }

diff --git a/src/scss/pbList/05_forcedColorsMediaFeature.scss b/src/scss/pbList/05_forcedColorsMediaFeature.scss
@@ -1,14 +1,14 @@
 @if( $OPTION_USE_WEBFONT_FALLBACK ){
     @include forced-colors(native_or_ms) {
-        .pbList-noWebFont .pbLine font {
+        .pbList-fallback-img .pbLine font {
             text-indent : 21px;
         }
     }
 
 /*  IE10~11, EdgeHTML
 --------------------------------------------------------------------------------------*/
     @include forced-colors(ms) {
-        .pbList-noWebFont .pbList font:after {
+        .pbList-fallback-img font:after {
             content : url(#{ $ASSET_PATH_PBLCD + 'x3.anime.svg' });
         }
     }
@@ -19,7 +19,7 @@
  *   https://twitter.com/pbrocky/status/1299745911170449411
  */
         @include forced-colors(native) {
-            .pbList-noWebFont .pbList font:after {
+            .pbList-fallback-img font:after {
                 content : ""; // mask で描画
             }
         }
@@ -28,10 +28,10 @@
 --------------------------------------------------------------------------------------*/
     @if( $UA_Modern or $UA_IE9 ){
         @include forced-colors(fallback) {
-            .pbList-noWebFont .pbLine font {
+            .pbList-fallback-img .pbLine font {
                 text-indent : 21px;
             }
-            .pbList-noWebFont .pbList font:after {
+            .pbList-fallback-img font:after {
                 content : url(#{ $ASSET_PATH_PBLCD + 'x3.svg' });
             }
         }
@@ -41,12 +41,12 @@
 --------------------------------------------------------------------------------------*/
     @if( $UA_IE8 ){
         @include forced-colors(fallback) {
-            .pbList-noWebFont .pbList font:after {
+            .pbList-fallback-img font:after {
                 content : url(#{ $ASSET_PATH_PBLCD + 'x3_x10.png' });
             }
         }
         @include forced-colors(fallback, lod) {
-            .pbList-noWebFont .pbList font:before {
+            .pbList-fallback-img font:before {
                 border-width : 25px;
             }
         }