شعر پارسی

این مقاله اهمیت فرهنگی و زبانی شعر پارسی را توضیح می‌دهد و نشان می‌دهد که نمایش دقیق وزن، تراز و رسم‌الخط شعر در وب برای حفظ معنا و زیبایی ضروری است. سپس یک راهکار HTML/CSS (کلاس‌های .ppoem، .beyt و .mesra) را معرفی و نحوهٔ پیاده‌سازی و بهینه‌سازی آن برای واکنش‌گرایی و فونت‌های فارسی توضیح می‌دهد.

شعر پارسی
اهمیت شعر پارسی شعر پارسی میراثی فرهنگی و زبانی است که هم نقش هویتی دارد و هم ابزار انتقال خرد، احساس و تجربه جمعی؛ از کلاسیک تا معاصر، شعر زبان را پالایش می‌کند، تصویرسازی می‌آموزد و ظرفیت‌های بیانی را گسترش می‌دهد. شعر پارسی همچنین پل پیوند میان نسل‌هاست: وزن و قافیه سعدی و حافظ به همان اندازه که زیبایی لفظی دارند، ساختارهای فکری، اخلاقی و اجتماعی را نیز منتقل می‌کنند و به مخاطب فرصت بازخوانی هویت می‌دهند. شعر پارسی در محیط‌های آموزشی، رسانه‌ای و تبلیغاتی کاربرد روشنی دارد: از تقویت زبان نوشتاری و شفاهی تا فراهم کردن عناصر بصری برای هویت‌سازی برندها و محتوای فرهنگی؛ بنابر این حفظ درست نمایش متون شعری در فضای وب اهمیت عملی و نمادین دارد. مشکل نمایش شعر پارسی در پلتفرم‌های آنلاین تقریباً در تمامی پلتفرم‌های آنلاین که شعر پارسی نمایش داده می‌شود، چیدمان بصری، رسم‌الخط، ترازِ مصراع‌ها، فاصلۀ بین مصراع‌ها و نگاشت فاصله‌ها آن طور که در نسخه چاپی یا نسخه دست‌نویس انتظار داریم نمایش داده نمی‌شود. این مشکلات ریشه در تفاوت رفتار مرورگرها با فاصله‌ها و واژگان فارسی، تداخل جهت متن (RTL/LTR)، و سبک‌دهی پیش‌فرض CSS دارد؛ نتیجه اغلب شکستن عروض، عدم تطبیق کادرها و از بین رفتن حس وزن و هماهنگی بیت‌هاست. روش پیشنهادی برای نمایش درست شعر پارسی و نحوه استفاده ساختار HTML ساده و معنای‌دار است: یک ظرف کلی (.ppoem)، هر بیت در یک .beyt و هر مصراع در یک .mesra. CSS - استفاده از white-space: nowrap برای جلوگیری از شکست ناخواسته مصراع‌ها؛ - تقسیم عرض مصراع‌ها با calc(50% - 50px) تا هر مصراع نیمهٔ سطر را بگیرد و فضای میانی برای نشانه‌گذاری یا تورفتگی کفایت کند؛ - padding چپ و راست برای ایجاد تورفتگیِ متقارن و متن‌آرا بودن با text-align: justify و text-align-last: justify که مصراع‌ها را تا اندازه ممکن تراز می‌کند؛ - تنظیمات واکنش‌گرا (media queries) برای کم کردن اندازهٔ فونت و خط و تغییر عرض مصراع‌ها در موبایل تا خوانایی حفظ شود.
بارها گفته‌ام و بار دگر می‌گویمکه من دلشده این ره نه به خود می‌پویم
در پس آینه طوطی صفتم داشته‌اندآن چه استاد ازل گفت بگو می‌گویم *
<div class="ppoem">

     <div class="beyt">
          <span class="mesra">بارها گفته‌ام و بار دگر می‌گویم</span>
          <span class="mesra">که من دلشده این ره نه به خود می‌پویم</span>
     </div>

     <div class="beyt">
          <span class="mesra">در پس آینه طوطی صفتم داشته‌اند</span>
          <span class="mesra">آن چه استاد ازل گفت بگو می‌گویم</span>
     </div>

</div>
نحوۀ استفاده در صفحه 1. قطعه HTML را در محلِ نمایش شعر قرار دهید (مثلاً داخل یک article یا div مرتبط). 2. قطعه CSS را در فایل استایل سایت یا بخش استایل همان پست قرار دهید. اگر قالب شما CSS سفارشی جدا دارد، کلاس‌ها را همان‌جا اضافه کنید. 3. برای سازگاری بهتر با راست‌چین، مطمئن شوید تگ والد یا صفحه جهت سند را با dir="rtl" یا در CSS با direction: rtl تنظیم کرده‌اید تا رفتار تراز و نشانه‌گذاری فاصله‌ها همخوانی داشته باشد. 4. اگر فونت فارسی دلخواه دارید، آن را با @font-face یا لینک به فونت وب وارد کنید و در .mesra فونت را مشخص کنید تا کرنینگ و وزن حروف مناسب شود. 5. برای بیت‌های کوتاه یا طولانی که هنوز مشکل ایجاد می‌کنند، می‌توانید مقدارِ width در .mesra را به درصد منعطف‌تر کنید یا برای بیت‌های نامتعارف کلاس‌های کمکی بسازید (مثلاً .mesra--wide). ۶. این بخش از CSS یعنی .mesra::after { content: ""; width: 0; height: 0; } نقش بسیار مهمی در حفظ تراز و رفتار بصری مصراع‌ها دارد، حتی اگر در نگاه اول خالی به نظر برسد. چرا این خط کلیدی است؟ این دستور یک شبه‌عنصر (::after) ایجاد می‌کند که هیچ محتوایی، عرض یا ارتفاع ندارد، اما حضورش در DOM باعث می‌شود مرورگر رفتار تراز متن را به‌درستی اعمال کند. به ویژه در ترکیب با text-align-last: justify، این عنصر خالی به مرورگر کمک می‌کند تا آخرین خط مصراع را هم به‌درستی تراز کند، چون مرورگر برای اجرای justify نیاز به یک نقطه پایان دارد. بدون این عنصر، ممکن است مصراع‌هایی که در یک خط جا می‌گیرند، به‌صورت چپ‌چین یا راست‌چین ناقص نمایش داده شوند. این خط کوچک اما حیاتی باعث می‌شود که: - تراز کامل مصراع‌ها حتی در حالت تک‌خطی حفظ شود؛ - رفتار مرورگر در نمایش آخرین خط متن قابل پیش‌بینی و هماهنگ با سبک کلی باشد؛ - جلوهٔ بصری شعر در همهٔ مرورگرها و اندازه‌های صفحه یکدست باقی بماند.
<style>

.ppoem
{
    display:block;
    white-space: nowrap;
    line-height: 40px;
    margin-top:10px;
}

.beyt
{
    display:block;
    white-space: pre-wrap;
}

.mesra
{
    display: inline-block;
    width: calc(50% - 50px);
    padding: 0 0 0 50px;
    text-align: justify;
    text-align-last: justify;
    font-size: 22px;
    -moz-text-align-last: justify;
    white-space: nowrap;
}
.mesra:last-child
{
    padding: 0 50px 0 0;
}
.mesra::after {
  content: "";
  width: 0;
  height: 0;
}

@media screen and (max-width: 960px) {

.ppoem
{
    line-height: 30px;
}
        
.mesra
{
    font-size:18px;
}

}

@media screen and (max-width: 640px) {
   
.beyt
{
    margin-bottom:20px;
}
    
.mesra
{
    width: calc(100% - 50px);
    padding: 0 0 0 50px;
    font-size: 19px;
}
.mesra:last-child
{
    padding: 0 50px 0 0;
}

}

</style>
هر که دلارام دید از دلش آرام رفتچشم ندارد خلاص هر که در این دام رفت
یاد تو می‌رفت و ما عاشق و بیدل بدیمپرده برانداختی کار به اتمام رفت
ماه نتابد به روز چیست که در خانه تافتسرو نروید به بام کیست که بر بام رفت
مشعله‌ای برفروخت پرتو خورشید عشقخرمن خاصان بسوخت خانگه عام رفت
عارف مجموع را در پس دیوار صبرطاقت صبرش نبود ننگ شد و نام رفت
گر به همه عمر خویش با تو برآرم دمیحاصل عمر آن دمست باقی ایام رفت
هر که هوایی نپخت یا به فراقی نسوختآخر عمر از جهان چون برود خام رفت
ما قدم از سر کنیم در طلب دوستانراه به جایی نَبُرد هر که به اَقدام رفت
همت سعدی به عشق میل نکردی ولیمی چو فرو شد به کام عقل به ناکام رفت **
نمونه و الهام‌گیری نمونه‌ای از همین روش در اینجا اجرا شده و می‌توانید آن را به عنوان مرجع ببینید؛ این اجرا نشان می‌دهد چگونه تقسیم عرض و تورفتگی مصراع‌ها حس ریتم و تراز را باز می‌گرداند. در وبسایت‌های ویراویر قابلیت پشتیبانی از شعر پارسی به صورت داخلی تعبیه شده است و بنابر این نیازی به راه‌حل‌ یا افزونهٔ جداگانه برای نمایش درست وزن، تراز و رسم‌الخط اشعار وجود ندارد؛ این قابلیت تضمین می‌کند که مصراع‌ها، کادربندی و فونت‌های فارسی به صورت دقیق و متناسب در همهٔ اندازه‌های صفحه نمایش، نمایش داده شوند و تجربهٔ خواندن شعر، حفظ و ارتقا یابد. نویسنده: بابک ارجمندی #شعر_فارسی #نمایش_متن #تجربه_کاربری #وب_فاوا #فونت_فارسی #طراحی_وب #قالب_شعر #محفظه_شعر #ویراویر #فرهنگ_دیجیتال
دسته‌بندی ویژگی‌ها کلید‌واژه شعر فارسینمایش شعر در وبراست‌چینCSS شعرقالب شعرتراز مصراعفونت فارسی وبواکنش‌گرا برای شعرHTML شعرpicme
ویراویر یک پلتفرم با ∞ بی‌نهایت امکاناتویراویر یک پلتفرم با ∞ بی‌نهایت امکاناتویراویر پلتفرمی یکپارچه و مقیاس‌پذیر است که از وبلاگ و وبسایت تا فروشگاه دیجیتال و مدیریت پروژه را با میزبانی ابری و ابزارهای بازاریابی و امنیتی فراهم می‌کند. این پلتفرم با زیرساخت پرقدرت و افزونه‌های قابل توسعه، فضایی برای خلق نامحدود، رشد کسب و کار و صرفه‌جویی در زمان و هزینه ایجاد می‌کند.
افزونه محتوای مکان محور ویراویرافزونه محتوای مکان محور ویراویرافزونه محتوای مکان‌محور ویراویر محتوا را بر اساس موقعیت جغرافیایی نمایش و مدیریت می‌کند تا تجربه‌ای محلی، مرتبط و شخصی‌سازی شده فراهم شود. مناسب برای کسب و کارهای محلی، گردشگری، فروشگاه‌های زنجیره‌ای، بانک‌ها، موزه‌ها و آنها که محتوای متفاوت در هر منطقه لازم دارند.
افزونه شناسه‌محور — نظم و مقیاس برای محتوای شماافزونه شناسه‌محور — نظم و مقیاس برای محتوای شماافزونه شناسه‌محور، محتوا را به واحدهای منطقی (شناسه) تقسیم می‌کند تا مدیریت، جستجو و انتشار ساده‌تر شود. فیلدهای قابل‌تعریف، فرم‌های سفارشی و زمان‌بندی انتشار به تیم‌ها سرعت، دقت و مقیاس‌پذیری می‌دهد.
افزونهٔ برگزاری جشنواره و مسابقهافزونهٔ برگزاری جشنواره و مسابقهماژول برگزاری جشنواره و مسابقه ویراویر یک افزونه قدرتمند و چندمنظوره برای مدیریت کامل جشنواره‌های عکس و فیلم
شب‌آسا — تم دارک حرفه‌ای برای پنل مدیریت ویراویرشب‌آسا — تم دارک حرفه‌ای برای پنل مدیریت ویراویرشب‌آسا یک تم تاریک و کم‌خستگی برای پنل‌های مدیریت ویراویر است که خوانایی، تمرکز و سازگاری با برند را بهبود می‌دهد. با پالت رنگ متعادل و کامپوننت‌های آماده، مدیریت محتوا در محیط‌های کم‌نور ساده و دلپذیر می‌شود.
هشتگهشتگهَشتَگ به انگلیسی Hashtag برچسبی است که برای دسته‌بندی و جستجوی سریع پست‌ها مورد استفاده قرار می‌گیرد و با کاراکتر شارپ در ابتدای واژه مشخص می‌شود.
فروشگاه واقعیت مجازیفروشگاه واقعیت مجازیبا افزونه واقعیت مجازی ویراویر™ و بهره‌گیری از هوش مصنوعی شکل واقعی‌تری از کسب و کارتان را به مشتریان حاضر و یا بالقوه نمایش دهید!
مقیاس پذیری و عملکردمقیاس پذیری و عملکرداگر وبسایت شما اغلب کند یا حتی غیرقابل دسترس می‌شود، بر تجربه کاربر تأثیر منفی می‌گذارد و منجر به نارضایتی و از دست دادن مشتریان بالقوه می‌گردد!
تخفیف برای همه کالاهای موجود در سایتتخفیف برای همه کالاهای موجود در سایتدر فروشگاه آنلاین ویراویری خود می‌توانید تنها با یک انتخاب ساده تمامی کالاهای موجود در سایت خود را تخفیف دهید.
انعطاف پذیریانعطاف پذیریانعطاف‌پذیری یکی از عوامل اساسی برای بقا هر بنگاه اقتصادی در یک بازار بسیار رقابتی است
پست چندرسانه‌ایپست چندرسانه‌ایمحتوای متن، تصویر، صدا، ویدیو، واقعیت مجازی، موقعیت جغرافیایی را به بهترین روش بر روی وبسایت‌تان و شبکه اینترنت به اشتراک بگذارید و آنلاین بفروشید!
فروش فایل دیجیتال بطور امنفروش فایل دیجیتال بطور امنافزونه فروش فایل‌های صوتی، تصویر، فیلم، پرونده و سایر فایل متداول بر روی سایت خودتان
فروش اینترنتی آسان و بدون محدودیت کالا یا خدماتفروش اینترنتی آسان و بدون محدودیت کالا یا خدماتافزونه فروش اینترنتی ویراویر بدون هیچ محدودیتی امکان فروش محصول یا خدمات شما را آماده می‌کند. فروش / فروشگاه اینترنتی با امکان پرداخت به روش کارت به کارت
بارگذاری سریع‌تربارگذاری سریع‌ترویراویر با طراحی مبتنی بر کارایی و عملکرد و با تکیه بر نرم‌افزار و سخت‌افزار در هم تنیده، امکان بارگذاری سریع‌تر وبسایت شما را فراهم می‌کند
زیرساخت قدرتمند و منعطفزیرساخت قدرتمند و منعطفساختار منعطف ویراویر حتی در ساعت‌های اوج ترافیک اینترنتی، ۹۹% دسترسی موفق به سرور را تضمین می‌کند
امنیت بالاامنیت بالاامنیت مبتنی بر دانش و منابع ویراویر داده‌های وبسایت و کاربران شما را به صورت ۲۴ ساعته محافظت می‌کند
سئوی خودکارسئوی خودکاربا سئوی درون‌ساخته برای بهینه‌سازی وبسایت خود در نمایش موتورهای جست و جو، از توانمندی‌های سئوی مورد نیاز خود در ویراویر بهره بگیرید.
طراحی سازگارطراحی سازگارپاسخگو به اندازه نمایشگر / کامپیوتر / تلفن / تلویزیون هوشمند
+989357706600