キーワード自動リンク (GLOBAL_DEFINED_WORDS.json)#977
Conversation
|
ありがとうございます！ひとまず進め方としてはこれでいいと思います！ |
|
ありがとうございます! 引き続き細かい調整(試験的なものも含めて)は入れています。以下、機能的な変更
他にもここの実装は変だぞという御指摘や細かい振る舞いの提案・調整などに関して、忌憚なくご意見を下されば幸いです。 |
|
動くものがないとレビューしにくいかもしれないので、デモとして生成結果を https://akinomyoga.github.io/cpprefjp-site/ に配置してみました。(相対リンク変換 cpprefjp/site_generator#78 によってトップレベル以外でも cpprefjp を配置して kunai/crsearch も含めて正しく動作するようになったので、そのデモも兼ねています。) サンプル ("不適格" の自動リンクが埋め込まれている頁の例) |
|
個人的な話ですけど、リンクされてるキーワードの下線が点線だと違和感があります（多分ウィキペディアのせい？） 直線あるいは無しで良いのではと思いました |
ありがとうございます! これも丁度意見を伺いたかったところです。「自動リンクを通常のリンクと同じ様に表示するかあるいは少し違った表示にするかという選択肢があるなぁ」と思って、取り敢えず異なる表示にできるようにしましたがスタイルは確定ではないです。具体的なスタイルは akinomyoga/cpprefjp-kunai@852c507...defined_words で指定しているので自由に設定可能です。 何となく自動リンク = 点線みたいなイメージを持っていたので (恐らくこれははてなブログのキーワードリンクから来ている) 取り敢えず適当に点線にしていました。うーん。本当は通常のリンクよりも目立たなくしたかったのですが、現状の下線だと逆に目立ってしまっていますね。 別に自動リンクだからといって通常の明示的なリンクよりも目立たなくする必要もないのかもしれませんが、DOM インスペクタでもう少しスタイルを弄って遊んでみてもいかなと思っています。 通常リンクと同じスタイル a.cpprefjp-defined-word {}もう少し目立たなく(黒文字・点線) (以前のはてなキーワードに近い表示) a.cpprefjp-defined-word {
text-decoration: underline dotted 1px;
text-underline-offset: 1px;
color: black;
}
a.cpprefjp-defined-word:hover {
background-color: #DDD;
}下線なし (マウスホバーしない限りリンクが其処にあることを意識させない表示) a.cpprefjp-defined-word {
text-decoration: none;
color: black;
}
a.cpprefjp-defined-word:hover {
background-color: #DDD;
}直線グレー a.cpprefjp-defined-word {
text-decoration: underline;
text-underline-offset: 1px;
color: gray;
}
a.cpprefjp-defined-word:hover {
background-color: #EEE;
color: black;
}好みをお聞かせいただければ幸いです。 |
|
リンクにカーソル載せると説明がポップアップするのに気づいてませんでした・・・
ポップアップの待ち時間ですが、待ち時間ゼロくらいでもいいのかなとも思いました。それならば、ポップアップが出ることにすぐ気づけるのでスタイルの差がそこまで問題にならなくなる気がしました |
ポップアップは単に で、webpack で jquery-ui を使う方法がよく分からず見様見真似で実装してみたのですが (f51d2c0c @ kunai) [2,3,4]、
ツールチップが表示されなくなりました。。。開発者ツールで見るとマウスをホバーした時に |
jQuery UI Tooltip は諦めることにして、回答 [5] にある疑似要素を使ってツールチップを表示する方式に切り替えました (ceb9288f @ kunai)。 https://akinomyoga.github.io/cpprefjp-site/ の方も更新しましたので動作をご確認いただけます。
色を変えたら Noリンク 感は弱まるかもしれないと思って多少調整しました。 余談ですが、私の「自動リンクを下線で表示している感」はたぶん SuikaWiki [6] からだった気がします ("下線=リンク切れ" も確かにありそうな気がすると思って探していたら見つけました)。改めてWikiソースなど見たら SuikaWiki の自動リンクっぽいのは実は全部明示的に指定したリンクだったみたいですが…。 |
|
自分のはてなブログどうしてたっけと思って見てきたらこんなのでした
|
|
青点線+ポップアップ待ち時間なしいい感じです！！ |
ああ、なるほど。これは border-bottom を使っているのですね。cpprefjp は line-height を設定しているためか border-bottom だと線の位置が離れすぎ (主観) に感じたので text-decoration に切り替えてしまいました。(他にも自動リンクを貼っている辞書サイトが昔あったような気がするけれど思い出せない…)
ご確認ありがとうございます! ポップアップを今は「リンクの上」に表示していますが、「リンクの下」に表示するように変更しようかどうか考えています。ちょうどブラウザの表示範囲の一番上にリンクがあると、更にその上にポップアップを表示しても表示範囲外になって見えないという問題があるためです。例えば "不適格" のリンクをクリックして跳んだ先で "適格" の上にマウスをホバーしてもポップアップがスクロール範囲の外側になって表示されません (つまり、リンクが一番下にあるケースよりも一番上にあるケースの方が多そう)。 |
|
ツールチップをリンクの下に表示するように変更し以下に反映しました。
関連 commit を squash しました。
もしよろしければ折を見てそれぞれに PR を出そうと思います。 |
|
ルビをどれだけふるか問題に近いと思うんですが、原則全部リンクでいいと思います。 |
2つともredirectにするのが自然な気がします |
なるほど、確かにルビを振るときにも似たような問題が生じるのですね。今まで意識したことありませんでした。今まで一続きのテキスト (つまり、単一の TEXT_NODE) の中に複数回同じ用語が現れたときにだけ、2回目以降の自動リンクを抑制していたのですが、その処置を revert しました: 9312b823 @ markdown_to_html.
ご意見ありがとうございます。動作確認用に用語を追加 (fea6326) するとともにこれも実装 (7ee10927 @ markdown_to_html) しました。最新の変換結果はhttps://akinomyoga.github.io/cpprefjp-site/ にデプロイしてあります。その他に細かい調整があります:
@onihusube #774 で挙げられていたカスタマイゼーションポイントオブジェクト (CPO) を設計検証用の例として使わせていただいたのですが、説明が適当 (fea6326) です…より良い説明があればご教示いただければ幸いです。 現在、微妙かもしれないと思っている振る舞いに、自動リンク対象がページの右端に表示されている時に、CSS擬似要素で実現しているツールチップがブラウザの画面外にはみ出て読めないという問題があります (下の画像を参照)。どうにか CSS でこういった場合の位置を調整する方法があれば良いのですが…。良い方法がなければ、取り敢えずこの問題は無視することにします (将来的に自前で JavaScript でツールチップを実装するという可能性もあるかもですがそれは out of scope of this PR)。 |
なかなか辛そうですね・・・。 疑似要素をすっぱり投げ捨てて普通のDOM要素を予めHTML上で記述しておいて対象となるキーワードをhoverしたときのeventを拾って表示させるほうが筋が良さそうです。 |
そうですね。。それをしてくれるのが jQuery UI Tooltip のはずなのですが何故かうまく動かず (※厳密に言うと、これは "予めDOM要素を記述する" 方式ではなく動的にDOM要素を追加する方式)。なので自前で書く必要がありますね。 |
out of scope と書いていましたが結局実装しました (2bbb114a @ akinomyoga/kunai)。これで範囲外にツールチップが表示されることもありません。生成結果を akinomyoga.github.io/cpprefjp-site に反映させました。例えば 標準規格と処理系 や Hidden Friends を御覧ください。
Fade in/out (CSS Transition) はつけてみましたが、もしかしたら少し煩わしいかもしれません。 |
|
一通りマージして、ちゃんと動いてるっぽいですね！ありがとうございます！ |
|
元PRで mention すれば自動的に「～からメンションされました」というのが表示されるとは言え、確かにこの PR の cover に PR へのリンクを列挙しておくべきでしたね。 |
|
何れにしても皆様方、長らくこのPRにお付き合いいただきましてありがとうございました。お陰様で当初のPRよりも大幅に改善されたものにすることができました。またもうひとつの巨大PR cpprefjp/site_generator#81 が待ち受けていますが、もしよろしければそちらの方もよろしくお願いいたします。 |
4 participants
#510 特に #510 (comment) の部分実装です。今のところ変更は 4 リポジトリに亙るのですが、最終的に採用されるか分かりませんし、また、一箇所で議論したいので取り敢えずここに PR を開きます。
関連する変更一覧
defined_words(diff)defined_words(diff)defined_words(diff)defined_words(diff)他の関連するIssue
議論の項目
以下議論の余地あり。
markdown.treeprocessors.Treeprocessormarkdown.postprocessors.Postprocessor を実装しているが別の方針も可能かもしれない。xml.etree.ElementTree" を使っているが、xml.etree.ElementTreeの仕様がダメダメ。一応解説をつけたが…。<などの実体参照など) は検出できない。<dfn>を用いて示すようにしている。追記: これは現在正しく動作していない (htmlStash(?) により dfn が置換されているため)defined_words,GLOBAL_DEFINED_WORDSなどの名前付けセンスlang/cpp17/inline_variables.mdとimplementation-compliance.mdの変換結果しか確認していない。GLOBAL_DEFINED_WORDS.jsonに一言説明も含められるようにして<a>要素のtitle属性に指定するのもありかも (マウスホバーで簡単な説明が見られる) → be3fa110 @ markdown_to_html で対応その他 cpprefjp 全体の構造に対する理解の不足から、変な点もあると思います。