नई पोस्ट स्वरूपण

Aug 26 2020

अपडेट ३

मुझे जितना चाहिए था, उससे अधिक समय लग गया, लेकिन हमारे s-proseघटक पर आपको कुछ अपडेट मिले हैं। आप हमारे डिजाइन सिस्टम के रेपो पर मेरी सोच के साथ पुल अनुरोध देख सकते हैं । यह निम्न कार्य करता है:

  1. s-proseबेहतर समूहीकरण के लिए पैराग्राफ से हेडर फैलता है ।
  2. s-proseपैराग्राफ को थोड़ा ऊपर खींचता है , और यह सुनिश्चित करता है कि शीर्षकों के नीचे रिक्ति अधिक सुसंगत है।
  3. s-proseएक सीएसएस चर के साथ घटक के लिए सभी मार्जिन को बदलता है var(--s-prose-spacing)ताकि हमारे उपयोगकर्ता अपने ब्राउज़र और उपयोगकर्ता स्क्रिप्ट में इसके साथ अधिक आसानी से छेड़छाड़ कर सकें।
  4. में मार्जिन को मारता है s-prose

आप हमारे स्टैक डॉक्यूमेंटेशन में सामग्री के कुछ उदाहरण देख सकते हैं ।


अपडेट २

मैंने मूल 1.3लाइन-ऊंचाई और प्रस्तावित 1.6लाइन-ऊँचाई के बीच अंतर को विभाजित किया है । अब हम तत्वों के बीच1.5 अंतर करने के लिए अतिरिक्त परिशोधन के साथ हैं। मैंने मूल मान के पास कोड ब्लॉक के भीतर लाइन की ऊंचाई भी कम कर दी है।


अपडेट १

यह अब लाइव है।


हम अपनी पोस्ट फ़ॉर्मेटिंग पर थोड़ा सा सुधार कर रहे हैं। वर्तमान में, हम लेआउट और स्टाइलिंग नामक एकल वर्ग को लागू करते हैं .post-text। हमारा पहला लक्ष्य हमारे पाठ शैलियों से लेआउट को अलग करना है। काफी सरल!

हालाँकि, हमारी वर्तमान पोस्ट स्टाइलिंग में सुधार के लिए कुछ गायब स्पॉट और क्षेत्र हैं। सैंडबॉक्स के रूप में हमारे डिजाइन सिस्टम का उपयोग करते हुए , हमने अपनी स्टाइलिंग को उभारा है और एक नया घटक बनाया है .s-prose। यह CommonMark कल्पना की अनुमति देता है सब कुछ के लिए स्टाइल की पेशकश करने के लिए बनाया गया है । यह हमें स्टैक ओवरफ्लो-फ्लेवर्ड स्टाइल को जोड़ने की अनुमति देनी चाहिए, कहीं भी हमें मार्कडाउन का उपभोग करने की आवश्यकता है - प्रश्न और उत्तर, निश्चित रूप से, लेकिन उपयोगकर्ता प्रोफाइल जैसी चीजें भी।

हमारे .s-proseघटक कहते हैं:

  1. परिभाषा सूचियों के लिए उचित प्रारूपण

  2. इसके अलावा हेडर का समर्थन और बेहतर रिक्ति

  3. अतिरिक्त blockquoteशोधन।

  4. बिगाड़ने वालों का खुलासा करने के लिए शोधन अब हम डिवाइस पर अधिक सुसंगत अनुभव के लिए क्लिक / टैप पर इसे प्रकट करते हैं - कम आकस्मिक रूप में अच्छी तरह से पता चलता है, क्योंकि यह अब :hoverबातचीत नहीं है। फिर से क्लिक करता नहीं स्पॉइलर छिपाना। हम अब शीर्ष दाएं कोने में एक बैज भी जोड़ते हैं। आप देख सकते हैं कि ये हमारे डिजाइन सिस्टम प्रलेखन पर कैसे काम करते हैं । यह कुछ इस तरह दिखता है:

    यह एक बिगाड़ने वाला है
    इसमें दो लाइनें हैं

  5. नेस्टेड सूचियों, सूची के भीतर छवियों सहित रिक्ति के लिए सामान्य शोधन

  6. विभिन्न संदर्भों के लिए आकार बदलना। हम पेशकश करते हैं xs, smऔर के mdरूपांतर। s-proseघटक।

सब कुछ के साथ, हमारे गद्य घटक प्रगति पर एक काम है। हमें लगता है कि हमें एक पुन: प्रयोज्य घटक के लिए एक शुरुआत की एक बिल्ली मिल गई है। हम गुरुवार, 27 अगस्त, 2020 को नए घटक नेटवर्क के साथ लाइव होने की योजना बना रहे हैं। यदि यह परिवर्तन होता है तो हम इस पोस्ट को संपादित करेंगे।

यदि आप कुछ कायरतापूर्ण देखते हैं, तो हमें बताएं। कुछ चीजें अभिप्रेत हैं, लेकिन ऐसा महसूस हो सकता है कि प्रतिगमन-छवियों में थोड़ी भिन्न आधार रेखा है - लेकिन अन्य दरार से फिसल सकते हैं।

जवाब

241 Tinkeringbell Aug 27 2020 at 22:08

स्थिति-ByDesign

पाठ की पंक्तियों ( line-height) के बीच व्हाट्सएप की मात्रा बदल गई है। मुझे नहीं पता कि यह जानबूझकर है, लेकिन मुझे पुराना अच्छा लगा। क्या इसे बदलने का एक अच्छा कारण था, या क्या हम इसे वापस ले सकते हैं? मैं एक के लिए पुराने को बेहतर पसंद करता हूं, क्योंकि नया मेरे लिए अक्षरों को 'नृत्य' थोड़ा अधिक बनाता है, यह सिर्फ अच्छी तरह से नहीं पढ़ता है।

पुराना:

नया:


सम्बंधित:

  • कृपया लाइन-ऊँचाई परिवर्तन को वापस करें!
  • खराब दृष्टि वाले लोगों के लिए लाइनों के बीच रिक्ति को समायोजित करने की संभावना के लिए अनुरोध करें
  • पुरानी लाइन की ऊँचाई वापस पाने के लिए उपयोगकर्तास्क्रिप्ट
  • क्या लाइन रिक्ति के परिवर्तन के साथ एक अद्यतन था?
126 WJS Aug 27 2020 at 22:30

ठीक है, यहाँ दो सुझाव हैं।

सबसे पहले, कृपया मूल पंक्ति रिक्ति पर वापस जाएँ। मुझे यह पढ़ने में कठिन लगता है।

दूसरा, कृपया इस बारे में सभी को संदेश भेजें और इसकी घोषणा करने के लिए मेटा साइडबार पर भरोसा न करें। मुझे वास्तव में लगा कि मेरा ब्राउज़र खराब हो गया है या मैंने कहीं विकल्प बदल दिया है। मैंने विभिन्न ब्राउज़रों की कोशिश की, मेरी मशीन को रिबूट किया, आदि और फिर स्टैक ओवरफ्लो की खोज करने का फैसला किया। सभी क्योंकि मैं सोच भी नहीं सकता था कि बड़ी घोषणा के बिना ऐसा कुछ होगा। ऐसा करने से दूसरों का समय बर्बाद करने से रोका जा सकेगा।

66 user289905 Aug 27 2020 at 21:52

बग स्थिति-पूर्ण

स्पॉइलर में लिंक केवल मध्य-क्लिक के साथ क्लिक करने योग्य हैं

उदाहरण:

यह लिंक बाएं क्लिक के साथ क्लिक करने योग्य नहीं है, लेकिन केवल मध्य-क्लिक के साथ - यह तब एक नए टैब में खुलता है और सीधे क्लिक करने का कोई तरीका नहीं है।

मोबाइल पर, लिंक खोलने के लिए, आपको तब तक टैप और होल्ड करना होगा जब तक कि लिंक मेनू प्रकट न हो जाए, जहां आप "नए टैब में लिंक खोलें" विकल्प चुन सकते हैं।

इसके अलावा, लिंक पर मँडरा हमेशा स्थिति पट्टी में लिंक URL से पता चलता है, लेकिन यह एक छोटी सी समस्या है।

मुझे लगता है कि सबसे अच्छा समाधान स्पॉइलर पर क्लिकों को प्रचारित नहीं करना होगा यदि कुछ इंटरैक्टिव तत्व पर क्लिक किया जा रहा है, लेकिन केवल अगर स्पॉइलर पहले से ही पता चला है । यदि स्पॉइलर अभी तक प्रकट नहीं हुआ है, तो स्पॉइलर के अंदर कहीं भी एक बायाँ-क्लिक पहले स्पॉइलर को प्रकट करना चाहिए। 1 मैं एक अदृश्य लिंक पर क्लिक करके दूर नहीं जाना चाहता।

मैंने GitHub oneboxes (10k लिंक) का भी परीक्षण किया है जो समान समस्या को प्रदर्शित करता है। यह आकस्मिक रूप से स्पॉइलर में स्टैक स्निपेट्स को भी ठीक करेगा ।

बेशक, बाद के दो किनारे के मामले हैं, और नियमित लिंक अधिक सामान्य मामला है, लेकिन यह एक पत्थर से तीन पक्षियों को मार देगा।


1 उपयोगकर्ता 41686d6564 ने बताया कि मध्य-क्लिक और राइट-क्लिक से स्पॉइलर को प्रकट नहीं करना चाहिए। हालांकि यह टिप्पणी अस्पष्ट वाक्यांशों से उत्पन्न हुई है, मैं खुद वास्तव में निश्चित नहीं हूं कि कैसे अन्य बॉयलरों पर मध्य-क्लिक या राइट-क्लिक को संभालना है। उन्हें अनदेखा करना (यानी स्पॉइलर का खुलासा नहीं करना, लेकिन फिर भी डिफ़ॉल्ट ब्राउज़र सुविधाओं, जैसे संदर्भ मेनू की अनुमति देना) शायद एक अच्छा विकल्प है।

59 Rubiksmoose Aug 27 2020 at 21:48

बग स्थिति-पूर्ण

इसमें बिगाड़ने वाले टेक्स्ट परिणामों को खींचने और चयन करने की कोशिश की जा रही है

अनायास व्यवहार जैसा लगता है।

40 CertainPerformance Aug 28 2020 at 01:58

बग

कोड ब्लॉक ( <pre>एस) की पृष्ठभूमि अब हल्की है, जिससे सफेद पृष्ठभूमि से एक नज़र में (हर जगह लेकिन स्टैक ओवरफ्लो के अंधेरे मोड पर) भेद करना कठिन हो जाता है।

पहले, साथ background-color: var(--black-050);या #EFF0F1सफेद पर:

अब, साथ background-color: var(--highlight-bg);, या #F6F6F6सफेद पर:

पहले संस्करण के साथ, यह एक नज़र में बिल्कुल स्पष्ट था जहां कोड ब्लॉक की सीमाएं हैं। अब, मेरे पास सबसे बेहतर आंखें हैं, लेकिन यहां तक ​​कि मेरे मॉनिटर पर भी, सीमाएं असुविधाजनक रूप से अविवेकी दिखती हैं।

Another example code block

(पृष्ठभूमि रंग का उपयोग करना inline <code>बहुत अच्छा होगा IMO)

38 frеdsbend Aug 28 2020 at 03:01

मैंने देखा कि ब्लॉकचॉट्स पर टेक्स्ट का रंग अब बहुत हल्का है। मेरे लिए पढ़ना कठिन है, और मेरी दृष्टि अच्छी है।

वर्तमान शैली है .s-prose blockquote {color:var(--black-600)}। इसे पूरी तरह से हटा देना पाठ को अवरुद्ध करता है और इसे फिर से पढ़ने योग्य बनाता है।

यह पाठ बहुत हल्का है। कृपया इसे गहरा करें।

31 TylerH Aug 27 2020 at 21:59

बग स्थिति-बिसात स्क्रॉल बटन स्क्रॉल योग्य कोड विंडो में अदृश्य होते हैं

सुनिश्चित नहीं हैं कि यह ऊर्ध्वाधर स्क्रॉल बार को भी प्रभावित करता है, लेकिन क्षैतिज स्क्रॉल करने योग्य कोड विंडो अब वास्तविक स्क्रॉल बटन नहीं दिखाती हैं। वे अभी भी वहां हैं और क्लिक करने योग्य हैं, बस ... यह इंगित करने के लिए कोई कैरेट या कुछ भी नहीं है यह एक दिशात्मक स्क्रॉल बटन है।

(ये स्क्रॉल विंडो जहाँ तक संभव हो, बाईं ओर स्क्रॉल की गई हैं):

और प्रकाश मोड:

28 Sweeper Aug 28 2020 at 08:13

बग

इनलाइन कोड की पृष्ठभूमि कोड ब्लॉक की पृष्ठभूमि से अलग है।

यह उन्हें "अलग-अलग चीजों" की तरह दिखता है जब वास्तव में वे सभी बस कोड होते हैं , और उसी तरह से स्वरूपित किया जाना चाहिए।

लाइव उदाहरण (SO डार्क मोड पर अंतर अधिक महत्वपूर्ण है):

इनलाइन कोड: this is inline code

एक कोड ब्लॉक:

this is a code block
26 ChrisW Aug 26 2020 at 13:55

स्थिति-पूरा

क्या कोई सार्वजनिक स्थान / पृष्ठ / साइट है जहां यह पहले से ही सक्षम है, जहां मैं इसका परीक्षण कर सकता हूं (अपनी जिज्ञासा या संभावित रूप से किसी समस्या की रिपोर्ट करने के लिए), इससे पहले कि यह हर जगह लाइव हो जाए?

आपने लिखा, "यदि आपको कुछ कायरता दिखाई देती है, तो हमें बताएं।" - मैं कहाँ देख सकता हूँ?


मैं जानना चाहता हूँ कि यह कैसा दिखता है:

  • सामग्री सूचीबद्ध करें

    सूची सूची

  • सामग्री सूचीबद्ध करें

    सूची सूची

    • सब आइटम
    • सब आइटम

    सूची सूची

आपने "नेस्टेड सूचियों सहित रिक्ति के लिए सामान्य परिशोधन" का उल्लेख किया है, इसलिए मुझे यह जानने की उत्सुकता है कि क्या आपने यह तय किया है - यानी कि आईएमओ को अंतिम उपप्रभु और अगली सूची पैराग्राफ के बीच ऊर्ध्वाधर व्हाट्सएप होना चाहिए।

वर्तमान में पहली सूची पैराग्राफ के बारे में भी कुछ मजेदार है: सूची पैराग्राफ से पहले पहली सूची आइटम के बाद 15px मार्जिन, और दूसरी सूची आइटम से पहले सूची पैराग्राफ के बाद केवल 7.5px मार्जिन।

आपके उदाहरण https://stackoverflow.design/product/components/prose/ सुझाव देता है कि आप इनमें से दूसरा तय कर लें - मार्जिन अब हर जगह 7.5px है - लेकिन मुझे ऊपर के पहले परिदृश्य का परीक्षण / उदाहरण नहीं दिखता है।

26 Glorfindel Aug 27 2020 at 22:02

बग स्थिति-पूर्ण

जब इसमें एक स्पॉइलर के साथ एक प्रश्न पूछा जाता है, तो मैं नए 'रिवील स्पॉइलर' बैज पर क्लिक कर सकता हूं जितनी बार मैं चाहता हूं, लेकिन यह कुछ भी प्रकट नहीं करता है।

जब आप उत्तर लिख रहे हों तो यह काम करता है:

25 mkrieger1 Aug 27 2020 at 22:36

बग स्थिति-समीक्षा

इनलाइन कोड फ़ॉर्मेटिंग वाले लिंक अजीब लगते हैं।

डेबियन में फ़ायरफ़ॉक्स 68.11.0esr (64-बिट) का उपयोग कर स्क्रीनशॉट:

जब मँडरा, एक सामान्य लिंक की तुलना में थोड़ा हल्का नीला ध्यान देने योग्य नहीं है।

कम से कम नीली लिंक अंडरलाइन नियमित अंडरस्कोर के नीचे है।

विंडोज 10 में फ़ायरफ़ॉक्स 73.0.1 (64-बिट) का उपयोग कर स्क्रीनशॉट:

वास्तविक उदाहरण: __index__

23 Jenayah Aug 28 2020 at 00:25

बग स्थिति-पूर्ण

इटैलिक मोबाइल वेब पर प्रस्तुत नहीं करता है। बोल्ड मार्कडाउन के साथ कोई स्पष्ट मुद्दे नहीं। एंड्रॉइड 5.1.1, क्रोम 84.0। इस फ़ॉर्मेटिंग सैंडबॉक्स उत्तर का स्क्रीनशॉट :

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

आज सुबह यह ठीक काम कर रहा था, इससे पहले कि परिवर्तन लाइव हो गया।

21 BardicWizard Aug 28 2020 at 02:30

बग स्थिति-पूर्ण

मोबाइल पर (विशेष रूप से "पूर्ण साइट" बटन, एक iPhone पर क्लिक करके एक्सेस किए गए दृश्य पर), कम से कम RPG.SE और Puzzling.SE पर, प्रश्नों और उत्तरों में शरीर का पाठ सिकुड़ गया है। तुलना में टिप्पणियाँ, शीर्षक और शीर्षक बिल्कुल सिकुड़े हुए नहीं लगते हैं।

मैं निकटता के लिए चश्मा पहनता हूं, और मैं रोज एसई का उपयोग करता हूं। अपने फोन पर अब मुझे इसे अपनी आंखों के 6 इंच के भीतर पकड़ना चाहिए ताकि इसे अच्छे से देख सकें। मैं लगभग एक फुट की दूरी से सबसे अच्छा देखने में सक्षम था। यह कुछ ऐसा है जिसे मैं अनहेल्दी पाता हूं जैसे कि मैं पेज जूम बढ़ाता हूं, बाकी सब भी बढ़ता है, जो जरूरी नहीं है।

क्या आप मोबाइल पर टेक्स्ट बड़ा सकते हैं?

18 einpoklum Sep 05 2020 at 04:03

मैं पाठकों का ध्यान आकर्षित करना चाहता हूं, विशेष रूप से @AaronShekey का, इस तथ्य के लिए कि डब्ल्यू 3 सी वास्तव में 1.5 या उससे अधिक की ऊंचाई को निर्धारित करने की अनुशंसा नहीं करता है ।

प्रासंगिक सिफारिशें WCAG मानदंड 1.4.12 (पाठ रिक्ति) और 1.4.8 (दृश्य प्रस्तुति) प्रतीत होती हैं।

पाठ रिक्ति के संबंध में मानदंड 1.4.12 पढ़ता है:

निम्न पाठ शैली गुणों का समर्थन करने वाली मार्कअप भाषाओं का उपयोग करके लागू की गई सामग्री में, सामग्री या कार्यक्षमता का कोई नुकसान निम्नलिखित में से सभी को सेट करके और कोई अन्य शैली गुण बदलकर नहीं होता है:

  • कम से कम 1.5 गुना फ़ॉन्ट आकार के लिए लाइन की ऊंचाई (लाइन रिक्ति);
  • (आदि।)

तो यह कोई आवश्यकता नहीं है, या एक सिफारिश, लाइन ऊंचाई सेटिंग के लिए - यह एक आवश्यकता है कि अगर लाइनें अधिक स्थान-बाहर सेट की जाती हैं, तो साइट / वेबपेज अनुपयोगी या बेकार नहीं हो जाते हैं, और कोई सामग्री अदृश्य नहीं हो जाती है / दुर्गम।

W3C दस्तावेज़ का शीर्षक "अंडरस्टैंडिंग सक्सेस क्रैशन 1.4.12: टेक्स्ट स्पेसिंग" इस पर जोर देता है (मेरा):

इस सफलता मानदंड (SC) का उद्देश्य यह सुनिश्चित करना है कि लोग अपने पढ़ने के अनुभव को बेहतर बनाने के लिए लेखक द्वारा निर्दिष्ट पाठ रिक्ति को ओवरराइड कर सकते हैं ।

सिफारिश कुछ पाठकों की जरूरतों को पूरा करने के लिए सेटिंग्स के ओवरराइडिंग का समर्थन करने के लिए है - डिफ़ॉल्ट सेटिंग्स को बदलने के लिए नहीं ।

WCAG मानदंड 1.4.8 दृश्य प्रस्तुति के बारे में है (जोर मेरा):

पाठ के ब्लॉकों की दृश्य प्रस्तुति के लिए , निम्नलिखित प्राप्त करने के लिए एक तंत्र उपलब्ध है : (स्तर एएए)

... स्निप ...

लाइन रिक्ति (अग्रणी) पैराग्राफ के भीतर कम से कम जगह-और-आधा है, और पैराग्राफ रिक्ति लाइन रिक्ति की तुलना में कम से कम 1.5 गुना बड़ा है।

तो, डिफ़ॉल्ट नहीं है, लेकिन कुछ तंत्र के माध्यम से प्राप्त करने योग्य है।

@MaxD कसौटी 1.4.8 के संबंध में एक "तकनीक" दस्तावेज से जुड़ा है जिसमें 1.5 और 2 के बीच लाइन रिक्ति प्रदान करने के महत्व का उल्लेख है, लेकिन:

  • वह दस्तावेज आधिकारिक WCAG नहीं है।
  • "प्रदान करना" का अर्थ "डिफ़ॉल्ट होना" नहीं है। वास्तविक WCAG स्पष्ट करता है कि आशय उस सेटिंग को बनाने के लिए तंत्र प्रदान कर रहा है। उदाहरण के लिए, साइट-स्तर प्रति उपयोगकर्ता उस प्रभाव के लिए सेटिंग।
  • मानदंड 1.4.8 एएए-स्तर के अनुरूपता का संबंध है। यह स्तर सामान्य उपयोग के लिए (WCAG दस्तावेज़ के अनुसार), लेकिन अधिक सुगम्यता-विशेष साइटों के लिए अभिप्रेत नहीं है।

कारण प्रकटीकरण: मैंने इसे इस संबंधित चर्चा पर उत्तर के रूप में पोस्ट किया है ।

17 TheLethalCarrot Aug 28 2020 at 15:08

आइए हम बिगाड़ने वालों को फिर से छिपाते हैं

महत्वपूर्ण लेख मांगना

ऐसा लगता है कि फिर से छिपाने के लिए लिंक को क्लिक किया जा सकता है और टेक्स्ट ड्रैग किया गया है, ब्लॉक करने के लिए वर्कअराउंड के साथ फिसल गया है, इस मामले पर टिप्पणी देखें ।

यह तय हो गया है। अंतर्निहित लिंक का कोई और अधिक भूत क्लिक नहीं। स्पॉयलर स्पॉइलर के भीतर कहीं भी किसी भी बाएं क्लिक पर प्रकट होता है। फिर से क्लिक करने से स्पॉइलर को फिर से छिपाया नहीं जाता है (बल्कि इसकी सामग्री को अपने स्वयं के क्लिक को संभालने की अनुमति देता है) - बेन केली re

यह देखते हुए कि यह पाठ के आकस्मिक खुलासा को कम करने में मदद करने के लिए पेश किया गया है, हमें उपयोगकर्ताओं को फिर से पाठ को छिपाने देना चाहिए। आकस्मिक क्लिक अभी भी होने जा रहे हैं और भले ही वे हमें अभी भी उपयोगकर्ताओं को उन सामग्रियों को फिर से छिपाने का मौका नहीं देना चाहिए जिन्हें वे नहीं देखना चाहते हैं।

अब हम डिवाइस पर अधिक सुसंगत अनुभव के लिए क्लिक / टैप पर इसे प्रकट करते हैं - कम आकस्मिक रूप में अच्छी तरह से पता चलता है, क्योंकि यह अब नहीं है: हॉवर इंटरैक्शन। फिर से क्लिक करता नहीं स्पॉइलर छिपाना।

ऐसा लगता है कि इस कार्यक्षमता को समस्या को हल करने के लिए कुछ और के बजाय समस्या को हल करने के लिए हटा दिया गया था। हालांकि लिंक पर क्लिक करना / टेक्स्ट का चयन करना और स्पॉइलर को फिर से छुपाना संभव हो सकता है। अधिकांश स्थान दोनों विकल्प देते हैं और यदि मुझे सही ढंग से याद है कि पुराना स्पॉइलर फॉर्मेटिंग उस विकल्प को भी देता है। यह गलत दिशा में एक कदम की तरह लगता है।

17 Prid Aug 29 2020 at 05:16

आइए हम प्रोग्रामर के रूप में सबसे अच्छा क्या करते हैं;)

ERevert स्टैक एक्सचेंज फ़ॉर्मेटिंग⭐

  • Google Chrome एक्सटेंशन (अनुकूलन)
  • ग्रीसीमोनीक / टैम्परमॉन्की स्क्रिप्ट | (केवल पंक्ति-ऊंचाई)
  • स्टाइलिश विषय (+ स्टाइलस) - | [डार्क मोड]

कृपया अपडेट करें! : कोड ब्लॉकों में नए बदलावों को ठीक करने के लिए अद्यतन (24 सितंबर, 2020)

मोबाइल:

  • सीमित समाधान: प्रति पृष्ठ क्लिक सक्रिय जावास्क्रिप्ट (iOS, Android)
  • कीवी ब्राउज़र (Android) - ऊपर क्रोम एक्सटेंशन स्थापित करें (परीक्षण नहीं किया गया)

योगदान:

GitHub रिपॉजिटरी - मुझे विश्वासपूर्वक इसे वापस लाने में मदद करें!

16 Glorfindel Aug 27 2020 at 22:13

स्थिति-पूरा

सहायता केंद्र का लेख मार्कडाउन संपादन मदद के लिए कुछ प्यार की जरूरत है:

विफल

पाठ के एक निश्चित टुकड़े को छिपाने के लिए और यह तभी दिखाई दे सकता है जब उपयोगकर्ता माउस को ऊपर ले जाता है , एक अतिरिक्त विस्मयादिबोधक बिंदु के साथ ब्लॉकक्वाइन सिंटैक्स का उपयोग करें:

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

नई स्थिति को दर्शाने के लिए मेरे द्वारा बोला गया हिस्सा अपडेट किया जाना चाहिए।

16 Pandya Aug 28 2020 at 13:39

महत्वपूर्ण लेख मांगना

अतिरिक्त अवरोधक शोधन।

यह शोधन उद्धरण पर जोर देने जैसा लगता है!

ब्लॉकचोट पर जोर देने के बजाय, मैं उचित पृष्ठभूमि का उपयोग करके सामान्य पाठ के साथ ब्लॉकक्वाइट को अलग करने का सुझाव देता हूं। मैं उपयोगकर्ताओं के सर्वसम्मति के बारे में सूचित करना चाहूंगा जो कि प्रारूपण का उल्लेख करते हुए ब्लॉकचोट फ़ॉर्मेटिंग के लिए होगा:

(118 शुद्ध उत्तोलन) कृपया सफ़ेद से पीले रंग की बोली की पृष्ठभूमि वापस करें

वर्तमान अवरोधक स्वरूपण को जल्द से जल्द ठीक करने की आवश्यकता है। मुझे उम्मीद है कि इस पर विचार किया जाएगा।

14 JourneymanGeek Aug 28 2020 at 11:14

इसके खिलाफ टिप्पणियों को ध्यान में रखते हुए - मुझे वास्तव में पढ़ने के लिए नई रिक्ति आसान लगती है।

मैं डिस्लेक्सिक हूँ - और मेरे द्वारा किए गए 'रूपांतरों' में से एक है (और यह एक सकारात्मक नहीं है) क्या मुझे पढ़ा जाता है। चूंकि मैं एक बार में कम चीजें ले रहा हूं, और धीमा कर रहा हूं, यह मुझ पर कम तनावपूर्ण है।

मुझे नहीं पता था कि यह एक विकल्प था या अगर यह मदद भी करेगा, लेकिन ऐसा लगता है, और बहुत नाटकीय रूप से।

जैसा कि किसी को "आपके समग्र दर्शकों के रूप में एक मामूली अंश" के रूप में वर्णित किया गया है, कुछ ठीक करने के लिए धन्यवाद, जो मुझे कभी भी महसूस नहीं हुआ था कि वह टूट गया था, और मेरे लिए जीवन परिवर्तन का एक बड़ा गुण प्रतीत होता है।

मैं कोड की लाइनों के बीच कम जगह होने के तर्क को देखता हूं (मोनिका ने यहां कुछ कहा है , हालांकि उनके मामले में मैं उसे यहां के बजाय ट्विटर पर उल्लेख करना समझता हूं, और मुझे उम्मीद है कि उसने मुझे यहां पुन: पेश करने के लिए माफ कर दिया है)।

बड़ी, निश्चित लाइन रिक्ति (w / o संबंध फॉन्ट फेस के लिए), लगभग डबल-स्पेस, इसलिए पैराग्राफ को देखने के लिए एक पैराग्राफ और कठिन पढ़ने पर इसे ट्रैक करना कठिन है। कोड ब्लॉक के लिए, अब स्क्रीन पर कम फिट बैठता है; कोड केवल क्रमिक रूप से गद्य की तरह नहीं पढ़ा जाता है। अपरिवर्तित b / c आकार को ज़ूम आउट नहीं किया जा सकता है।

मैं व्यक्तिगत रूप से अपने पैराग्राफ को अलग बताने वाला एक मुद्दा नहीं देख रहा हूं, और मैं उनमें से बहुत से पाठ की दीवारों को तोड़ने में उपयोग करता हूं, लेकिन अन्य हो सकता है। मुझे डर है कि मुझे यह बताने के लिए कि यह कैसे काम नहीं करता है एक उत्तर पोस्ट करने के लिए इसे छोड़ना होगा।

13 Glorfindel Aug 27 2020 at 22:03

बग स्थिति-पूर्ण

नया स्पॉइलर डिस्प्ले टैग विकिस पर सही तरीके से काम नहीं कर रहा है, जैसे कि स्पॉइलर के बारे में । दिखाया 'बिगाड़ने वाला' बैज दिखाया गया है:

लेकिन सामग्री पहले से ही इस पर मंडराते हुए दिखाई देती है (जो कि पुराना व्यवहार है)।

13 einpoklum Sep 01 2020 at 22:09

मैं यह देखने में विफल हूं कि उस प्रारूपण में महत्वपूर्ण परिवर्तनों के साथ पोस्ट स्टाइलिंग कोड का पुन: निर्धारण क्यों लागू किया जाता है। मेरे अनुभव में यह सामान्य ज्ञान है कि आप उपयोगकर्ता के सामना करने वाले व्यवहार को बदलने के बिना सबसे पहले अपना बुनियादी ढांचा तैयार करते हैं (जितना संभव है यह संभव है), फिर नए बुनियादी ढाँचे पर आराम करते हुए व्यवहार परिवर्तन करें।

मुझे यह देखकर भी निराशा हुई कि दुर्भाग्यपूर्ण स्पेसिंग आउट ऑफ लाइन्स चली गई, इसे देखते हुए:

  • उपयोगकर्ताओं से बड़े पैमाने पर नकारात्मक प्रतिक्रिया मिली है।
  • बहुत अधिक / कोई सकारात्मक प्रतिक्रिया नहीं हुई है।
  • लाइन स्पेसिंग बढ़ाने का तर्क, यहां तक ​​कि जब अंकित मूल्य पर लिया जाता है, तो सामान्य रूप से लोगों की एक छोटी अल्पसंख्यक (कुछ विकलांग लोगों के संबंध में), और साइट के उपयोगकर्ता आधार के एक छोटे से अल्पसंख्यक होने की संभावना है; जिसके लिए यह एक विकल्प पेश करने के लिए और अधिक समझ में आता है।
  • लाइन रिक्ति बहुत छोटा होने के बारे में उपयोगकर्ताओं से कोई शिकायत नहीं की गई है, न ही कोई उपयोगकर्ता समूह अध्ययन जो इस निष्कर्ष पर पहुंचे हैं; कम से कम, यह नहीं कि हम जानते हैं।
  • 1.3 के अंतर पर लाइनों को ट्रैक करने वाले कुछ उपयोगकर्ताओं के लिए कथित कठिनाई वास्तव में प्रकट होने पर कोई मूल्यांकन नहीं किया गया है।
  • विपरीत प्रभाव का कोई आकलन नहीं किया गया है: जब वे बहुत दूर तक फैले होते हैं तो ट्रैकिंग लाइनों की कठिनाई । इसके अलावा, पैराग्राफ के बीच के अंतर को स्पष्ट रूप से देखना।
  • परिवर्तन के नेटवर्क पर लाइव होने से पहले कोई भी मोनोपॉज़ेड टेक्स्ट-आर्ट से संबंधित नहीं था।
  • (संपादित करें: W3C क्या करता है और वास्तव में सिफारिश नहीं करता है, इस बारे में मेरा अलग जवाब देखें ।)

"अंतर को विभाजित करना" की प्रतिक्रिया, और फिर भी शिकायत को नज़रअंदाज़ करने से बेहतर, आगे बढ़ना, कार्रवाई का उपयुक्त कोर्स नहीं है। एक बार जब यह पहचान लिया जाता है कि कोई समस्या है - जल्दबाजी में किए गए बदलाव को "हल किया" के बजाय देरी और आगे देखा जाना चाहिए।

11 Rob Aug 28 2020 at 16:23

स्थिति की समीक्षा

एक अन्य उपयोगकर्ता का दावा है कि पाठ सिकुड़ गया है , जबकि मैं फ़ायरफ़ॉक्स एंड्रॉइड पर स्वीकार्य सीमा के भीतर परिवर्तन पाता हूं; लेकिन Chrome Android पर पाठ पहले की तुलना में बहुत बड़ा है:

जैसा कि आप क्रोम के साथ देख सकते हैं, पोस्ट के फोंट के आकार और (उदाहरण के लिए) सही कॉलम "लिंक्ड" सूची फोंट के बीच का अंतर महत्वपूर्ण है। क्रोम पर दृश्य फ़ायरफ़ॉक्स पर दृश्य के समान दिखाई देता था (जो अब अलग भी है, लेकिन भयानक नहीं है)।

क्रोम के पोस्ट के नए बड़े फ़ॉन्ट आकार के साथ प्रत्येक पंक्ति पर बहुत कम पाठ फिट बैठता है, मूल रूप से 50% के रूप में ज्यादा जानकारी स्क्रीन क्षेत्र की एक ही राशि में प्रस्तुत की जा रही है।

मैं समझता हूं कि मैं अपने ब्राउज़र में फोंट के आकार को समायोजित कर सकता हूं, लेकिन मैं नहीं चाहता कि कुछ बहुत छोटे हों या अन्य वेबसाइटों पर जाने के लिए कुछ अन्याय हो - बदलावों से पहले सब कुछ ठीक था।

[नोट: जब मैंने इसे फ़ायरफ़ॉक्स पर देखा, तो सुधार के लिए धन्यवाद, मैंने घोषणा को रद्द कर दिया, लेकिन अब इसे क्रोम (और अन्य सभी शिकायतों) पर देखकर मुझे यह मेरे पिछले समर्थन के अयोग्य लगता है।]

मुझे यह दिखाने का एक तरीका मिला कि विभिन्न तत्वों के लिए सीएसएस का उपयोग किस प्रकार किया जा रहा है, एंड्रॉइड किवी ब्राउज़र (77.0.3865.92) क्रोम आधारित है और एक्सटेंशन की अनुमति देता है - यहां वेबपृष्ठों के बारे में "सीएसएस पीपर" एक्सटेंशन कहते हैं: टिप्पणी फ़ॉन्ट बड़ा लगता है , एच 2 फ़ॉन्ट-आकार 34.3 है और एच 3 33.3 (लगभग एक ही) है, प्रश्न हाइपरलिंक 13 पीएक्स पर सामान्य दिखता है , जबकि नियमित पाठ 29.8 पीएक्स और पी को सौंपा गया है ।

सैमसंग S9 + फ़ायरफ़ॉक्स एंड्रॉइड 80.0.1-beta.2 (# 2015758611 का निर्माण) और क्रोम 85.0.4183.81 के साथ

9 Prid Sep 01 2020 at 09:22

अधिक शीर्ष आकारों के लिए समर्थन जोड़कर, h1अब बहुत बड़ा दिखता है और कुछ पुराने पोस्टों को तोड़ता है:

पद: https://stackoverflow.com/a/38025376/3705191

पुराने h1आकार (या #एमडी में) वर्तमान h2फ़ॉन्ट आकार के करीब था , और ऊपर दिए गए स्क्रीनशॉट के लेखक ने इसके आकार के कारण इसे h2 शीर्षक के रूप में देखा। आकार में वृद्धि से अभिप्रेत अर्थ बदल जाता है, और इस प्रकार लेखक का इरादा प्रारूपण हो जाता है। पहले एक सुसंगत उप-शीर्षक जैसा दिखता था, अब एक अलग लेख शीर्षक जैसा दिखता है।

मैं पुराने उत्तरों को उनके मूल इच्छित स्वरूपण के साथ यथासंभव संरक्षित रखना चाहूंगा।

8 Kulfy Aug 29 2020 at 22:39

बग स्थिति-पूर्ण

उपयोगकर्ता प्रोफ़ाइल पर स्पॉइलर को प्रकट करने का कोई तरीका नहीं है।

इसके अलावा, जब मैं प्रोफाइल को संपादित करते समय स्पॉइलर के मार्कडाउन कंटेंट पर माउस घुमाता हूं, तो "रिवाइल स्पॉयलर" विकल्प गायब हो जाता है।

प्रोफ़ाइल संपादित करते समय मेरे पास यही है:

और यह तब है जब मैंने माउस को मार्कडाउन सामग्री पर मँडरा दिया:

7 Raphael Sep 02 2020 at 12:40

रिवीलिंग स्पॉइलर के लिए थर्ड पार्टी जावास्क्रिप्ट की आवश्यकता होती है

... कौन से नए उपयोगकर्ता और पैरानॉइड (चाहिए) डिफ़ॉल्ट रूप से अवरुद्ध हो गए हैं; एक बुरा अनुभव परिणाम।

7 MartinTournoij Sep 05 2020 at 13:59

बग

एकल-पंक्ति सूचियों (बिना <p>) में रिक्ति की एक बड़ी मात्रा है:

  • नमस्ते
  • विश्व
  • परीक्षा

Markdown:

- Hello
- World
- Test

यह पैराग्राफ के साथ सूचियों की तरह ही दिखता है:

  • नमस्ते

  • विश्व

  • परीक्षा

Markdown:

- Hello

- Hello

- World

आइटम के बीच रिक्त लाइनों के बिना सूचियों को एक पैराग्राफ के रूप में प्रस्तुत नहीं किया जाना चाहिए (और वे नहीं, कोई <p>टैग नहीं ), और यह शायद एक पैराग्राफ की तरह नहीं दिखना चाहिए। यह मूल मार्कडाउन के बाद से एक विशेषता है , और कॉमनमार्क में भी है ।

एक जगह जहाँ यह वास्तव में कायरता दिखती है , मेरी प्रोफ़ाइल पर है ।

यह नीचे सीएसएस द्वारा निर्धारित किया गया है, और इसे हटाने से यह ठीक दिखता है:

.s-prose ol li, .s-prose ul li {
    margin-bottom: .7em;
}
6 KonradRudolph Sep 09 2020 at 19:30

यह देखते हुए कि डिजाइन सिस्टम प्रलेखन में स्पष्ट रूप से छोटे पाठ का उल्लेख है , क्या<small> मार्कडाउन पोस्ट में अनुमति प्राप्त HTML के रूप में अंततः टैग प्राप्त करने का एक मौका है ? के लिए मामला कई बार बनाया गया है और सबसे ज्यादा, लोगों ने उदारतापूर्वक दुरुपयोग <sup>/ <sub>/ दोनों को एक काम के रूप में किया है, इसलिए टैग को शुरू करने के खिलाफ सभी तर्क पहले से ही यथास्थिति (बदतर को छोड़कर) पर लागू होते हैं।

4 DavidW Sep 08 2020 at 04:56

कोड के आसपास लिंक मोबाइल साइट पर दिखाई नहीं देते हैं

मेरे उत्तर के स्क्रीनशॉट को देखें (जैसा कि यह एंड्रॉइड पर फ़ायरफ़ॉक्स और क्रोम दोनों पर दिखाई देता है):

ध्यान दें कि मैं "प्रलेखन मैं जुड़ा हुआ है" को संदर्भित करता हूं अभी तक कुछ भी जुड़ा हुआ नहीं दिखाई देता है।

वास्तव में मैंने वास्तव में फ़ंक्शन नाम के चारों ओर एक लिंक इस प्रकार डाला है

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

... का उपयोग करें PyArray_ZEROS...

यह बिना किसी संकेत के नियमित कोड की तरह दिखता है कि यह क्लिक करने योग्य है। (डेस्कटॉप पर यह एक नीली रेखांकन है तो थोड़ा अधिक स्पष्ट है)

3 ChrisW Aug 28 2020 at 15:44

"... तत्वों के बीच अंतर करने के लिए अतिरिक्त परिशोधन के साथ "

आप पहले से ही जानते होंगे, मैंने पढ़ा है कि कुछ डिज़ाइनर लाइन-हाइट के बराबर एक इंटर-पैरा मार्जिन की सलाह देते हैं - ताकि पैराग्राफ के बीच एक खाली लाइन हो - पेज पर लाइनों की "ग्रिड" पूरी तरह से नियमित हो, और अंतर-पैराग्राफ मार्जिन पूरी तरह से स्पष्ट है, यकीनन न तो बहुत बड़ा है और न ही बहुत छोटा है।

IMO के पास (और भीतर) सूची आइटमों के बीच एक आधा लाइन-ऊँचाई है, जैसा कि अब आपके पास है, एक बहुत अच्छा विचार है (सूची को अधिक कॉम्पैक्ट और एकजुट करने के लिए)।

मैं देख रहा हूँ आप वर्तमान में है ...

  • 15px फ़ॉन्ट-आकार
  • १.५ पंक्ति-ऊँचाई

... और इसलिए लाइन-ऊंचाई 22.5px है।

और आपके पास वर्तमान में है:

  • 21px इंटर-पैरा मार्जिन
  • सूचियों के भीतर 10.5px मार्जिन

ध्यान दें कि 21px 22.5px के करीब है - यही कारण है कि यह सिर्फ सही के बारे में दिखता है, IMO - बिल्कुल नहीं।

IMO एक 21px मार्जिन पूरी तरह से 1.4 लाइन-ऊंचाई (15px * 1.4 = 21px) के अनुकूल होगा।

इसलिए, यदि आप चाहते हैं या 1.5 की एक लाइन-ऊंचाई होनी चाहिए , तो मेरा सुझाव है कि आप 21px के बजाय 22.5px के अंतर-पैरा मार्जिन के साथ प्रयोग कर सकते हैं - देखें कि यह कैसा दिखता है, क्या यह व्यवहार में और साथ ही सिद्धांत में काम करता है - और सूची मदों के भीतर 11.25px ।


केवल FYI करें, एक अतिरिक्त शोधन जो मुझे कहीं और पसंद आया है:

  • शून्य आंतरिक मार्जिन (अर्थात केवल लाइन-हाइट्स) सूची वस्तुओं को अलग करना, यदि यह केवल एक "सरल" सूची है (अर्थात जब सभी सूची आइटमों में पाठ, कोई उप-सूची या पैराग्राफ के अलावा कुछ नहीं होता है) - जो इन सूचियों को अधिक कॉम्पैक्ट बनाता है और एकजुट

    मुझे नहीं पता कि क्या आप उस HTML को लागू कर सकते हैं, जिसे आपको काम करना है।

    मुझे लगता है कि मुझे याद है कि डिस्कोर्स ऐसा कर रहे हैं - यदि आप किसी आइटम को जटिल बनाने के लिए मार्कडाउन को संपादित करते हैं तो इंटर-लिस्ट-आइटम मार्जिन बहुत बड़ा हो जाता है।

  • यह एक सरल सूची है, जिसमें कोई आंतरिक ऊर्ध्वाधर मार्जिन नहीं है, वह अपने और पूर्ववर्ती पैराग्राफ के बीच की हाफ लाइन के साथ ऐसा कर सकता है जो इसका परिचय देता है (इसलिए यह पिछले पैराग्राफ से चिपक या बह जाता है)।

    मुझे लगता है कि इसे लागू करने के लिए आपके सीएसएस को मार्जिन-बॉटम के बजाय हर चीज के लिए मार्जिन-टॉप को परिभाषित करने की आवश्यकता हो सकती है।

3 Ollie Sep 15 2020 at 03:36

महत्वपूर्ण लेख मांगना

सबसे पहले, के बीच का अंतर 1.3और 1.6नई लाइन ऊंचाई परिवर्तन के लिए वास्तव में है 1.45, नहीं 1.5। दूसरा, मैं वरीयताओं में विकल्पों के रूप में लाइन-हाइट्स जोड़ना चाहूंगा, जो एक वास्तविक पहुंच सुधार होगा।