การจัดรูปแบบโพสต์ใหม่

Question

อัปเดต 3

ฉันใช้เวลานานกว่าที่ฉันต้องการ แต่ฉันมีการอัปเดตสำหรับคุณเกี่ยวกับs-proseส่วนประกอบของเรา คุณสามารถดูคำขอดึงด้วยความคิดของฉันได้ที่ repo ของระบบการออกแบบของเรา มันทำสิ่งต่อไปนี้:

1. กระจายs-proseส่วนหัวออกจากย่อหน้าเพื่อการจัดกลุ่มที่ดีขึ้น
2. s-proseย่อหน้าให้กระชับขึ้นเล็กน้อยและตรวจสอบให้แน่ใจว่าระยะห่างใต้หัวเรื่องสอดคล้องกันมากขึ้น
3. แทนที่s-proseระยะขอบทั้งหมดภายในคอมโพเนนต์ด้วยตัวแปร CSS var(--s-prose-spacing)เพื่อให้ผู้ใช้ของเราสามารถปรับแต่งได้ง่ายขึ้นในเบราว์เซอร์และสคริปต์ผู้ใช้
4. ฆ่าระยะขอบใน s-prose

คุณสามารถดูตัวอย่างเนื้อหาบางส่วนได้ที่เอกสาร Stacks ของเรา

---

อัปเดต 2

ฉันได้แยกความแตกต่างระหว่าง1.3ความสูงของเส้นเดิมและความสูงของ1.6เส้นที่เสนอ ตอนนี้เราอยู่ที่1.5การปรับแต่งเพิ่มเติมในการเว้นระยะห่างระหว่างองค์ประกอบต่างๆ ฉันยังลดความสูงของบรรทัดภายในบล็อกโค้ดกลับไปใกล้ค่าเดิม

---

อัปเดต 1

ตอนนี้ถ่ายทอดสดแล้ว

---

เรากำลังทำการปรับโครงสร้างใหม่เล็กน้อยในการจัดรูปแบบโพสต์ของเรา .post-textปัจจุบันเราใช้ชั้นเดียวกับรูปแบบทั้งในและจัดแต่งทรงผมที่เรียกว่า เป้าหมายแรกของเราคือการแยกเค้าโครงจากรูปแบบข้อความของเรา ง่ายพอ!

อย่างไรก็ตามการจัดรูปแบบโพสต์ในปัจจุบันของเรามีจุดและจุดที่ขาดหายไปเล็กน้อยสำหรับการปรับปรุง การใช้ของเราออกแบบระบบเป็น sandbox ที่เราได้ beefed up .s-proseจัดแต่งทรงผมของเราและสร้างองค์ประกอบใหม่ที่เรียกว่า ออกแบบมาเพื่อนำเสนอสไตล์สำหรับทุกสิ่งที่ข้อกำหนด CommonMarkอนุญาต สิ่งนี้จะช่วยให้เราสามารถเพิ่มสไตล์ที่ปรุงแต่ง Stack Overflow ได้ทุกที่ที่เราต้องการใช้ Markdown แน่นอนว่าจะมีคำถามและคำตอบ แต่รวมถึงโปรไฟล์ผู้ใช้ด้วย

.s-proseส่วนประกอบของเราเพิ่ม:

1. การจัดรูปแบบที่เหมาะสมสำหรับรายการคำจำกัดความ

2. การสนับสนุนส่วนหัวเพิ่มเติมและการเว้นระยะห่างที่ดีขึ้น

3. blockquoteการปรับแต่งเพิ่มเติม

4. การปรับแต่งสำหรับการเปิดเผยสปอยเลอร์ ตอนนี้เราเปิดเผยสิ่งนี้เมื่อคลิก / แตะเพื่อประสบการณ์ที่สอดคล้องกันมากขึ้นในอุปกรณ์ต่างๆโดยบังเอิญน้อยลงเช่นกันเนื่องจากไม่มีการ:hoverโต้ตอบอีกต่อไป การคลิกอีกครั้งไม่ได้ซ่อนสปอยเลอร์ ตอนนี้เรายังเพิ่มป้ายที่มุมขวาบน คุณสามารถดูวิธีการทำงานของเราเหล่านี้บนเอกสารการออกแบบระบบ มีลักษณะดังนี้:

   นี่คือสปอยเลอร์
   มันมีสองบรรทัด

5. การปรับแต่งทั่วไปในการเว้นวรรครวมถึงรายการที่ซ้อนกันรูปภาพภายในรายการ

6. การปรับขนาดรูปแบบสำหรับบริบทต่างๆ เรานำเสนอxs, smและmdรูปแบบของ s-proseส่วนประกอบ.

เช่นเดียวกับทุกสิ่งองค์ประกอบร้อยแก้วของเราคืองานที่อยู่ระหว่างดำเนินการ เราคิดว่าเรามีจุดเริ่มต้นของส่วนประกอบที่สามารถนำกลับมาใช้ใหม่ได้ เราวางแผนที่จะใช้งานกับเครือข่ายคอมโพเนนต์ใหม่ในวันพฤหัสบดีที่ 27 สิงหาคม 2020 เราจะแก้ไขโพสต์นี้หากมีการเปลี่ยนแปลง

หากคุณเห็นสิ่งที่น่าสนใจโปรดแจ้งให้เราทราบ บางสิ่งมีจุดมุ่งหมาย แต่อาจรู้สึกเหมือนถอยหลังภาพมีพื้นฐานที่แตกต่างกันเล็กน้อย แต่บางอย่างอาจเล็ดลอดผ่านรอยแตก

Answer 1

สถานะโดยการออกแบบ

จำนวนช่องว่างระหว่างบรรทัดข้อความ ( line-height) มีการเปลี่ยนแปลง ฉันไม่รู้ว่านี่เป็นความตั้งใจ แต่ฉันชอบอันเก่าดีกว่า มีเหตุผลที่ดีในการเปลี่ยนหรือขอคืนได้ไหม ฉันสำหรับคนหนึ่งชอบอันเก่าดีกว่าเพราะอันใหม่ทำให้ตัวอักษร 'เต้น' มากขึ้นสำหรับฉันมันก็ไม่ได้อ่านอย่างสวยงาม

เก่า:

ใหม่:

---

ที่เกี่ยวข้อง:

• โปรดยกเลิกการเปลี่ยนแปลงความสูงของเส้น!
• ขอความเป็นไปได้ในการปรับระยะห่างระหว่างบรรทัดสำหรับผู้ที่มีสายตาไม่ดี
• Userscript เพื่อรับความสูงของบรรทัดเก่ากลับมา
• มีการอัปเดตเกี่ยวกับการเปลี่ยนแปลงระยะห่างระหว่างบรรทัดหรือไม่?

Answer 2

ตกลงนี่คือคำแนะนำสองประการ

ก่อนอื่นโปรดกลับไปที่ระยะห่างระหว่างบรรทัดเดิม หาอ่านยาก

ประการที่สองโปรดส่งข้อความถึงทุกคนเกี่ยวกับเรื่องนี้และอย่าพึ่งพาแถบด้านข้าง Meta เพื่อประกาศ จริงๆแล้วฉันคิดว่าเบราว์เซอร์ของฉันทำงานผิดพลาดหรือฉันเปลี่ยนตัวเลือกที่ไหนสักแห่ง ฉันลองใช้เบราว์เซอร์อื่นรีบูตเครื่อง ฯลฯแล้วจึงตัดสินใจค้นหา Stack Overflow ทั้งหมดเป็นเพราะฉันนึกไม่ถึงว่าจะเกิดเรื่องแบบนี้ขึ้นโดยไม่มีการประกาศครั้งใหญ่ การทำเช่นนี้จะป้องกันไม่ให้ผู้อื่นเสียเวลาในการแก้ไขปัญหา

Answer 3

สถานะข้อบกพร่องเสร็จสมบูรณ์

ลิงก์ในสปอยเลอร์สามารถคลิกได้ด้วยคลิกกลางเท่านั้น

ตัวอย่าง:

นี้การเชื่อมโยงไม่สามารถคลิกได้ด้วยการคลิกซ้าย แต่ด้วยกลางคลิก - จะเปิดในแท็บใหม่แล้วและมีวิธีที่จะคลิกได้โดยตรงไม่มี

บนมือถือในการเปิดลิงก์คุณต้องแตะค้างไว้จนกว่าเมนูลิงก์จะปรากฏขึ้นซึ่งคุณสามารถเลือกตัวเลือก "เปิดลิงก์ในแท็บใหม่" ได้

นอกจากนี้การวางเมาส์เหนือลิงก์จะแสดง URL ของลิงก์ในแถบสถานะเสมอ แต่นั่นเป็นปัญหาเล็กน้อย

ฉันคิดว่าทางออกที่ดีที่สุดคือการไม่เผยแพร่การคลิกไปยังสปอยเลอร์หากมีการคลิกองค์ประกอบแบบโต้ตอบบางส่วนแต่จะมีการเปิดเผยสปอยเลอร์เท่านั้น หากยังไม่เปิดเผยสปอยเลอร์ให้คลิกซ้ายที่ใดก็ได้ภายในสปอยเลอร์ก่อนจะเผยสปอยเลอร์ ¹ฉันไม่ต้องการออกไปโดยคลิกลิงก์ที่มองไม่เห็น

ฉันได้ทดสอบGitHub oneboxes ด้วย (ลิงก์ 10k)ซึ่งแสดงปัญหาเดียวกัน สิ่งนี้จะแก้ไขข้อมูลโค้ดสแต็กในสปอยเลอร์ด้วยโดยบังเอิญ

แน่นอนว่าสองกรณีหลังเป็นกรณีขอบและการเชื่อมโยงปกติเป็นกรณีที่พบได้บ่อยกว่า แต่จะฆ่านกสามตัวด้วยหินก้อนเดียว

---

¹ผู้ใช้41686d6564 ชี้ให้เห็นว่าการคลิกกลางและคลิกขวาไม่ควรเปิดเผยสปอยเลอร์ แม้ว่าความคิดเห็นนี้เกิดจากการใช้ถ้อยคำที่ไม่ชัดเจน แต่จริงๆแล้วตัวฉันเองก็ไม่แน่ใจว่าจะจัดการคลิกกลางหรือคลิกขวาบนสปอยเลอร์ที่ซ่อนอยู่อย่างไร การเพิกเฉยต่อสิ่งเหล่านี้ (เช่นไม่เปิดเผยสปอยเลอร์ แต่ยังคงอนุญาตคุณสมบัติเบราว์เซอร์เริ่มต้นเช่นเมนูบริบท) อาจเป็นตัวเลือกที่ดี

Answer 4

สถานะข้อบกพร่องเสร็จสมบูรณ์

การพยายามลากและเลือกข้อความสปอยเลอร์ส่งผลให้ถูกซ่อนอีกครั้ง

ดูเหมือนพฤติกรรมที่ไม่ได้ตั้งใจ

Answer 5

จุดบกพร่อง

พื้นหลังของบล็อกโค้ด<pre>มีน้ำหนักเบาลงทำให้แยกแยะความแตกต่างจากพื้นหลังสีขาวได้ยากขึ้น (ทุกที่ยกเว้นในโหมดมืดของ Stack Overflow)

ก่อนหน้านี้มีbackground-color: var(--black-050);หรือ#EFF0F1บนสีขาว:

ตอนนี้มีbackground-color: var(--highlight-bg);หรือ#F6F6F6สีขาว:

ด้วยเวอร์ชันก่อนหน้านี้จะเห็นได้ชัดเจนอย่างชัดเจนว่าขอบของบล็อกโค้ดอยู่ที่ใด ตอนนี้ฉันมีสายตาที่ดีกว่าคนส่วนใหญ่ แต่ถึงฉันจะมองบนจอภาพของฉันเส้นขอบก็ดูไม่เด่นชัดอย่างอึดอัด

Another example code block

(การใช้สีพื้นหลังinline <code>จะดีเกินไป IMO)

Answer 6

ฉันสังเกตเห็นว่าสีของข้อความในบล็อกคำพูดนั้นเบาเกินไป มันยากที่จะอ่านสำหรับฉันและฉันมีสายตาที่ดี

รูปแบบปัจจุบันคือ.s-prose blockquote {color:var(--black-600)}. การลบมันจะทำให้ข้อความบล็อกมืดลงโดยสิ้นเชิงและทำให้อ่านได้อีกครั้ง

ข้อความนี้เบาเกินไป โปรดทำให้มันมืดลง

Answer 7

สถานะข้อบกพร่องโดยการออกแบบปุ่มเลื่อนจะมองไม่เห็นในหน้าต่างรหัสที่เลื่อนได้

ไม่แน่ใจว่าสิ่งนี้ส่งผลต่อแถบเลื่อนแนวตั้งด้วยหรือไม่ แต่หน้าต่างโค้ดที่เลื่อนในแนวนอนจะไม่แสดงปุ่มเลื่อนจริงอีกต่อไป พวกมันยังคงอยู่ที่นั่นและคลิกได้เพียงแค่ ... ไม่มีเครื่องหมายคาเร็ตหรืออะไรที่บ่งบอกว่ามันคือปุ่มเลื่อนทิศทาง

(หน้าต่างเลื่อนเหล่านี้เลื่อนไปทางซ้ายที่สุดเท่าที่จะทำได้):

และโหมดแสง:

Answer 8

จุดบกพร่อง

พื้นหลังของโค้ดอินไลน์แตกต่างจากพื้นหลังของบล็อกโค้ด

สิ่งนี้ทำให้ดูเหมือนว่า "สิ่งที่แตกต่างกัน" ในความเป็นจริงแล้วทั้งหมดเป็นเพียงโค้ดและควรมีรูปแบบเหมือนกัน

ตัวอย่างสด (ในโหมดมืด SO ความแตกต่างมีความสำคัญมากกว่า):

รหัสอินไลน์: this is inline code

บล็อกรหัส:

this is a code block

Answer 9

สถานะเสร็จสมบูรณ์

มีสถานที่ / เพจ / ไซต์สาธารณะที่เปิดใช้งานอยู่แล้วหรือไม่ซึ่งฉันสามารถทดสอบได้ (เพื่อความอยากรู้อยากเห็นของตัวเองหรืออาจรายงานปัญหา) ก่อนที่จะเผยแพร่ทุกที่

คุณเขียนว่า "ถ้าคุณเห็นอะไรที่น่าสนใจโปรดแจ้งให้เราทราบ" - ดูได้ที่ไหน?

---

ฉันต้องการทราบว่าสิ่งนี้มีลักษณะอย่างไร:

• รายการ

  รายการย่อหน้า

• รายการ

  รายการย่อหน้า

  • Subitem
  • Subitem

  รายการย่อหน้า

คุณพูดถึง "การปรับแต่งทั่วไปในการเว้นระยะห่างรวมถึงรายการที่ซ้อนกัน" ดังนั้นฉันจึงอยากรู้ว่าคุณแก้ไขสิ่งนี้หรือไม่นั่นคือ IMO ที่นั่นควรเป็นช่องว่างแนวตั้งระหว่างรายการย่อยสุดท้ายและย่อหน้าของรายการถัดไป

ขณะนี้มีบางอย่างที่น่าสนใจเกี่ยวกับย่อหน้าของรายการแรกเช่นกัน: ระยะขอบ 15px หลังจากรายการแรกก่อนย่อหน้าของรายการและมีระยะขอบ 7.5px เท่านั้นหลังจากย่อหน้ารายการก่อนรายการที่สอง

ตัวอย่างในhttps://stackoverflow.design/product/components/prose/ของคุณแนะนำให้คุณแก้ไขข้อที่สอง - ตอนนี้ระยะขอบเท่ากับ 7.5px ทุกที่ - แต่ฉันไม่เห็นการทดสอบ / ตัวอย่างของสถานการณ์แรก ข้างบน.

Answer 10

สถานะข้อบกพร่องเสร็จสมบูรณ์

เมื่อถามคำถามที่มีสปอยเลอร์อยู่ฉันสามารถคลิกที่ป้าย 'เปิดเผยสปอยเลอร์' ใหม่ได้บ่อยเท่าที่ต้องการ แต่ก็ไม่เปิดเผยอะไรเลย

ใช้งานได้เมื่อคุณเขียนคำตอบ:

Answer 11

ตรวจสอบสถานะข้อบกพร่อง

ลิงก์ที่มีการจัดรูปแบบโค้ดแบบอินไลน์ดูแปลก ๆ

ภาพหน้าจอโดยใช้ Firefox 68.11.0esr (64-bit) ใน Debian:

เมื่อวางเมาส์เหนือสีน้ำเงินที่อ่อนกว่าเล็กน้อยจะไม่สามารถสังเกตเห็นได้เมื่อเทียบกับลิงก์ปกติ

อย่างน้อยขีดเส้นใต้ลิงก์สีน้ำเงินจะอยู่ใต้ขีดล่างปกติ

ภาพหน้าจอโดยใช้ Firefox 73.0.1 (64-Bit) ใน Windows 10:

ตัวอย่างจริง: __index__

Answer 12

สถานะข้อบกพร่องเสร็จสมบูรณ์

ตัวเอียงไม่แสดงบนเว็บบนอุปกรณ์เคลื่อนที่ ไม่มีปัญหาชัดเจนกับ Markdown ตัวหนา Android 5.1.1, Chrome 84.0 ภาพหน้าจอของคำตอบการจัดรูปแบบ Sandbox นี้ :

*This should be rendered as italics (asterisks).*  
_That, as well (underscores)._  
**This is bold text.**  
__Also bold text.__

เช้านี้ทำงานได้ดีก่อนที่การเปลี่ยนแปลงจะมีผล

Answer 13

สถานะข้อบกพร่องเสร็จสมบูรณ์

บนมือถือ (โดยเฉพาะในมุมมองที่เข้าถึงได้โดยคลิกที่ปุ่ม "ไซต์เต็ม" บน iPhone) อย่างน้อยใน RPG.SE และ Puzzling.SE ข้อความเนื้อหาในคำถามและคำตอบจะหดสั้นลง ความคิดเห็นชื่อและส่วนหัวดูเหมือนจะไม่ลดลงเลยเมื่อเปรียบเทียบ

ฉันสวมแว่นสายตาสั้นและใช้ SE ทุกวัน ในโทรศัพท์ของฉันตอนนี้ฉันต้องถือไว้ในระยะ 6 นิ้วจากดวงตาของฉันเพื่อให้สามารถมองเห็นได้ดี ฉันเคยมองเห็นได้ดีที่สุดในระยะประมาณหนึ่งฟุต นี่เป็นสิ่งที่ฉันพบว่าไม่มีประโยชน์เช่นถ้าฉันเพิ่มการซูมหน้าทุกอย่างก็เติบโตขึ้นด้วยซึ่งไม่จำเป็น

คุณสามารถทำให้ข้อความใหญ่ขึ้นบนมือถือได้หรือไม่?

Answer 14

ฉันต้องการที่จะดึงดูดความสนใจของผู้อ่านโดยเฉพาะอย่างยิ่งที่ @AaronShekey, ความจริงที่ว่าW3C ไม่ไม่จริงแนะนำให้ตั้งค่าความสูงสาย 1.5 หรือสูงกว่า

คำแนะนำที่เกี่ยวข้องดูเหมือนจะเป็นเกณฑ์ WCAG 1.4.12 (การเว้นวรรคข้อความ) และ 1.4.8 (การนำเสนอด้วยภาพ)

เกณฑ์1.4.12เกี่ยวกับการอ่านระยะห่างข้อความ:

ในเนื้อหาที่ใช้งานโดยใช้ภาษามาร์กอัปที่สนับสนุนคุณสมบัติลักษณะข้อความต่อไปนี้จะไม่มีการสูญเสียเนื้อหาหรือฟังก์ชันการทำงานโดยการตั้งค่าสิ่งต่อไปนี้ทั้งหมดและโดยการเปลี่ยนคุณสมบัติสไตล์อื่น ๆ :

• ความสูงของบรรทัด (ระยะห่างระหว่างบรรทัด) อย่างน้อย 1.5 เท่าของขนาดตัวอักษร
• (ฯลฯ )

ดังนั้นนี่จึงไม่ใช่ข้อกำหนดหรือคำแนะนำสำหรับการตั้งค่าความสูงของบรรทัด - เป็นข้อกำหนดที่ว่าหากกำหนดให้เส้นมีระยะห่างมากขึ้นไซต์ / หน้าเว็บจะไม่ใช้งานไม่ได้หรือผิดปกติและจะไม่มีเนื้อหาใดที่มองไม่เห็น / ไม่สามารถเข้าถึงได้

เอกสาร W3C ที่มีชื่อว่า"การทำความเข้าใจเกณฑ์ความสำเร็จ 1.4.12: การเว้นวรรคข้อความ"ย้ำสิ่งนี้ (เน้นของฉัน):

จุดประสงค์ของเกณฑ์ความสำเร็จ (SC) นี้คือเพื่อให้แน่ใจว่าผู้คนสามารถลบล้างระยะห่างข้อความที่ระบุของผู้เขียนเพื่อปรับปรุงประสบการณ์ในการอ่าน

คำแนะนำคือการสนับสนุนการลบล้างการตั้งค่าเพื่อตอบสนองความต้องการของผู้อ่านบางคนไม่ใช่เพื่อเปลี่ยนการตั้งค่าเริ่มต้น

เกณฑ์ WCAG 1.4.8เกี่ยวกับการอ่านการนำเสนอด้วยภาพ (เน้นของฉัน):

สำหรับการนำเสนอบล็อกข้อความด้วยภาพมีกลไกเพื่อให้บรรลุสิ่งต่อไปนี้: (ระดับ AAA)

... สนิป ...

ระยะห่างระหว่างบรรทัด (นำหน้า) อย่างน้อยก็มีช่องว่างครึ่งหนึ่งภายในย่อหน้าและระยะห่างระหว่างย่อหน้าจะใหญ่กว่าระยะห่างระหว่างบรรทัดอย่างน้อย 1.5 เท่า

ดังนั้นไม่ใช่ค่าเริ่มต้น แต่เป็นความสำเร็จผ่านกลไกบางอย่าง

@MaxD เชื่อมโยงกับเอกสาร "เทคนิค" เกี่ยวกับเกณฑ์ 1.4.8 ซึ่งกล่าวถึงความสำคัญของการกำหนดระยะห่างระหว่างบรรทัดระหว่าง 1.5 ถึง 2 แต่:

• เอกสารนั้นไม่ใช่ WCAG อย่างเป็นทางการ
• "การให้" ไม่ได้หมายความว่า "ให้เป็นค่าเริ่มต้น" WCAG ที่แท้จริงชี้แจงว่าเจตนาคือการจัดหากลไกในการตั้งค่านั้น ตัวอย่างเช่นการตั้งค่าระดับไซต์ต่อผู้ใช้ต่อผลกระทบนั้น
• เกณฑ์ 1.4.8 เกี่ยวกับความสอดคล้องระดับ AAA ระดับนั้นไม่ได้มีไว้ (ตามเอกสาร WCAG เอง) สำหรับการใช้งานทั่วไป แต่สำหรับไซต์พิเศษสำหรับการเข้าถึงเพิ่มเติม

_{การเปิดเผยข้อมูล: ฉันได้โพสต์สิ่งนี้เพื่อตอบกลับการสนทนาที่เกี่ยวข้องนี้เช่นกัน}

Answer 15

ให้เราซ่อนสปอยเลอร์อีกครั้ง

คำขอคุณลักษณะ

ดูเหมือนว่าจะมีวิธีแก้ปัญหาในการบล็อกการซ่อนซ้ำเพื่อให้สามารถคลิกลิงก์และลากข้อความได้โปรดดูความคิดเห็นในเรื่องนี้

สิ่งนี้ได้รับการแก้ไขแล้ว ไม่มีการคลิกลิงก์ที่ซ่อนอยู่อีกต่อไป สปอยเลอร์เผยให้เห็นคลิกซ้ายที่ใดก็ได้ภายในสปอยเลอร์ การคลิกอีกครั้งจะไม่ซ่อนสปอยเลอร์ซ้ำ (แต่ให้เนื้อหาจัดการกับการคลิกของตนเอง) - Ben Kelly ♦

เนื่องจากสิ่งนี้ได้รับการแนะนำเพื่อช่วยลดการเปิดเผยข้อความโดยไม่ได้ตั้งใจเราควรให้ผู้ใช้ซ่อนข้อความนั้นอีกครั้ง การคลิกโดยไม่ตั้งใจยังคงเกิดขึ้นและแม้ว่าจะไม่ใช่เราก็ยังควรให้โอกาสผู้ใช้ในการซ่อนเนื้อหาที่ไม่ต้องการเห็นอีกครั้ง

ตอนนี้เราเปิดเผยสิ่งนี้เมื่อคลิก / แตะเพื่อประสบการณ์ที่สอดคล้องกันมากขึ้นในอุปกรณ์ต่างๆโดยเปิดเผยโดยบังเอิญน้อยลงเช่นกันเนื่องจากไม่ใช่การโต้ตอบแบบเลื่อนเมาส์อีกต่อไป การคลิกอีกครั้งไม่ได้ซ่อนสปอยเลอร์

ดูเหมือนว่าฟังก์ชันนี้จะถูกลบออกสำหรับวิธีแก้ปัญหาเพื่อแก้ไขปัญหาแทนที่จะเป็นอย่างอื่น ควรจะสามารถคลิกลิงก์ / เลือกข้อความและซ่อนสปอยเลอร์ได้อีกครั้ง สถานที่ส่วนใหญ่ให้ทั้งสองตัวเลือกและถ้าฉันจำไม่ผิดการจัดรูปแบบสปอยเลอร์เก่าที่ใช้เพื่อให้ตัวเลือกนั้นเช่นกัน ดูเหมือนว่าจะก้าวไปในทิศทางที่ผิด

Answer 16

มาทำสิ่งที่เราทำได้ดีที่สุดในฐานะโปรแกรมเมอร์กันเถอะ;)

⭐ย้อนกลับการจัดรูปแบบการแลกเปลี่ยนกองซ้อน⭐

• ส่วนขยายของ Google Chrome (ปรับแต่งได้)
• สคริปต์ Greasemonkey / Tampermonkey | (ความสูงบรรทัดเท่านั้น)
• ธีมมีสไตล์ (+ สไตลัส) - | [โหมดมืด]

โปรดอัปเดตสคริปต์! : อัปเดตเพื่อแก้ไขการเปลี่ยนแปลงใหม่ในการบล็อกโค้ด(Sep 24, 2020)

มือถือ:

• โซลูชันที่ จำกัด : Javascript ที่เปิดใช้งานการคลิกต่อหน้า (iOS, Android)
• Kiwi Browser (Android) - ติดตั้งส่วนขยาย Chrome ด้านบน(ไม่ได้ทดสอบ)

มีส่วนร่วม:

ที่เก็บ GitHub - ช่วยฉันคืนอย่างซื่อสัตย์!

Answer 17

สถานะเสร็จสมบูรณ์

บทความในศูนย์ช่วยเหลือMarkdown การแก้ไขความช่วยเหลือต้องการความรัก:

สปอยเลอร์

หากต้องการซ่อนข้อความบางส่วนและให้มองเห็นได้เฉพาะเมื่อผู้ใช้เลื่อนเมาส์ไปที่ข้อความนั้นให้ใช้ไวยากรณ์ blockquote พร้อมเครื่องหมายอัศเจรีย์เพิ่มเติม:

At the end of episode five, it turns out that
>! he's actually his father.

ส่วนที่ฉันเป็นตัวหนาควรได้รับการอัปเดตเพื่อให้สอดคล้องกับสถานการณ์ใหม่

Answer 18

คำขอคุณลักษณะ

การปรับแต่ง blockquote เพิ่มเติม

การปรับแต่งนี้ดูเหมือนจะไม่เน้นย้ำคำพูด!

แทนที่จะไม่เน้นข้อความบล็อกฉันขอแนะนำให้แยกความแตกต่างของ blockquote กับข้อความปกติโดยใช้พื้นหลังที่เหมาะสม ฉันต้องการแจ้งเกี่ยวกับฉันทามติของผู้ใช้สำหรับการจัดรูปแบบ blockquote โดยอ้างถึง:

(118 upvotes สุทธิ) โปรดเปลี่ยนพื้นหลังใบเสนอราคาจากสีขาวเป็นสีเหลือง

การจัดรูปแบบ blockquote ปัจจุบันต้องการการแก้ไขโดยเร็วที่สุด ฉันหวังว่านี่จะได้รับการพิจารณา

Answer 19

เมื่อพิจารณาถึงความคิดเห็น - ฉันพบว่าการเว้นวรรคใหม่อ่านง่ายขึ้นจริงๆ

ฉันเป็นโรคดิสเล็กซิค - และหนึ่งใน 'การดัดแปลง' ที่ฉันทำ (และไม่ใช่เชิงบวก) คือฉันบล็อกการอ่าน เนื่องจากฉันทำสิ่งต่างๆน้อยลงในคราวเดียวและทำงานช้าลงจึงทำให้ฉันเครียดน้อยลง

ฉันไม่รู้จริงๆว่านี่เป็นทางเลือกหรือว่ามันจะช่วยได้ แต่ดูเหมือนว่าจะมีและค่อนข้างมาก

ในฐานะคนที่ถูกอธิบายว่าเป็น "เศษเสี้ยวเล็ก ๆ น้อย ๆ ในฐานะผู้ชมโดยรวมของคุณ" ขอขอบคุณสำหรับการแก้ไขบางสิ่งที่ฉันไม่เคยตระหนักว่ามันพังทลายและดูเหมือนจะเป็นการเปลี่ยนแปลงคุณภาพชีวิตที่ดีสำหรับฉัน

ฉันเห็นข้อโต้แย้งเกี่ยวกับการมีช่องว่างระหว่างบรรทัดของโค้ดน้อยลง (โมนิก้ามีบางส่วนที่นี่แม้ว่าในกรณีของเธอฉันเข้าใจว่าเธอพูดถึงบน Twitter มากกว่าที่นี่และฉันหวังว่าเธอจะให้อภัยฉันที่ทำซ้ำที่นี่)

ระยะห่างระหว่างบรรทัดคงที่ที่ใหญ่ขึ้น (โดยไม่คำนึงถึงใบหน้าแบบอักษร) เว้นระยะห่างเกือบสองเท่าดังนั้นจึงยากต่อการติดตามเมื่ออ่านย่อหน้าและดูตัวแบ่งย่อหน้าได้ยากขึ้น สำหรับบล็อกโค้ดตอนนี้พอดีกับหน้าจอน้อยลง รหัสไม่ได้อ่านเฉพาะตามลำดับเหมือนร้อยแก้ว ไม่สามารถย่อขนาด b / c ได้โดยไม่เปลี่ยนแปลง

โดยส่วนตัวแล้วฉันไม่เห็นปัญหาในการแยกย่อหน้าออกจากกันและฉันก็ใช้จำนวนมากในการทำลายกำแพงข้อความของฉัน แต่คนอื่น ๆ ก็อาจทำได้ ฉันกลัวว่าจะต้องปล่อยให้พวกเขาโพสต์คำตอบที่อธิบายว่ามันไม่ได้ผล

Answer 20

สถานะข้อบกพร่องเสร็จสมบูรณ์

จอแสดงผลสปอยเลอร์ใหม่ทำงานไม่ถูกต้องเกี่ยวกับวิกิแท็กเช่นหนึ่งที่เกี่ยวกับสปอยเลอร์ ป้าย 'เปิดเผยสปอยเลอร์' จะแสดง:

แต่เนื้อหาจะปรากฏให้เห็นอยู่แล้วเมื่อวางเมาส์เหนือ (ซึ่งเป็นพฤติกรรมเก่า)

Answer 21

ฉันไม่ทราบว่าเหตุใดจึงใช้การปรับโครงสร้างของโค้ดสไตล์โพสต์พร้อมกับการเปลี่ยนแปลงที่สำคัญในการจัดรูปแบบนั้น จากประสบการณ์ของฉันมันเป็นภูมิปัญญาทั่วไปที่คุณ refactor โครงสร้างพื้นฐานของคุณก่อนโดยไม่ต้องเปลี่ยนพฤติกรรมการเผชิญหน้ากับผู้ใช้ (เท่าที่จะทำได้) จากนั้นทำการเปลี่ยนแปลงพฤติกรรมในขณะที่วางโครงสร้างพื้นฐานใหม่อย่างมั่นคง

ฉันรู้สึกผิดหวังเช่นกันที่ได้เห็นว่าการเว้นระยะห่างของบรรทัดที่โชคร้ายนั้นมีชีวิตอยู่เนื่องจาก:

• มีการตอบรับเชิงลบจำนวนมากจากผู้ใช้
• ยังไม่มีการตอบรับเชิงบวกมากนัก
• ข้อโต้แย้งในการเพิ่มระยะห่างระหว่างบรรทัดแม้ว่าจะพิจารณาตามมูลค่าที่ตราไว้ก็ตามเกี่ยวกับคนส่วนน้อยโดยทั่วไป (บางคนที่มีความพิการบางอย่าง) และน่าจะเป็นส่วนน้อยของฐานผู้ใช้ของไซต์ด้วยซ้ำ ซึ่งจะเหมาะสมกว่าที่จะแนะนำตัวเลือก
• ไม่มีการร้องเรียนใด ๆ จากผู้ใช้เกี่ยวกับระยะห่างระหว่างบรรทัดที่เล็กเกินไปและไม่มีการศึกษากลุ่มผู้ใช้ใด ๆ ที่ได้ข้อสรุปนี้ อย่างน้อยไม่ใช่ว่าเรารู้
• ไม่มีการประเมินว่าความยากที่ควรจะเป็นสำหรับผู้ใช้บางรายในการติดตามบรรทัดที่ระยะห่าง 1.3 จะปรากฏขึ้นจริงหรือไม่
• มีการประเมินผลของการไม่มีผลในทางตรงกันข้าม:ความยากลำบากของสายการติดตามเมื่อพวกเขามีระยะห่างเกินไปห่างไกลกัน นอกจากนี้จากการสังเกตความแตกต่างระหว่างย่อหน้าอย่างชัดเจน
• ไม่มีการพิจารณาเกี่ยวกับ textual-art แบบ monospaced ก่อนที่การเปลี่ยนแปลงจะเกิดขึ้นทั่วทั้งเครือข่าย
• (แก้ไข: ดูคำตอบแยกต่างหากของฉันเกี่ยวกับสิ่งที่ W3C ทำและไม่แนะนำจริง ๆ )

การตอบสนองของ "แยกความแตกต่าง" และยังคงดำเนินต่อไปในขณะที่ดีกว่าการเพิกเฉยต่อคำร้องเรียนนั้นไม่ใช่แนวทางการดำเนินการที่เหมาะสม เมื่อทราบแล้วว่ามีปัญหา - การเปลี่ยนแปลงที่ตั้งใจไว้ควรล่าช้าและตรวจสอบต่อไปแทนที่จะ "แก้ไข" อย่างเร่งรีบ

Answer 22

ตรวจสอบสถานะ

ผู้ใช้รายอื่นอ้างว่าข้อความหดลงในขณะที่ฉันพบว่าการเปลี่ยนแปลงอยู่ในขอบเขตที่ยอมรับได้บน Firefox Android แต่ใน Chrome Android ข้อความมีขนาดใหญ่เกินไปเมื่อเทียบกับข้อความก่อนหน้านี้:

ดังที่คุณเห็นใน Chrome ความแตกต่างระหว่างขนาดของแบบอักษรของโพสต์และ (เช่น) แบบอักษรรายการคอลัมน์ด้านขวา "ที่เชื่อมโยง" นั้นมีความสำคัญ มุมมองบน Chrome เคยดูคล้ายกับมุมมองบน Firefox (ซึ่งตอนนี้ก็แตกต่างกันเช่นกัน แต่ก็ไม่แย่มาก)

ด้วยขนาดตัวอักษรใหม่ที่ใหญ่ขึ้นของโพสต์ของ Chrome ข้อความที่พอดีกับแต่ละบรรทัดโดยทั่วไปจะแสดงข้อมูลได้มากถึง 50% ในพื้นที่หน้าจอเท่ากัน

ฉันเข้าใจว่าฉันสามารถปรับขนาดของแบบอักษรในเบราว์เซอร์ของฉันได้ แต่ฉันไม่ต้องการให้บางส่วนเล็กเกินไปหรือต้องปรับใหม่เพื่อเยี่ยมชมเว็บไซต์อื่น ๆ ทุกอย่างเรียบร้อยก่อนการเปลี่ยนแปลง

[หมายเหตุ: ฉันโหวตให้ประกาศเมื่อดูบน Firefox ขอบคุณสำหรับการปรับปรุง แต่ตอนนี้เห็นบน Chrome (และข้อร้องเรียนอื่น ๆ ทั้งหมด) ฉันรู้สึกว่าไม่คู่ควรกับการสนับสนุนครั้งก่อนของฉัน]

ฉันพบวิธีที่จะแสดงให้เห็นว่า CSS ใดที่ใช้กับองค์ประกอบต่างๆเบราว์เซอร์ Android Kiwi (77.0.3865.92) ใช้ Chrome และอนุญาตให้มีส่วนขยาย - นี่คือสิ่งที่ส่วนขยาย "CSS Peeper" กล่าวเกี่ยวกับหน้าเว็บ: ขนาดตัวอักษรของความคิดเห็นดูเหมือนใหญ่ , H2เป็น font-size 34.3และH3เป็น 33.3 (เกือบจะเหมือนกัน) เชื่อมโยงหลายมิติคำถาม มีลักษณะตามปกติวันที่ 13 px ขณะที่ปกติข้อความเป็น 29.8 พิกเซลและมอบหมายให้P

Samsung S9 + พร้อม Firefox Android 80.0.1-beta.2 (Build # 2015758611) และ Chrome 85.0.4183.81

Answer 23

ด้วยการเพิ่มการรองรับสำหรับขนาดหัวเรื่องมากขึ้นh1ตอนนี้ดูใหญ่เกินไปและแบ่งโพสต์เก่า ๆ ออกไป

_{โพสต์: https://stackoverflow.com/a/38025376/3705191}

h1ขนาดเก่า(หรือ#ใน MD) ใกล้เคียงกับh2ขนาดตัวอักษรปัจจุบันมากขึ้นและผู้เขียนโพสต์ภาพหน้าจอด้านบนน่าจะตั้งใจให้เป็นส่วนหัว h2 เนื่องจากขนาดของมัน การเพิ่มขนาดจะเปลี่ยนความหมายที่ตั้งใจไว้และด้วยเหตุนี้การจัดรูปแบบที่ต้องการของผู้แต่ง สิ่งที่ดูเหมือนว่าเป็นหัวข้อย่อยที่สอดคล้องกันมาก่อนตอนนี้ดูเหมือนหัวข้อแยกต่างหาก

ฉันต้องการให้คำตอบเก่าได้รับการเก็บรักษาไว้ให้มากที่สุดด้วยการจัดรูปแบบที่ตั้งใจไว้

Answer 24

สถานะข้อบกพร่องเสร็จสมบูรณ์

ไม่มีทางเปิดเผยสปอยเลอร์ในโปรไฟล์ผู้ใช้

นอกจากนี้เมื่อฉันวางเมาส์บนเนื้อหา Markdown ของสปอยเลอร์ในขณะที่แก้ไขโปรไฟล์ตัวเลือก "เปิดเผยสปอยเลอร์" จะหายไป

นี่คือสิ่งที่ฉันมีในขณะแก้ไขโปรไฟล์:

และนี่คือตอนที่ฉันวางเมาส์บนเนื้อหา Markdown:

Answer 25

การเปิดเผยสปอยเลอร์ต้องใช้ Javascript ของบุคคลที่สาม

... ซึ่งผู้ใช้ใหม่และผู้หวาดระแวง (ควร) ถูกปิดกั้นโดยค่าเริ่มต้น เป็นประสบการณ์ที่ไม่ดี

Answer 26

จุดบกพร่อง

รายการบรรทัดเดียว (ไม่มี<p>) มีระยะห่างมาก:

• สวัสดี
• โลก
• ทดสอบ

Markdown:

- Hello
- World
- Test

ลักษณะนี้เหมือนกับรายการที่มีย่อหน้า:

• สวัสดี

• โลก

• ทดสอบ

Markdown:

- Hello

- Hello

- World

รายการที่ไม่มีบรรทัดว่างระหว่างรายการไม่ควรแสดงผลเป็นย่อหน้า (และไม่ใช่ไม่มี<p>แท็ก) และไม่ควรมีลักษณะเหมือนย่อหน้าด้วย นี้ได้รับคุณลักษณะตั้งแต่เดิม Markdownและยังเป็นใน CommonMark

หนึ่งในสถานที่ที่มีลักษณะนี้จริงๆขี้ขลาดคือในโปรไฟล์ของฉัน

นี่ถูกกำหนดโดย CSS ด้านล่างและการลบที่ทำให้มันดูโอเค:

.s-prose ol li, .s-prose ul li {
    margin-bottom: .7em;
}

Answer 27

ระบุว่าเอกสารของระบบการออกแบบอย่างชัดเจนกล่าวถึงข้อความขนาดเล็ก , มีโอกาสที่จะได้รับในที่สุดที่<small>แท็กได้รับอนุญาต HTML ในการโพสต์ Markdown? กรณี<small>นี้เกิดขึ้นหลายครั้งและโดยส่วนใหญ่แล้วคนส่วนใหญ่ละเมิด<sup>/ <sub>_{/ ^{ทั้งสอง}}อย่างเป็นวิธีแก้ปัญหาดังนั้นข้อโต้แย้งทั้งหมดที่ต่อต้านการแนะนำแท็กจึงมีผลกับสภาพที่เป็นอยู่แล้ว (ยกเว้นที่แย่กว่านั้น)

Answer 28

ลิงก์รอบ ๆ โค้ดจะไม่ปรากฏบนไซต์บนมือถือ

ดูภาพหน้าจอคำตอบของฉัน (ตามที่ปรากฏทั้งบน Firefox และ Chrome บน Android):

โปรดทราบว่าฉันอ้างถึง "เอกสารที่ฉันเชื่อมโยง" แต่ดูเหมือนว่าจะไม่ได้เชื่อมโยงอะไรเลย

ในความเป็นจริงฉันได้ใส่ลิงค์รอบ ๆ ชื่อฟังก์ชันดังนี้

... use [`PyArray_ZEROS`](http://example.com) ...

... ใช้PyArray_ZEROS...

ดูเหมือนรหัสปกติโดยไม่มีข้อบ่งชี้ว่าสามารถคลิกได้ (บนเดสก์ท็อปมีขีดเส้นใต้สีน้ำเงินดังนั้นจึงชัดเจนกว่าเล็กน้อย)

Answer 29

"... พร้อมการปรับแต่งเพิ่มเติมในการเว้นระยะห่างระหว่างองค์ประกอบ"

คุณอาจจะรู้อยู่แล้วว่าฉันเคยอ่านนักออกแบบบางคนแนะนำให้ใช้ระยะขอบระหว่างย่อหน้าเท่ากับความสูงของบรรทัด - เพื่อให้มีบรรทัดว่างระหว่างย่อหน้าหนึ่งบรรทัด - "เส้นตาราง" ของเส้นบนหน้าเป็นปกติอย่างสมบูรณ์และ ระยะขอบระหว่างย่อหน้ามีความชัดเจนอย่างสมบูรณ์ไม่มีเนื้อหาใหญ่เกินไปหรือเล็กเกินไป

IMO ที่มีความสูงครึ่งบรรทัดระหว่าง (และภายใน) รายการตามที่คุณมีในตอนนี้ก็เป็นความคิดที่ดีเช่นกัน (เพื่อให้รายการมีขนาดกะทัดรัดและเหนียวแน่นยิ่งขึ้น)

ฉันเห็นคุณมี ...

• ขนาดตัวอักษร 15px
• ความสูง 1.5 บรรทัด

... ดังนั้นความสูงของเส้นคือ 22.5px

และปัจจุบันคุณมี:

• ระยะขอบระหว่างย่อหน้า 21px
• ขอบ 10.5px ภายในรายการ

โปรดทราบว่า 21px นั้นใกล้ 22.5px มากซึ่งเป็นเหตุผลว่าทำไมมันจึงดูถูกต้อง IMO - ไม่ใช่อย่างแน่นอน

IMO ระยะขอบ 21px เหมาะอย่างยิ่งกับความสูง 1.4 บรรทัด (15px * 1.4 = 21px)

ดังนั้นหากคุณต้องการหรือต้องมีความสูงของบรรทัดเป็น1.5ฉันขอแนะนำให้คุณทดลองใช้ระยะขอบระหว่างย่อหน้าที่22.5pxแทนที่จะเป็น 21px - ดูว่ามันมีลักษณะอย่างไรไม่ว่าจะเป็นในทางปฏิบัติและในทางทฤษฎี - และ11.25pxภายในรายการ

---

นอกจากนี้ยังเป็นเพียง FYI การปรับแต่งเพิ่มเติมที่ฉันชอบที่อื่น:

• ระยะขอบภายในเป็นศูนย์ (เช่นเฉพาะความสูงของบรรทัด) ที่แยกรายการออกหากเป็นเพียงรายการ "ธรรมดา" (กล่าวคือเมื่อรายการทั้งหมดไม่มีอะไรเลยนอกจากข้อความไม่มีรายการย่อยหรือย่อหน้า) จะทำให้รายการเหล่านี้มีขนาดกะทัดรัดมากขึ้นและเหนียวแน่น

  ฉันไม่รู้ว่าคุณสามารถใช้งานได้หรือไม่เนื่องจาก HTML ที่คุณต้องใช้

  ฉันคิดว่าฉันจำวาทกรรมที่ทำเช่นนี้ได้ - ระยะขอบระหว่างรายการจะกว้างขวางหากคุณแก้ไข markdown เพื่อทำให้รายการใด ๆ ซับซ้อน

• รายการง่ายๆนี้โดยไม่มีระยะขอบแนวตั้งภายในอาจทำโดยมีระยะขอบครึ่งบรรทัดระหว่างตัวมันเองกับย่อหน้าก่อนหน้าซึ่งแนะนำมัน (ดังนั้นมันจะเกาะติดหรือไหลจากย่อหน้าก่อนหน้า)

  ฉันคิดว่าในการใช้สิ่งนี้ CSS ของคุณอาจต้องกำหนดระยะขอบบนสำหรับทุกอย่างแทนที่จะเป็นระยะขอบล่าง

Answer 30

คำขอคุณลักษณะ

ประการแรกความแตกต่างระหว่าง1.3และ1.6สำหรับการเปลี่ยนแปลง line-height ใหม่เป็นจริงไม่ได้1.45 1.5ประการที่สองฉันต้องการเพิ่มความสูงของเส้นเป็นตัวเลือกในการตั้งค่าซึ่งจะเป็นการปรับปรุงการเข้าถึงที่แท้จริง