آموزش عمودی نوشتن متن در Html

آموزش عمودی نوشتن متن در Html

گاهی اوقات لازم می شود که برخی متون را به صورت عمودی در صفحات وب به کار گرفت. با نگاهی که به بیشتر سایت ها که از چنین روشی استفاده کرده ام کنیم ، متوجه خواهیم شد که آن متن به صورت عکس می باشد! به عبارتی مدیر وب سایت یا طراح قالب متن مورد نظر با استفاده از ویرایشگرهای تصویر به صورت عمودی درآورده و آن را به صورت تصویر ذخیره کرده و در صفحات سایت استفاده می کنند. اما همانطور که متوجه شدید این روش کمی طولانی و غیراصولی به نظر می رسد. برای همین بهتر است به دنبال روشی باشیم متن واقعی (نه تصویر) را به عمودی نمایش دهیم. چاره این کار استفاده از CSS3 می باشد. html برای اینکه متن را با استفاده از css به صورت عمودی نمایش دهید، کافیست از کد زیر استفاده کنید.

<p style="transform: rotate(270deg);position: absolute">طراحی سایت</p>

در کد بالا ما با استفاده از کدهای استایل مشخص نمودیم که متن 270 درجه بچرخد ، position: absolute نیز باعث می شود متن در همان قسمتی که تاپی شده است، جای بگیرد.

اگر به مبحث سئو علاقه مند باشید ، باید بدانید که استفاده از کدهای استایل داخلی روشی اصولی نیست و برای همین باید کدها را از طریق کلاس (class) مشخص کنید. بدین منظور ابتدا کدهای زیر را به فایل استایل سایت خود اضافه کنید:

.amoodi{-webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270eg); ;position: absolute}

سپس هرجا که نیاز به عمودی کردن متن بود، کافیست به روش زیر اقدام کنید:

<p class="amoodi">طراحی سایت</p>

اگر به کدهایی که برای اضافه کردن که به فایل استایل کنید، متوجه یک موضوع خواهید شد! و آن هم اضافه شدن عبارتی به اول transform می باشد. با توجه به اینکه برخی مرورگرها تمام کدهای css3 را با نام خالی نمی توانند اجرا کنند، برای همین باید آنها را به مرورگر شناساند که بدین منظور:

-webkit- : برای مرورگرهایی که برپایه وب کیت نوشته شده اند ، مانند گوگل کروم و سافاری

-moz- : برای موزیلا فایرفاکس

-o- : برای مرورگر اپرا

تبریک! شما هم اکنون با یک تیر 3 نشان را زده اید!

  1.  با نحوه عمودی نوشتن متون در وب آشنا شدید
  2. با یکی از موارد سئو آشنا دید.
  3. با نحوه شناساندن کدهای CSS3 به انواع مرورگرها آشنا شدید.