ツイートに分離可能な小説

sounisi5011 commented 5 years ago

段落毎にURLフラグメントを割り当て、対応するTwitter Cardを割り当て、段落の文字数を制限すれば、Twitterでツイートしつつ作品を宣伝する事が可能になる。ページを移動すること無く作品の内容全てを読める大きな利点。

ツイートの文字数計測：twitter-text
Twitter CardでURLフラグメント：フラグメント付きURLにリダイレクトする専用ページの自動生成

sounisi5011 commented 5 years ago

URLフラグメントは正しく機能するだろうか？このサイトでは、ヘッダーを固定表示している。このズレが、URLフラグメントを正しくない位置に移動させてしまう要因になるのではないだろうか？

sounisi5011 commented 5 years ago

URLフラグメントは正しく機能するだろうか？このサイトでは、ヘッダーを固定表示している。このズレが、URLフラグメントを正しくない位置に移動させてしまう要因になるのではないだろうか？

QRコードの画像サイズはデカい。だから、このサイズを利用して、ヘッダの開始位置をずらすスタイルを自動生成するのはどうだろう？折り返したURLの高さがQRコードを超えるような場合は、短いJSのコードで対処すればいい。

sounisi5011 commented 5 years ago

URLフラグメントは正しく機能するだろうか？このサイトでは、ヘッダーを固定表示している。このズレが、URLフラグメントを正しくない位置に移動させてしまう要因になるのではないだろうか？

QRコードの画像サイズはデカい。だから、このサイズを利用して、ヘッダの開始位置をずらすスタイルを自動生成するのはどうだろう？折り返したURLの高さがQRコードを超えるような場合は、短いJSのコードで対処すればいい。

URLが折り返す位置は確定している。ここから、URLが全て折り返した場合の最大幅を判定できるように思う。

sounisi5011 commented 5 years ago

URLフラグメントは正しく機能するだろうか？このサイトでは、ヘッダーを固定表示している。このズレが、URLフラグメントを正しくない位置に移動させてしまう要因になるのではないだろうか？

scroll-marginプロパティを使用して、id属性付きp要素をズレるように指定するのが良いかもしれない。参考：https://stackoverflow.com/a/55683966/4907315

sounisi5011 commented 5 years ago

URLフラグメントは正しく機能するだろうか？このサイトでは、ヘッダーを固定表示している。このズレが、URLフラグメントを正しくない位置に移動させてしまう要因になるのではないだろうか？

scroll-marginプロパティを使用して、id属性付きp要素をズレるように指定するのが良いかもしれない。

軽く検証してみたところ、body要素にscroll-padding-topプロパティを指定すると、スクロールが上手く調節されるようだ。一方、scroll-margin-topプロパティは、URLフラグメントでスクロールを試みるid属性を持った各要素に指定しなくてはならないらしい。

sounisi5011 commented 5 years ago

URLフラグメントは正しく機能するだろうか？このサイトでは、ヘッダーを固定表示している。このズレが、URLフラグメントを正しくない位置に移動させてしまう要因になるのではないだろうか？

scroll-marginプロパティを使用して、id属性付きp要素をズレるように指定するのが良いかもしれない。

軽く検証してみたところ、body要素にscroll-padding-topプロパティを指定すると、スクロールが上手く調節されるようだ。一方、scroll-margin-topプロパティは、URLフラグメントでスクロールを試みるid属性を持った各要素に指定しなくてはならないらしい。

scroll-*-topプロパティは使用しないほうが良いかもしれない。以下の記事によると、このようなLonghands構文をChromeがサポートしていない時期があったようだ。

参考：https://css-tricks.com/almanac/properties/s/scroll-margin/#syntax

よって、このような記述が有効だと思われる。

scroll-padding: <header-height> 0 <footer-height>;

sounisi5011 commented 5 years ago

URLフラグメントは正しく機能するだろうか？このサイトでは、ヘッダーを固定表示している。このズレが、URLフラグメントを正しくない位置に移動させてしまう要因になるのではないだろうか？

scroll-marginプロパティを使用して、id属性付きp要素をズレるように指定するのが良いかもしれない。

軽く検証してみたところ、body要素にscroll-padding-topプロパティを指定すると、スクロールが上手く調節されるようだ。一方、scroll-margin-topプロパティは、URLフラグメントでスクロールを試みるid属性を持った各要素に指定しなくてはならないらしい。

以下のページにいろいろな情報が。html要素でscroll-paddingプロパティが効かないのはChromeのバグらしい。それ以外にも、scroll-paddingプロパティに対応していないブラウザ向けの記述もある。要確認。

ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック | コリス

sounisi5011 commented 5 years ago

CSS.supports()メソッドを使用してposition: stickyまたはposition: -webkit-stickyに対応しているか判定してから、scroll-paddingプロパティまたはそのフォールバックのスタイルをJavaScriptで変更する方法が有効だろう。

CSS.supports()メソッドに対応していない環境は考慮しなくてもいい。なぜなら、Safari 6-8（と、"experimental Web Platform features"フラグを有効にしたChrome 23-27）を除いて、position: stickyプロパティに対応しているブラウザはCSS.supports()メソッドにも対応しているから。例外のSafari（とChrome）も、@supportsルールに対応しているブラウザからは除外される。よって、position: stickyプロパティを@supportsルールで判定している限り、CSS.supports()メソッドに対応していない環境＝position: stickyプロパティに確実に対応していない環境、とみなして良いだろう。同じ理由から、Presto時代のOperaが使える関数supportsCSS()も判定から除外していい。

※逆はあり得る。すなわち、CSS.supports()メソッドに対応していて、position: stickyプロパティに対応していない環境は、ほとんどのブラウザが該当する。position: stickyプロパティの対応状況は判定する必要がある。

sounisi5011 commented 5 years ago

CSS.supports()メソッドを使用してposition: stickyまたはposition: -webkit-stickyに対応しているか判定してから、scroll-paddingプロパティまたはそのフォールバックのスタイルをJavaScriptで変更する方法が有効だろう。

CSS.supports()メソッドに対応していない環境は考慮しなくてもいい。なぜなら、Safari 6-8（と、"experimental Web Platform features"フラグを有効にしたChrome 23-27）を除いて、position: stickyプロパティに対応しているブラウザはCSS.supports()メソッドにも対応しているから。例外のSafari（とChrome）も、@supportsルールに対応しているブラウザからは除外される。よって、position: stickyプロパティを@supportsルールで判定している限り、CSS.supports()メソッドに対応していない環境＝position: stickyプロパティに確実に対応していない環境、とみなして良いだろう。同じ理由から、Presto時代のOperaが使える関数supportsCSS()も判定から除外していい。

※逆はあり得る。すなわち、CSS.supports()メソッドに対応していて、position: stickyプロパティに対応していない環境は、ほとんどのブラウザが該当する。position: stickyプロパティの対応状況は判定する必要がある。

つまり、静的に生成するべきstyle要素（あとからJavaScriptで上書きするもの）はこれになるわけだ？

<style id=scroll-padding-style>
@supports ((position: -webkit-sticky) or (position:sticky)) {
  @supports (scroll-margin-top: 42px) {
    /*
     * Chrome v73+ only works with <body>.
     * ULTIMATELY this needs to go on <html>, not <body>.
     * see https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
     */
    html, body {
      scroll-margin-top: 42px;
    }
  }

  @supports not (scroll-margin-top: 42px) {
    /* see https://css-tricks.com/hash-tag-links-padding/#article-header-id-1 */
    /* see http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-B */
    p[id]:before {
      display: block;
      content: " ";
      margin-top: -42px;
      height: 42px;
      visibility: hidden;
      pointer-events: none;
    }
  }
}
</style>

sounisi5011 commented 5 years ago

つまり、静的に生成するべきstyle要素（あとからJavaScriptで上書きするもの）はこれになるわけだ？

<style id=scroll-padding-style>
@supports ((position: -webkit-sticky) or (position:sticky)) {
  @supports (scroll-margin-top: 42px) {
    /*
     * Chrome v73+ only works with <body>.
     * ULTIMATELY this needs to go on <html>, not <body>.
     * see https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
     */
    html, body {
      scroll-margin-top: 42px;
    }
  }

  @supports not (scroll-margin-top: 42px) {
    /* see https://css-tricks.com/hash-tag-links-padding/#article-header-id-1 */
    /* see http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-B */
    p[id]:before {
      display: block;
      content: " ";
      margin-top: -42px;
      height: 42px;
      visibility: hidden;
      pointer-events: none;
    }
  }
}
</style>

CSSのカスタムプロパティを使用して単純化できない？

@supports ((position: -webkit-sticky) or (position:sticky)) {
  @supports (scroll-margin-top: var(--header-height)) {
    /*
     * Chrome v73+ only works with <body>.
     * ULTIMATELY this needs to go on <html>, not <body>.
     * see https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
     */
    html, body {
      scroll-margin-top: var(--header-height);
    }
  }

  @supports not (scroll-margin-top: var(--header-height)) {
    /* see https://css-tricks.com/hash-tag-links-padding/#article-header-id-1 */
    /* see http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-B */
    p[id]:before {
      display: block;
      content: " ";
      margin-top: calc(var(--header-height) * -1);
      height: var(--header-height);
      visibility: hidden;
      pointer-events: none;
    }
  }
}

<html style="--header-height: 42px">
...
</html>

sounisi5011 commented 5 years ago

CSSのカスタムプロパティを使用して単純化できない？

残念！Safari 6.1-9.2はposition: sticky対応かつカスタムプロパティ非対応だ！

おとなしくstyle要素を書き換える方式にしようね…

sounisi5011 commented 5 years ago

CSSのカスタムプロパティを使用して単純化できない？

残念！Safari 6.1-9.2はposition: sticky対応かつカスタムプロパティ非対応だ！

Can I use... Support tables for HTML5, CSS3, etc # CSS position:sticky

Can I use... Support tables for HTML5, CSS3, etc # CSS Variables (Custom Properties)

おとなしくstyle要素を書き換える方式にしようね…

Safari 9.1 / iOS Safari 9.3っていつのバージョンよ？ OS X El CapitanのSafariも11.1.2だぞ？

sounisi5011 commented 5 years ago

CSSのカスタムプロパティを使用して単純化できない？

残念！Safari 6.1-9.2はposition: sticky対応かつカスタムプロパティ非対応だ！

Can I use... Support tables for HTML5, CSS3, etc # CSS position:sticky

Can I use... Support tables for HTML5, CSS3, etc # CSS Variables (Custom Properties)

おとなしくstyle要素を書き換える方式にしようね…

Safari 9.1 / iOS Safari 9.3っていつのバージョンよ？ OS X El CapitanのSafariも11.1.2だぞ？

OS X Mountain Lion、および、iOS 8が非対応… iOS 8は利用率0.123%だし、サポート終了のOS X Mountain Lionもどれだけ利用していることやら…

考慮する必要は無いのでは？

sounisi5011 / sounisi5011.jp

ツイートに分離可能な小説 #52