شعر پارسی

این مقاله اهمیت فرهنگی و زبانی شعر پارسی را توضیح می‌دهد و نشان می‌دهد که نمایش دقیق وزن، تراز و رسم‌الخط شعر در وب برای حفظ معنا و زیبایی ضروری است. سپس یک راهکار 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).
<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
چک‌لیست ۴۴ گام راه‌اندازی وبسایتچک‌لیست ۴۴ گام راه‌اندازی وبسایتیک مسیر کامل و مرحله‌ای از تعیین هدف، ثبت دامنه و پیکربندی فنی تا تولید محتوا، راه‌اندازی فروشگاه، تست امنیت و سئو و برنامه‌ریزی رشد است که کسب و کار را برای حضور آنلاین پایدار و قابل توسعه آماده می‌کند.
متن‌باز یا متن‌بسته؟! پرسش این است!متن‌باز یا متن‌بسته؟! پرسش این است!این یک پرسش بسیار مهم برای شروع یک کسب و کار اینترنتی است. این سوال، جواب‌های درست زیادی دارد. اما در واقع جواب صحیح آن برای کسب و کاری که شما به آن می‌اندیشید مخصوص خود شماست.
تولید محتوا چیست و چه اهمیتی برای کسب و کار شما دارد؟تولید محتوا چیست و چه اهمیتی برای کسب و کار شما دارد؟اگر می‌خواهید کسب و کارتان را روی اینترنت معرفی کنید، لازم است از اهمیت تولید محتوای خوب و با کیفیت برای شناخته شدن روی اینترنت آگاه شوید!
تخفیف برای همه کالاهای موجود در سایتتخفیف برای همه کالاهای موجود در سایتدر فروشگاه آنلاین ویراویری خود می‌توانید تنها با یک انتخاب ساده تمامی کالاهای موجود در سایت خود را تخفیف دهید.
راهکار هوشمند برای ارتباط دنیای حقیقی با دنیای مجازی!راهکار هوشمند برای ارتباط دنیای حقیقی با دنیای مجازی!در ویراویر نیاز مشتریان واقعی دیده و تلاش شده برترین راهکارهای زیرساخت، شبکه، سخت‌افزار، نرم‌افزار، هوش‌مصنوعی، پردازش اطلاعات، IOT و تولید حرفه‌ای انواع محتواهای دیجیتال با قیمت مناسب در اختیار مشتریان محصولات و یا خدمات ویراویر™ قرار گیرد.
وبسایتوبسایتسایت (واژه عامیانه)، وبسایت (Website) ، وبگاه، تارنما یا تارگاه، مجموعه‌ای از صفحات وب را شامل می‌گردد که می‌تواند محتواهای چندرسانه‌ای یا خدمات مدرن اینترنتی را با استفاده از مرورگر اینترنتی (Internet Browser) و دامنه (Domain) یا آدرس اینترنتی (URL) در اختیار مخاطبانش قرار دهد
ساختار یک آدرس اینترنتی (URL)ساختار یک آدرس اینترنتی (URL)یک آدرس اینترنتی (URL) چیست و چه ساختاری دارد؟
چگونه دامنه آی‌آر (ir) ثبت کنیدچگونه دامنه آی‌آر (ir) ثبت کنیدچگونه دامنه آی‌آر (ir) ثبت و وبسایت ویراویری خود را به آن متصل کنید!
چگونه یک پست، صفحه و یا کالای جدید به وبسایت خود اضافه کنیمچگونه یک پست، صفحه و یا کالای جدید به وبسایت خود اضافه کنیمدر این ویدیو یاد می‌گیرید تا یک کالا، صفحه و یا پست جدید ایجاد و آنرا در جای دلخواه در وبسایت خود نمایش دهید.
هوش مصنوعی | Artificial intelligenceهوش مصنوعی | Artificial intelligenceهوش طبیعی نتیجهٔ تعامل زیست‌شناسی، تغذیه و تجربیات فردی است که توانایی‌های شناختی را شکل می‌دهد. هوش مصنوعی با حافظهٔ گسترده و پردازش سریع داده‌ها فرایندهای تحلیلی مشابهی را اجرا می‌کند اما فاقد تجربهٔ ذهنی و احساسات انسانی است.
یک وبسایت مناسب چه ویژگی‌هایی دارد؟یک وبسایت مناسب چه ویژگی‌هایی دارد؟یک وبسایت حرفه‌ای باید نیازهای مالک را کامل پوشش دهد، تجربه کاربری ساده و سریع ارائه کند، قیمت شفاف و متناسب داشته باشد و مدیریت آن برای مدیران بی‌دردسر باشد. ویراویر همهٔ این ویژگی‌ها را دارد ✅
+989357706600