حالا چرا زیرخط هایمان را برداریم یا به عبارتی دیگر از آنها کمتر استفاده کنیم؟! برای اینکار دلیل واضحی دارم! که البته در ادامه راهکارهایی هم برای کسانی که نمی‌خواهند این کار را انجام دهند ارائه خواهم داد.

همانطور که می‌دانید زبان‌های مختلف نوشتار های مختلفی هم دارند و این مهم‌ترین دلیل ما برای استفاده نکردن از زیرخط است. چرا که زیرخط های استاندارد بر اساس نوشتار زبان هایی همچون انگلیسی تهیه شده اند و زبان هایی با نوشتار انگلیسی معمولا به طور کامل روی خط نوشته می‌شوند و قسمت های اضافی ندارند که در زیر خط قرار بگیرد اما زبان فارسی به این صورت نیست و در نوشتار حرف‌ها قسمت‌هایی وجود دارد که زیر خط قرار می‌گیرند و این مشکل ایجاد می‌کند٬ مثل حرف‌هایی همچون «ع ح س ر ب» و دیگر حرف‌ها که کم هم نیستند.

اما بگذارید با یک مثال ساده منظورم را بهتر برسانم٬ برای مثال من دو متن را با حروف فارسی و انگلیسی می‌نویسم و برای آنها زیرخط استاندارد می‌گذارم تا شما دلیل گفته‌ی من را بهتر متوجه شوید:

یک جمله فارسی میبینید | This is an English sentence

همانطور که مشاهده می‌کنید جمله‌ی فارسی را که زیرخط دار کردیم قسمت هایی از حروف با زیرخط برخورد کرده (که البته به فونتی هم که استفاده می‌کنیم بستگی دارد) و قابل مشاهده نیستند و حتی به گونه‌ی دیگر خوانده می‌شوند مانند کلمه «میبینید» که شبیه کلمه‌ی «مسند» نوشته شده است! اما در جمله انگلیسی این اشکال وجود ندارد!

راه حل: آن دوستانی هم که می‌خواهند حتما از زیرخط در متن‌هایشان استفاده کنند می‌توانند کد css زیر را در فایل style یا css پوسته شان قرار دهند تا تگ زیرخط (U) را اصلاح کنند! به همین سادگی :دی

u {
    border-bottom: 1px solid;
    padding-bottom: 1px;
    text-decoration: none;
}

که نتیجه کار هم به صورت زیر خواهد بود:

یک جمله فارسی میبینید

کلام آخر: امیدوارم دوستان عزیزم این مطلب را زیادی جدی بگیرند! خصوصا دوستان طراح وب که در کارهایشان از زیرخط استفاده می‌کنند. از نظر من رعایت نکردن این نکته به زیبایی و شیوایی کار لطمه‌ی بزرگی می‌زند و می‌تواند با تمام کوچکی‌اش مشکل بزرگی در کار شما باشد. همچنین که من این مشکل را در طراحی خیلی از وبلاگ‌ها دیده‌ام و واقعا چشم‌هایم را اذیت کرده است!!

• تبدیل آسان DVD به AVI
• پوسته‌های راست به چپ شده برای gtalk
• وردپرسی ها در جشن روز آزادی نرم افزار

یکی از دلایل سنگین شدن حجم یک سایت یا وبلاگ استفاده از تصاویر متعددی هست که در اون سایت استفاده میشه و مسلما حجم این تصاویر هم روی سرعت اجرای صفحه تاثیر گذار هست. اما طراحان وب و وبلاگ نویس‌ها برای حل این مساله از راه‌های مختلفی مثل پائین آوردن کیفیت تصویر استفاده می‌کنند که به نظر من پائین آوردن کیفیت تصویر کار زیاد جالبی نیست و اون جلوه و نمایش مناسب تصویر رو ازش میگیره.

اما نظرتون راجع به کم کردن حجم تصویر بدون افت کیفیت چیه؟! سایت ها و برنامه‌های زیادی هستند که می‌تونند این کار رو انجام بدهند اما یکی از بهترین این سایت‌ها Smush.it هست٬ سرویسی از شرکت یاهو که ‌میتونه به طور همزمان حجم ۵ تصویر مختلف رو بدون کم شدن حتی مقداری از کیفیت تصویر٬ به مقدار قابل توجهی کاهش بده که البته بستگی به تصویرش هم داره!

بعد از آشنایی با این سرویس برای آزمایش٬ تعدادی از تصاویر وبلاگم رو به این سایت دادم تا حجم آنها را برایم بهینه کند! از هر تصویر مقدار اندکی از حجمش را کم میکرد که فکر میکنم به خاطر این بود که قبلا سعی کرده بودم از تصاویری با کیفیت بالا و حجم پائین استفاده کنم٬ اما باز هم مقداری از حجم آنها را کم می‌کرد که وقتی تصاویر بیشتری را smush.it کردم متوجه حجم قابل توجهی شدم که از کل تصاویرم کم شده یعنی وقتی از هر تصویر هم مقدار ناچیزی کم کرد همان مقدار های ناچیز تبدیل به حجم بزرگی شده بودند!

به همین خاطر هم به شما دوست عزیز پیشنهاد می‌کنم همین حالا تصاویرتان را Smush.it کنید.

• انواع مدل‌های رنگ
• تصاویر دوست داشتنی
• رنگ آمیزی تصاویر سیاه و سفید

آیا می دانستید که با کمک css و html می‌توانید یک style خاص فقط برای صفحات چاپی تعریف کنید؟

با کمک یکی از خاصیت های برچسب link در هنگام تعریف style شما می توانید تعریف کنید که style مورد نظرتان برای صفحات چاپی استفاده می شود. به عنوان مثال اگر شما بخواهید این قابلیت را به وبلاگ خود اضافه کنید باید زیرِ خط مربوط به style پوسته‌تان این خط را اضافه کنید:

<link rel="stylesheet" type="text/css" href="/print.css" media="print" />

همانطور که در کد بالا مشاهده می کنید خاصیت media=”print” باعث می شود تا شیوه نامه (استایل) print.css به صفحات قابل چاپ اختصاص داده شود و برای صفحاتی که قرار است چاپ شود از این شیوه نامه استفاده خواهد شد.

اما خاصیت media ویژگی دیگری هم با نام screen دارد که این ویژگی برای شیوه نامه‌های عادی که روی صفحات وب نمایش داده می شود استفاده می شود.

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

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

روش های مختلف استفاده از خاصیت media

به صورت های مختلف می‌توان از خاصیت media در شیوه نامه هایمان استفاده کرد. از معمول ترین این راه ها روشی است که در بالا گفته شد. یکی دیگر از این روش ها تعریف media در فایل css است که به صورت زیر در فایل css نوشته می‌شود:

@media print {
    h1 {
        color: black;
    }
    h2 {
        color: gray;
    }
}

روش دیگر٬ روش import کردن است که می توان به صورت زیر از آن استفاده کرد:

<style type="text/css">
    @import url("/print.css") print;
</style>

ساخت فایل شیوه نامه‌ی چاپ

تا اینجا طریقه‌ی تعریف فایل شیوه نامه را یاد گرفتیم. اما حالا در فایل استایل print.css مان چه بنویسیم؟

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

body {
    direction: rtl;
}

یکی دیگر از کارهای مهمی که باید انجام دهیم حذف قسمت های غیر ضروری از صفحه چاپی است، مثل: sidebar ، header ، footer ، بخش نظرات و از این قبیل قسمت ها که وجودشان در صفحه چاپ لازم نیست بلکه برای این صفحه مضر هم هست.

برای حذف این قسمت ها کافی است تا ID یا Class آنها را پیدا کنیم و آنها را به صورت زیر حذف کنیم:

#sidebar, #header, #footer, #comments {
    display: none;
}

حالا مطالب شما قابل چاپ شده است درست مثل مطالب وبلاگ من برای مثال می توانید همین مطلب را با فشردن کلید های Ctrl+P چاپ کنید و تغییرات حاصل شده را در آن ببینید.

• انتشار وردپرس نسخه ۲.۸ بتا ۱
• رنگ آمیزی تصاویر سیاه و سفید
• GMail خود را به Gadget آغشته کنید