افزونه تایپوگرافی

تا کنون، تلاش برای استایل‌دهی به یک مقاله، سند، یا پست وبلاگ با Tailwind کاری خسته‌کننده بوده که نیاز به دقت در تایپوگرافی و CSS سفارشی پیچیده داشته است.

By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you really are just trying to style some content that came from a rich-text editor in a CMS or a markdown file, it can be surprising and unintuitive.

در واقع، ما شکایات زیادی در مورد آن دریافت می‌کنیم و مردم به طور منظم سوالاتی مانند این می‌پرسند:

Why is Tailwind removing the default styles on my h1 elements? How do I disable this? What do you mean I lose all the other base styles too?

We hear you, but we're not convinced that simply disabling our base styles is what you really want. You don't want to have to remove annoying margins every time you use a p element in a piece of your dashboard UI. And I doubt you really want your blog posts to use the user-agent styles either — you want them to look awesome , not awful.

The @tailwindcss/typography plugin is our attempt to give you what you actually want, without any of the downsides of doing something stupid like disabling our base styles.

It adds a new prose class that you can slap on any block of vanilla HTML content and turn it into a beautiful, well-formatted document:

<article class="prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
  For years parents have espoused the health benefits of eating garlic bread with cheese to their
  children, with the food earning such an iconic status in our culture that kids will often dress
  up as warm, cheesy loaf for Halloween.
  </p>
  <p>
  But a recent study shows that the celebrated appetizer may be linked to a series of rabies cases
  springing up around the country.
  </p>
  <!-- ... -->
  </article>
  

برای اطلاعات بیشتر در مورد نحوه استفاده از افزونه و ویژگی‌هایی که شامل می‌شود, مستندات را مطالعه بفرمائید .

از اینجا به بعد چه انتظاری باید داشت

What follows from here is just a bunch of absolute nonsense I've written to dogfood the plugin itself. It includes every sensible typographic element I could think of, like bold text , unordered lists, ordered lists, code blocks, block quotes, and even italics .

پوشش دادن همه این موارد مهم است به چند دلیل:

1. ما می‌خواهیم همه چیز به‌صورت پیش‌فرض خوب به نظر برسد.
2. فقط دلیل اول مهم است، این کل هدف این افزونه است.
3. در اینجا یک دلیل ساختگی سوم وجود دارد، اگرچه لیستی با سه آیتم واقعی‌تر از لیستی با دو آیتم به نظر می‌رسد.

حالا می‌خواهیم سبک دیگری از عنوان را امتحان کنیم.

تایپوگرافی باید ساده باشد

بنابراین این یک عنوان برای شماست - با کمی شانس، اگر کارمان را درست انجام داده باشیم، باید معقول به نظر برسد.

چیزی که فرد خردمندی درباره تایپوگرافی به من گفت:

تایپوگرافی بسیار مهم است اگر نمی‌خواهید چیزهای شما به شکل زباله به نظر برسد. خوب انجام دهید و بد نخواهد بود.

احتمالاً مهم است که تصاویر به طور پیش‌فرض اینجا خوب به نظر برسند:

حالا می‌خواهم یک مثال از لیست نامرتب نشان دهم تا مطمئن شویم که آن هم خوب به نظر می‌رسد:

• پس این اولین مورد در این لیست است.
• در این مثال ما آیتم‌ها را کوتاه نگه می‌داریم.
• بعداً از آیتم‌های لیست طولانی‌تر و پیچیده‌تر استفاده خواهیم کرد.

و این پایان این بخش است.

اگر ما عنوان‌ها را پشت سر هم قرار دهیم، چه؟

ما باید مطمئن شویم که آن هم خوب به نظر می‌رسد.

گاهی اوقات عنوان‌ها به طور مستقیم زیر یکدیگر قرار می‌گیرند. در این موارد، اغلب باید حاشیه بالای عنوان دوم را حذف کنید زیرا معمولاً بهتر است عنوان‌ها به یکدیگر نزدیک‌تر باشند تا یک پاراگراف که پس از آن عنوان بیاید.

وقتی یک عنوان بعد از پاراگراف می‌آید...

وقتی عنوانی پس از یک پاراگراف می‌آید، به فضای بیشتری نیاز داریم، همانطور که قبلاً ذکر کردم. حالا ببینیم یک لیست پیچیده‌تر چگونه به نظر می‌رسد.

• اغلب این کار را انجام می‌دهم که آیتم‌های لیست دارای عنوان باشند.

  به دلیلی فکر می‌کنم این ظاهر خوبی دارد، که متأسفانه تنظیم درست استایل‌ها خیلی آزاردهنده است.

  اغلب در این موارد لیست دو یا سه پاراگراف دارم، بنابراین بخش سخت تنظیم فاصله بین پاراگراف‌ها، عنوان آیتم لیست و آیتم‌های جداگانه است تا همه منطقی به نظر برسد. صادقانه بگویم، می‌توانید به‌طور قوی استدلال کنید که نباید به این شیوه نوشت.

• از آنجا که این یک لیست است، حداقل به دو آیتم نیاز دارم.

  قبلاً در آیتم لیست قبلی توضیح دادم که چه می‌کنم، اما یک لیست لیست نخواهد بود اگر فقط یک آیتم داشته باشد و ما واقعاً می‌خواهیم این واقعی به نظر برسد. به همین دلیل است که این آیتم لیست دوم را اضافه کردم تا واقعاً چیزی داشته باشم که هنگام نوشتن استایل‌ها به آن نگاه کنم.

• اضافه کردن یک آیتم سوم نیز ایده بدی نیست.

  فکر می‌کنم احتمالاً استفاده از دو مورد کافی بود اما سه مورد قطعاً بدتر نیست، و از آنجا که به نظر نمی‌رسد مشکلی در نوشتن چیزهای تصادفی داشته باشم، ممکن است آن را هم اضافه کنم.

بعد از این نوع لیست معمولاً یک بیانیه یا پاراگراف پایانی دارم، چون پرش مستقیم به یک عنوان کمی عجیب به نظر می‌رسد.

کد باید به طور پیش‌فرض خوب به نظر برسد.

I think most people are going to use highlight.js or Prism or something if they want to style their code blocks but it wouldn't hurt to make them look okay out of the box, even with no syntax highlighting.

Here's what a default tailwind.config.ts file looks like at the time of writing:

module.exports = {
  purge: [],
  theme: {
  extend: {},
  },
  variants: {},
  plugins: [],
  }
  

امیدوارم به اندازه کافی برای شما خوب به نظر برسد.

لیست‌های تو در تو چطور؟

لیست‌های تو در تو اصولاً همیشه بد به نظر می‌رسند و به همین دلیل است که ویرایشگرهایی مثل Medium حتی اجازه نمی‌دهند که این کار را انجام دهید، اما من حدس می‌زنم که چون برخی از شما احمق‌ها قرار است این کار را انجام دهید، ما باید حداقل بار درست کردن آن را به دوش بکشیم.

1. لیست‌های تو در تو به ندرت ایده خوبی هستند.
   • ممکن است فکر کنید خیلی «سازماندهی شده» یا چیزی شبیه به آن هستید، اما در واقع فقط یک شکل ناخوشایند در صفحه ایجاد می‌کنید که خواندن آن سخت است.
   • پیمایش تو در تو در رابط کاربری هم ایده بدی است، همه چیز را تا حد امکان مسطح نگه دارید.
   • تودرتو کردن حجم زیادی از پوشه‌ها در کد منبع شما هم مفید نیست.
2. از آنجا که به موارد بیشتری نیاز داریم، در اینجا یکی دیگر است.
   • مطمئن نیستم که برای استایل‌دهی به عمق بیش از دو سطح زحمت بکشیم.
   • دو مورد از قبل زیاد است، سه مورد تضمینی است که ایده بدی خواهد بود.
   • اگر چهار سطح تو در تو بسازید، باید در زندان باشید.
3. دو آیتم واقعاً لیست نیست، اما سه مورد خوب است.
   • لطفاً دوباره لیست‌ها را تو در تو نکنید اگر می‌خواهید مردم واقعاً محتوای شما را بخوانند.
   • هیچ‌کس نمی‌خواهد به این نگاه کند.
   • من ناراحتم که حتی باید برای استایل دادن به این زحمت بکشیم.

The most annoying thing about lists in Markdown is that <li> elements aren't given a child <p> tag unless there are multiple paragraphs in the list item. That means I have to worry about styling that annoying situation too.

• برای مثال، در اینجا یک لیست تو در تو دیگر است.

  اما این بار با یک پاراگراف دوم.

  • These list items won't have <p> tags
  • زیرا هرکدام فقط یک خط هستند

• اما در این آیتم لیست سطح بالا، آن‌ها خواهند بود.

  این مخصوصاً به دلیل فاصله‌گذاری در این پاراگراف آزاردهنده است.

  • As you can see here, because I've added a second line, this list item now has a <p> tag.

    راستی، این همان خط دومی است که در موردش صحبت می‌کردم.

  • در نهایت، در اینجا یک آیتم لیست دیگر است تا بیشتر شبیه به یک لیست شود.

• یک آیتم لیست پایانی، اما بدون لیست تو در تو، چون چرا که نه؟

و در نهایت جمله‌ای برای پایان دادن به این بخش.

عناصر دیگری وجود دارد که باید استایل دهیم

I almost forgot to mention links, like this link to the Tailwind CSS website . We almost made them blue but that's so yesterday, so we went with dark gray, feels edgier.

ما حتی استایل‌های جدول را هم اضافه کرده‌ایم، بررسی کنید:

We also need to make sure inline code looks good, like if I wanted to talk about <span> elements or tell you the good news about @tailwindcss/typography .

Sometimes I even use code in headings

Even though it's probably a bad idea, and historically I've had a hard time making it look good. This "wrap the code blocks in backticks" trick works pretty well though really.

Another thing I've done in the past is put a code tag inside of a link, like if I wanted to tell you about the tailwindcss/docs repository. I don't love that there is an underline below the backticks but it is absolutely not worth the madness it would require to avoid it.

We haven't used an h4 yet

But now we have. Please don't use h5 or h6 in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a before pseudo-element to scream at you if you use an h5 or h6 .

We don't style them at all out of the box because h4 elements are already so small that they are the same size as the body copy. What are we supposed to do with an h5 , make it smaller than the body copy? No thanks.

ما هنوز باید درباره عنوان‌های پشت سر هم فکر کنیم.

Let's make sure we don't screw that up with h4 elements, either.

هوف، با کمی شانس ما سرفصل‌های بالای این متن را استایل دادیم و به نظر می‌رسند که خوب باشند.

بیایید یک پاراگراف پایانی اینجا اضافه کنیم تا همه چیز با یک بلوک متنی مناسب به پایان برسد. نمی‌توانم توضیح بدهم چرا می‌خواهم همه چیز به این صورت تمام شود، اما فرض می‌کنم به این دلیل است که فکر می‌کنم اگر یک عنوان خیلی نزدیک به انتهای سند باشد، چیزها عجیب یا نامتعادل به نظر خواهند رسید.

آنچه در اینجا نوشته‌ام احتمالاً به اندازه کافی طولانی است، اما افزودن این جمله پایانی ضرری ندارد.