نحوه تراز کردن متن به چپ، راست و وسط در HTML

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

کافیست کمی دقیق‌تر نگاه کنید. آن‌گاه خواهید دید که این راه بهترین و آسان‌ترین روش است. در این مقاله از شرکت طراحی سایت ایده پویا قصد داریم نحوه تراز چپ چین، راست چین و تراز کردن متن با HTML و CSS را توضیح دهیم. لطفا تا انتها همراه ما باشید.

نحوه تراز کردن متن در HTML

بر اساس داده‌های W3Techs، 94.7 درصد از وب‌سایت‌ها ازHTML  به عنوان زبان نشانه‌گذاری استفاده می‌کنند. 91.2 درصد از این تعداد هم، HTML5 را مورد استفاده قرار می‌دهند.

 قبل از  HTML5، تنظیم تراز متن در HTML با ویژگی‌های استایل رایج بود. اما HTML5 از ویژگی align  تگ<p>  پشتیبانی نمی‌کند.

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

بیشتر بخوانید: مخفی کردن نوار اسکرول در CSS

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

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

ترازبندی متن نوعی استایل صفحه به حساب می‌آید. بنابراین، بهترین راه برای تراز کردن محتوای HTML  در صفحه، ویژگی  text-align CSS است. دستور text-align تراز افقی محتوا را داخل یک عنصر بلوک یا یک سلول جدول تنظیم می‌کند. به عنوان مثال، عنصری که یک خط جدید را شروع می‌کند و کل عرض صفحه را می‌گیرد. مانند <p>.

با اینکه از نام text-align پیداست که این ویژگی روی متن کار می‌کند، اما بر تمام محتوای داخل یک عنصر بلوک مانند تصاویر و دکمه‌ها نیز تاثیرگذار است.

شما می‌توانید از ویژگی text-align در CSS درون‌خطی، CSS داخلی یا CSS  خارجی استفاده کنید. Css درون‌خطی به این معنی است که HTML و CSS شما با هم در بخش بدنه سند HTML قرار می‌گیرند. بنابراین، همچنان از نظر فنی می‌توانید متن را در HTML تراز کنید.

HTML Align Text Center

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

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

در اینجا یک نمونه استفاده از تراز وسط در مهم‌ترین عناصر صفحه اصلی آورده شده است:

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

به عنوان مثال، CodePen  زیر شامل HTML، CMS  و نتایج نهایی است.

حال فرض کنید می‌خواهید یک عنصر دکمه را در مرکز صفحه قرار دهید. از آنجایی که دکمه HTML یک عنصر درون خطی است و نه یک عنصر در سطح بلوک، ویژگی text-align  را نمی‌توان به طور مستقیم روی دکمه و برای وسط استفاده کرد. به جای آن، دکمه را در یک div عنصر عمومی سطح بلوک قرار دهید. سپس text-align: center را روی این ظرف div اعمال کنید:

تراز کردن متن به چپ در HTML

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

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

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

HTML  به صورت پیش‌فرض محتوا را به سمت چپ تراز می‌کند. از این رو برای رسیدن به این اثر نیازی به استفاده از ویژگی text-align نیست.

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

برای ایجاد justify در  CSS، از قانون   text-align:left استفاده نمایید.

در مثال CodePen زیر، عنصر div تنظیم شده تا تمام محتوا را داخل آن مرکز قرار دهد. اضافه کردن   text-align:left  به پاراگراف دوم، سبک div را لغو می‌کند:

تراز کردن متن به راست در HTML

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

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

در زیر یک مثال قابل‌توجه از متن راست‌چین آورده شده است:

به عنوان آخرین مثال، بیایید تمام عناوین صفحه را راست‌چین کنیم.

اعمال قانون CSS text-align: right برای همه H2ها به سمت راست آن‌ها را توجیه کنید:

همچنین می‌توانید از دستورات تراز متن برای توجیه و مطابقت سبک‌های موجود در سند خود استفاده نمایید.

تراز کردن متن با HTML و CSS

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

• 27
• 0