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

Question

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

Closed this issue 5 years ago · 13 comments

sounisi5011 commented 5 years ago

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

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

Answer 1 · 2019-08-16T16:06:50.000Z

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

Answer 2 · 2019-08-17T20:50:00.000Z

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

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

Answer 3 · 2019-08-17T20:50:59.000Z

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

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

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

Answer 4 · 2019-08-18T01:08:58.000Z

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

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

Answer 5 · 2019-08-18T01:27:16.000Z

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

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

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

Answer 6 · 2019-08-18T01:42:24.000Z

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>;

Answer 7 · 2019-08-18T02:06:54.000Z

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

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

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

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

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

Answer 8 · 2019-08-18T02:32:16.000Z

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プロパティの対応状況は判定する必要がある。

Answer 9 · 2019-08-18T02:56:44.000Z

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>

Answer 10 · 2019-08-18T03:00:42.000Z

つまり、静的に生成するべき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>

Answer 11 · 2019-08-18T03:05:28.000Z

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

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

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

Answer 12 · 2019-08-18T03:09:01.000Z

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だぞ？

Answer 13 · 2019-08-18T03:16:07.000Z

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もどれだけ利用していることやら…

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