[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t3-s10-logical":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,10,"t3-s10-logical","book",3,"فصل ۱۰ — logical properties",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},9,"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},11,"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",[20,24,27,32,35,38,41,44,47,50,54],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا هر وقت فاصله یا جای چیزی را تعیین کردی، از کلمه‌های \u003Ccode>left\u003C\u002Fcode>، \u003Ccode>right\u003C\u002Fcode>، \u003Ccode>top\u003C\u002Fcode> و \u003Ccode>bottom\u003C\u002Fcode> استفاده کردی — چپ، راست، بالا، پایین. این کلمه‌ها به \u003Cstrong>جهتِ فیزیکیِ\u003C\u002Fstrong> صفحه بسته‌اند. ولی صفحهٔ ما فارسی و راست‌به‌چپ است، و همین‌جا یک مشکلِ ظریف کمین کرده: کدی که با \u003Ccode>left\u003C\u002Fcode> و \u003Ccode>right\u003C\u002Fcode> نوشته شود، وقتی جهتِ صفحه عوض شود از هم می‌پاشد. این فصل ابزاری را یاد می‌دهد که این مشکل را از ریشه حل می‌کند — property هایی که به‌جای «چپ و راست»، به «شروع و پایانِ» خط فکر می‌کنند و خودشان با جهتِ صفحه هماهنگ می‌شوند.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-physical-vs-logical.65f45d1773.160.webp 160w, \u002F_img\u002F01-image-physical-vs-logical.65f45d1773.320.webp 320w, \u002F_img\u002F01-image-physical-vs-logical.65f45d1773.640.webp 640w, \u002F_img\u002F01-image-physical-vs-logical.65f45d1773.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-physical-vs-logical.65f45d1773.1280.jpg\" srcset=\"\u002F_img\u002F01-image-physical-vs-logical.65f45d1773.160.jpg 160w, \u002F_img\u002F01-image-physical-vs-logical.65f45d1773.320.jpg 320w, \u002F_img\u002F01-image-physical-vs-logical.65f45d1773.640.jpg 640w, \u002F_img\u002F01-image-physical-vs-logical.65f45d1773.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ یک کارت در دو حالت: در حالتِ راست‌به‌چپ آیکون و تورفتگی سمتِ راست‌اند، و در حالتِ چپ‌به‌راست همان‌ها خودبه‌خود به سمتِ چپ رفته‌اند، بدونِ تغییرِ کد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>فرقِ property فیزیکی (\u003Ccode>left\u003C\u002Fcode>\u002F\u003Ccode>right\u003C\u002Fcode>) و logical (\u003Ccode>inline-start\u003C\u002Fcode>\u002F\u003Ccode>inline-end\u003C\u002Fcode>) را توضیح بدهی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>margin-inline\u003C\u002Fcode> و \u003Ccode>padding-block\u003C\u002Fcode> فاصله را جهت‌آگاه بدهی\u003C\u002Fli>\n\u003Cli>بگویی چرا logical properties برای فارسی و RTL حیاتی‌اند\u003C\u002Fli>\n\u003Cli>با \u003Ccode>inset\u003C\u002Fcode> جای یک عنصرِ positioned را جهت‌آگاه تعیین کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۷ (ترم ۲):\u003C\u002Fstrong> \u003Ccode>direction\u003C\u002Fcode> و اینکه \u003Ccode>rtl\u003C\u002Fcode> یعنی صفحه از راست چیده می‌شود.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۸ (ترم ۲):\u003C\u002Fstrong> وسط‌چینِ افقی با \u003Ccode>margin: 0 auto\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۸ این ترم:\u003C\u002Fstrong> \u003Ccode>position\u003C\u002Fcode> و تعیینِ جای یک عنصر با \u003Ccode>top\u003C\u002Fcode>\u002F\u003Ccode>right\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک نظر و یک پاسخِ تودرتو می‌بینی. در این فصل اول با کلمه‌های فیزیکی می‌نویسیمش، می‌بینیم که در صفحهٔ راست‌به‌چپ خراب می‌شود، و بعد با logical properties درستش می‌کنیم — و برای اثبات، جهتِ صفحه را عوض می‌کنیم و می‌بینیم خودش همراهی می‌کند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-3-layout\u002Fsession-10-logical",{"kind":21,"heading":33,"html":34},"۱. دو محور: block و inline","\u003Ch2 id=\"۱-دو-محور-block-و-inline\">۱. دو محور: block و inline\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%AF%D9%88-%D9%85%D8%AD%D9%88%D8%B1-block-%D9%88-inline\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>CSS صفحه را با دو محور می‌شناسد، نه با «چپ و راست و بالا و پایین»:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>محورِ \u003Cstrong>block\u003C\u002Fstrong>: جهتی که بلوک‌ها پشتِ‌هم می‌چینند. در فارسی و انگلیسی این از \u003Cstrong>بالا به پایین\u003C\u002Fstrong> است — هر پاراگرافِ تازه می‌رود زیرِ قبلی.\u003C\u002Fli>\n\u003Cli>محورِ \u003Cstrong>inline\u003C\u002Fstrong>: جهتی که متن در یک خط پیش می‌رود. در فارسی از \u003Cstrong>راست به چپ\u003C\u002Fstrong>، در انگلیسی از \u003Cstrong>چپ به راست\u003C\u002Fstrong>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>نکتهٔ کلیدی اینجاست: محورِ block همیشه بالا-پایین است و عوض نمی‌شود، ولی محورِ inline به \u003Ccode>direction\u003C\u002Fcode>ِ صفحه بسته است. برای همین به‌جای «چپ» و «راست»، CSS از \u003Cstrong>start\u003C\u002Fstrong> و \u003Cstrong>end\u003C\u002Fstrong> حرف می‌زند: \u003Ccode>inline-start\u003C\u002Fcode> یعنی «جایی که خط از آن \u003Cstrong>شروع\u003C\u002Fstrong> می‌شود». در صفحهٔ راست‌به‌چپ، این سمتِ \u003Cstrong>راست\u003C\u002Fstrong> است؛ در صفحهٔ چپ‌به‌راست، سمتِ \u003Cstrong>چپ\u003C\u002Fstrong>. تو یک بار می‌گویی «شروع»، و مرورگر بسته به جهتِ صفحه خودش راست یا چپ را می‌فهمد.\u003C\u002Fp>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>اسمِ فیزیکی\u003C\u002Fth>\n\u003Cth>اسمِ logical\u003C\u002Fth>\n\u003Cth>در صفحهٔ rtl کجاست\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>top\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>block-start\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>بالا\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>bottom\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>block-end\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>پایین\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>right\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>inline-start\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>راست\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>left\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>\u003Ccode>inline-end\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>چپ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n\u003Cp>قبل از ادامه، جواب بده: در یک صفحهٔ \u003Cstrong>چپ‌به‌راست\u003C\u002Fstrong> (انگلیسی)، \u003Ccode>inline-start\u003C\u002Fcode> کدام سمت است؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> چپ. چون خط از چپ شروع می‌شود. همین \u003Ccode>inline-start\u003C\u002Fcode> در صفحهٔ فارسی سمتِ راست بود — و این دقیقاً همان قدرتی است که این فصل به تو می‌دهد: یک کلمه که با جهت هماهنگ می‌شود.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. چرا این مهم است: یک خطای واقعی","\u003Ch2 id=\"۲-چرا-این-مهم-است-یک-خطای-واقعی\">۲. چرا این مهم است: یک خطای واقعی\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%DA%86%D8%B1%D8%A7-%D8%A7%DB%8C%D9%86-%D9%85%D9%87%D9%85-%D8%A7%D8%B3%D8%AA-%DB%8C%DA%A9-%D8%AE%D8%B7%D8%A7%DB%8C-%D9%88%D8%A7%D9%82%D8%B9%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بیا مشکل را با چشمِ خودمان ببینیم. در آزمایشگاه یک نظر داریم و زیرش یک پاسخِ تودرتو (\u003Ccode>.reply\u003C\u002Fcode>) که باید از سمتِ \u003Cstrong>شروعِ\u003C\u002Fstrong> خط کمی تورفتگی داشته باشد تا معلوم شود جوابِ آن نظر است. یک برنامه‌نویس که در ذهنش انگلیسی فکر می‌کند، طبیعتاً می‌نویسد «از چپ فاصله بگیر»:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.reply {\n  margin-left: 32px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>اگر صفحه چپ‌به‌راست بود، این عالی به‌نظر می‌رسید: پاسخ از سمتِ چپ — که همان شروعِ خط است — تو می‌رفت. ولی صفحهٔ ما راست‌به‌چپ است. نگاه کن: تورفتگی افتاده سمتِ \u003Cstrong>چپ\u003C\u002Fstrong>، یعنی سمتِ \u003Cstrong>پایانِ\u003C\u002Fstrong> خط، و پاسخ به لبهٔ راست چسبیده. کاملاً برعکسِ چیزی که می‌خواستیم. کد «درست به‌نظر می‌رسد» ولی در این صفحه غلط است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> تورفتگی سمتِ اشتباه افتاد؟ چون \u003Ccode>margin-left\u003C\u002Fcode> همیشه به سمتِ \u003Cstrong>فیزیکیِ\u003C\u002Fstrong> چپ فاصله می‌دهد، بی‌اعتنا به جهتِ صفحه. چیزی که می‌خواهی «فاصله از سمتِ شروع» است، نه «فاصله از چپ». جوابش property ِ logical است: \u003Ccode>margin-inline-start\u003C\u002Fcode>. این یعنی «از سمتِ شروعِ خط فاصله بگیر» و خودش می‌داند در صفحهٔ راست‌به‌چپ، شروع یعنی راست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Ccode>margin-left\u003C\u002Fcode> را با \u003Ccode>margin-inline-start\u003C\u002Fcode> عوض کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.reply {\n  margin-inline-start: 32px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا تورفتگی افتاد سمتِ \u003Cstrong>راست\u003C\u002Fstrong> — سمتِ شروعِ خط — و پاسخ درست زیرِ نظر و کمی تورفته دیده می‌شود. حالا آزمونِ واقعی: در \u003Ccode>index.html\u003C\u002Fcode> روی تگِ \u003Ccode><html>\u003C\u002Fcode>، مقدارِ \u003Ccode>dir="rtl"\u003C\u002Fcode> را موقتاً به \u003Ccode>dir="ltr"\u003C\u002Fcode> عوض کن و به صفحه نگاه کن. کلِ صفحه چپ‌به‌راست می‌شود و تورفتگیِ پاسخ \u003Cstrong>خودبه‌خود\u003C\u002Fstrong> می‌رود سمتِ چپ — بدونِ اینکه یک حرف از CSS را عوض کنی. اگر با \u003Ccode>margin-left\u003C\u002Fcode> نوشته بودی، حالا در حالتِ ltr درست می‌شد ولی در rtl خراب می‌ماند. با \u003Ccode>margin-inline-start\u003C\u002Fcode>، هر دو حالت درست است. جهت را به \u003Ccode>rtl\u003C\u002Fcode> برگردان.\u003C\u002Fp>\n\u003Cp>این کلِ حرفِ فصل است: \u003Cstrong>یک کد بنویس که در هر دو جهت درست کار کند.\u003C\u002Fstrong> برای سایتی که فارسی است — یا ممکن است روزی چند‌زبانه شود — این نه یک تجمل، که یک ضرورت است.\u003C\u002Fp>\n",{"kind":21,"heading":39,"html":40},"۳. جفتِ کامل: block و inline با هم","\u003Ch2 id=\"۳-جفتِ-کامل-block-و-inline-با-هم\">۳. جفتِ کامل: block و inline با هم\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D8%AC%D9%81%D8%AA%D9%90-%DA%A9%D8%A7%D9%85%D9%84-block-%D9%88-inline-%D8%A8%D8%A7-%D9%87%D9%85\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>margin-inline-start\u003C\u002Fcode> فقط یک طرف را می‌گیرد. اگر هر دو طرفِ محورِ inline را با هم بخواهی، \u003Ccode>margin-inline\u003C\u002Fcode> هست؛ و برای بالا و پایین (محورِ block)، \u003Ccode>margin-block\u003C\u002Fcode>. همین برای \u003Ccode>padding\u003C\u002Fcode> هم هست: \u003Ccode>padding-inline\u003C\u002Fcode> و \u003Ccode>padding-block\u003C\u002Fcode>. به بدنه و کارت‌هایمان لایی و فاصلهٔ جهت‌آگاه می‌دهیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>body {\n  padding-block: 24px;\n  padding-inline: 16px;\n}\n\n.comment {\n  padding-block: 12px;\n  padding-inline: 16px;\n  margin-block-end: 20px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>padding-block: 24px\u003C\u002Fcode> یعنی بالا و پایین هر دو \u003Ccode>24px\u003C\u002Fcode>، و \u003Ccode>padding-inline: 16px\u003C\u002Fcode> یعنی دو طرفِ خط هر دو \u003Ccode>16px\u003C\u002Fcode>. یک خط، دو طرف. و \u003Ccode>margin-block-end\u003C\u002Fcode> یعنی فاصله از سمتِ پایین (پایانِ محورِ block) — همان \u003Ccode>margin-bottom\u003C\u002Fcode>ِ آشنا، ولی با نامِ logical.\u003C\u002Fp>\n\u003Cp>حالا یک هدیهٔ قشنگ: یادت هست وسط‌چینِ افقی را با \u003Ccode>margin: 0 auto\u003C\u002Fcode> می‌کردیم؟ معادلِ logical و خواناترش \u003Ccode>margin-inline: auto\u003C\u002Fcode> است — «دو طرفِ خط را auto کن» — که همان کارِ وسط‌چینی را می‌کند. به کانتینرِ صفحه‌مان می‌دهیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.page {\n  max-width: 520px;\n  margin-inline: auto;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کلِ محتوا در یک ستونِ باریکِ وسطِ صفحه جمع شد، دقیقاً مثلِ \u003Ccode>margin: 0 auto\u003C\u002Fcode>. فرقش این است که \u003Ccode>margin-inline: auto\u003C\u002Fcode> فقط دو طرفِ خط را دست می‌زند و به بالا و پایین کاری ندارد — پس اگر \u003Ccode>margin-block\u003C\u002Fcode> جدا داده باشی، خرابش نمی‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> یک راهِ ساده برای یادسپاری: \u003Cstrong>block = بالا\u002Fپایین، inline = دو طرفِ خط.\u003C\u002Fstrong> هر جا در کدِ قدیمی \u003Ccode>top\u003C\u002Fcode>\u002F\u003Ccode>bottom\u003C\u002Fcode> دیدی، معادلِ logical اش با \u003Ccode>block\u003C\u002Fcode> است؛ هر جا \u003Ccode>left\u003C\u002Fcode>\u002F\u003Ccode>right\u003C\u002Fcode> دیدی، با \u003Ccode>inline\u003C\u002Fcode>. همین دو کلمه کلِ دستگاه را باز می‌کند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. inset: جای عنصرِ positioned، جهت‌آگاه","\u003Ch2 id=\"۴-inset-جای-عنصرِ-positioned-جهت‌آگاه\">۴. inset: جای عنصرِ positioned، جهت‌آگاه\u003Ca class=\"head-anchor\" href=\"#%DB%B4-inset-%D8%AC%D8%A7%DB%8C-%D8%B9%D9%86%D8%B5%D8%B1%D9%90-positioned-%D8%AC%D9%87%D8%AA%E2%80%8C%D8%A2%DA%AF%D8%A7%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>در فصل ۸ یک عنصرِ absolute را با \u003Ccode>top\u003C\u002Fcode> و \u003Ccode>right\u003C\u002Fcode> سرِ جایش گذاشتی. این‌ها هم فیزیکی‌اند و همان مشکل را دارند. معادلِ logical شان هم هست: \u003Ccode>inset-block-start\u003C\u002Fcode> (به‌جای \u003Ccode>top\u003C\u002Fcode>)، \u003Ccode>inset-inline-start\u003C\u002Fcode> (به‌جای \u003Ccode>right\u003C\u002Fcode> در rtl)، و همین‌طور \u003Ccode>-end\u003C\u002Fcode> ها. یک کلمهٔ کوتاه‌تر هم هست: \u003Ccode>inset\u003C\u002Fcode>، که میان‌بُری برای تعیینِ هر چهار طرفِ یک عنصرِ positioned است.\u003C\u002Fp>\n\u003Cp>در آزمایشگاه یک جعبه داریم با یک \u003Ccode>corner\u003C\u002Fcode> (نشانِ گوشه) که باید همیشه به گوشهٔ \u003Cstrong>شروعِ بالا\u003C\u002Fstrong> بچسبد. با logical می‌نویسیمش:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.tag-box {\n  position: relative;\n}\n\n.corner {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> نشانِ قرمز به گوشهٔ \u003Cstrong>بالا-راستِ\u003C\u002Fstrong> جعبه چسبید — چون در صفحهٔ راست‌به‌چپ، \u003Ccode>inline-start\u003C\u002Fcode> یعنی راست و \u003Ccode>block-start\u003C\u002Fcode> یعنی بالا. حالا باز جهتِ صفحه را به \u003Ccode>ltr\u003C\u002Fcode> عوض کن: نشان خودش می‌رود گوشهٔ بالا-چپ. با \u003Ccode>top\u003C\u002Fcode> و \u003Ccode>right\u003C\u002Fcode> این اتفاق نمی‌افتاد و مجبور بودی برای هر جهت جدا کد بنویسی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> خودِ \u003Ccode>inset\u003C\u002Fcode> به‌تنهایی میان‌بُرِ چهار طرف است. مثلاً \u003Ccode>inset: 0\u003C\u002Fcode> یعنی «به هر چهار طرف بچسب» و عنصر را کاملاً روی والدش کش می‌دهد — یک راهِ سریع برای پوشاندنِ کاملِ یک ناحیه. امتحانش کن: به \u003Ccode>.corner\u003C\u002Fcode> به‌جای آن دو خط، فقط \u003Ccode>inset: 0\u003C\u002Fcode> بده و ببین به‌جای یک نقطهٔ گوشه، کلِ جعبه را می‌پوشاند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>این هم دو فایلِ کامل. اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>logical properties<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <article class="comment">\n        <p>یک نظرِ ساده روی این مطلب.<\u002Fp>\n\n        <article class="reply">\n          <p>پاسخِ تودرتو که باید از سمتِ شروع تورفتگی داشته باشد.<\u002Fp>\n        <\u002Farticle>\n      <\u002Farticle>\n\n      <section class="tag-box">\n        <span class="corner"><\u002Fspan>\n        <p>این جعبه یک نشانِ گوشه دارد که همیشه به گوشهٔ شروعِ بالا می‌چسبد.<\u002Fp>\n      <\u002Fsection>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode> — همه‌چیز با logical properties، پس در هر دو جهت درست است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  padding-block: 24px;\n  padding-inline: 16px;\n}\n\n.page {\n  max-width: 520px;\n  margin-inline: auto;\n}\n\n.comment {\n  padding-block: 12px;\n  padding-inline: 16px;\n  margin-block-end: 20px;\n  background-color: #ffffff;\n  border: 1px solid #2c2114;\n}\n\n.reply {\n  margin-block-start: 12px;\n  margin-inline-start: 32px;\n  padding-block: 10px;\n  padding-inline: 14px;\n  background-color: #cfe3f3;\n}\n\n.tag-box {\n  position: relative;\n  padding-block: 16px;\n  padding-inline: 20px;\n  background-color: #ffffff;\n  border: 1px solid #2c2114;\n}\n\n.corner {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  width: 16px;\n  height: 16px;\n  background-color: #bc3e1c;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-logical-axes.e47eec2e7c.160.webp 160w, \u002F_img\u002F02-image-logical-axes.e47eec2e7c.320.webp 320w, \u002F_img\u002F02-image-logical-axes.e47eec2e7c.640.webp 640w, \u002F_img\u002F02-image-logical-axes.e47eec2e7c.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-logical-axes.e47eec2e7c.1280.jpg\" srcset=\"\u002F_img\u002F02-image-logical-axes.e47eec2e7c.160.jpg 160w, \u002F_img\u002F02-image-logical-axes.e47eec2e7c.320.jpg 320w, \u002F_img\u002F02-image-logical-axes.e47eec2e7c.640.jpg 640w, \u002F_img\u002F02-image-logical-axes.e47eec2e7c.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک صفحه با دو محور مشخص‌شده: یک فلش عمودی از بالا به پایین برای محورِ block و یک فلش افقی در جهتِ متن برای محورِ inline که در حالتِ راست‌به‌چپ از راست شروع می‌شود\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک تکه CSS که با \u003Ccode>left\u003C\u002Fcode>\u002F\u003Ccode>right\u003C\u002Fcode>\u002F\u003Ccode>margin-left\u003C\u002Fcode> نوشته‌ای را به دستیار AI ات بده و بپرس «کدام‌های این‌ها در یک صفحهٔ راست‌به‌چپ مشکل می‌سازند، و معادلِ logical شان چیست؟». این یک کاربردِ خوبِ AI است — بازبینیِ کدِ خودت. ولی هر معادلی که داد، \u003Cstrong>در آزمایشگاه جهت را عوض کن و با چشمِ خودت چک کن\u003C\u002Fstrong> که واقعاً با هر دو جهت درست می‌شود؛ AI گاهی \u003Ccode>inline-start\u003C\u002Fcode> و \u003Ccode>inline-end\u003C\u002Fcode> را جابه‌جا می‌گوید.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>logical property\u003C\u002Ftd>\n\u003Ctd>لاجیکال پراپِرتی\u003C\u002Ftd>\n\u003Ctd>property ای که به‌جای چپ\u002Fراستِ فیزیکی، به شروع\u002Fپایانِ جهتِ نوشتار فکر می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>block axis\u003C\u002Ftd>\n\u003Ctd>بلاک اکسیس\u003C\u002Ftd>\n\u003Ctd>محورِ چیدنِ بلوک‌ها؛ در فارسی و انگلیسی از بالا به پایین\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>inline axis\u003C\u002Ftd>\n\u003Ctd>این‌لاین اکسیس\u003C\u002Ftd>\n\u003Ctd>محورِ پیش‌رفتنِ متن در یک خط؛ در فارسی راست‌به‌چپ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>inline-start\u003C\u002Ftd>\n\u003Ctd>این‌لاین-اِستارت\u003C\u002Ftd>\n\u003Ctd>سمتی که خط از آن شروع می‌شود؛ در rtl راست، در ltr چپ\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>margin-inline\u003C\u002Ftd>\n\u003Ctd>مارجین-این‌لاین\u003C\u002Ftd>\n\u003Ctd>margin دو طرفِ خط با هم؛ \u003Ccode>margin-inline: auto\u003C\u002Fcode> یعنی وسط‌چین\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>inset\u003C\u002Ftd>\n\u003Ctd>اینسِت\u003C\u002Ftd>\n\u003Ctd>میان‌بُرِ تعیینِ جای یک عنصرِ positioned؛ \u003Ccode>inset: 0\u003C\u002Fcode> یعنی چسبیدن به هر چهار طرف\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":51,"heading":52,"html":53},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: چرا \u003Ccode>margin-inline-start\u003C\u002Fcode> از \u003Ccode>margin-left\u003C\u002Fcode> برای یک سایتِ فارسی بهتر است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک کارت بساز که یک برچسبِ کوچک در گوشهٔ \u003Cstrong>شروعِ بالا\u003C\u002Fstrong> داشته باشد و متنش از سمتِ شروع کمی تورفتگی. همه‌چیز را با logical properties بنویس (\u003Ccode>inset-*\u003C\u002Fcode>, \u003Ccode>margin-inline-*\u003C\u002Fcode>, \u003Ccode>padding-block\u003C\u002Fcode>). بعد جهتِ \u003Ccode><html>\u003C\u002Fcode> را از \u003Ccode>rtl\u003C\u002Fcode> به \u003Ccode>ltr\u003C\u002Fcode> عوض کن و تأیید کن که کلِ کارت بدونِ تغییرِ CSS درست آینه می‌شود.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک قطعه CSS پیدا کن یا بنویس که با \u003Ccode>margin-left\u003C\u002Fcode>, \u003Ccode>padding-right\u003C\u002Fcode> و \u003Ccode>left\u003C\u002Fcode> پُر شده باشد. همه را به معادلِ logical شان برگردان، و برای هرکدام یک جمله بنویس که در جهتِ مخالف چه اتفاقی می‌افتاد اگر تغییرش نمی‌دادی.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان ابزارِ چیدمانت کامل است: از فصل‌های اولِ این ترم \u003Ccode>flexbox\u003C\u002Fcode> و \u003Ccode>grid\u003C\u002Fcode> را داری، از فصل ۸ \u003Ccode>position\u003C\u002Fcode>، از فصل ۹ لایه‌بندی با \u003Ccode>z-index\u003C\u002Fcode>، و حالا logical properties که همهٔ این‌ها را برای فارسی امن می‌کند. فصل بعد، آخرین فصلِ این ترم، مفهومِ تازه‌ای ندارد — همه‌شان را کنارِ هم می‌گذاریم و \u003Cstrong>layout کاملِ یک سایتِ واقعی\u003C\u002Fstrong> را از صفر می‌سازیم: یک سرصفحه با منو، یک بدنهٔ گرید با ستونِ کناری، یک عنصرِ چسبان، و یک پاصفحه. هرچه این ترم یاد گرفتی، آنجا در یک صفحهٔ واقعی جمع می‌شود.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":252,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,72,76,79,83,87,91,95,99,102,105,108,111,114,117,120,123,126,129,132,135,138,141,144,147,150,153,156,159,162,163,164,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":69,"slug":70,"source":8,"term":69,"title_fa":71},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":73,"slug":74,"source":8,"term":69,"title_fa":75},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":9,"slug":77,"source":8,"term":69,"title_fa":78},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":80,"slug":81,"source":8,"term":69,"title_fa":82},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":84,"slug":85,"source":8,"term":69,"title_fa":86},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":88,"slug":89,"source":8,"term":69,"title_fa":90},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":69,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":69,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":12,"slug":100,"source":8,"term":69,"title_fa":101},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":6,"slug":103,"source":8,"term":69,"title_fa":104},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":69,"slug":106,"source":8,"term":73,"title_fa":107},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":109,"source":8,"term":73,"title_fa":110},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":9,"slug":112,"source":8,"term":73,"title_fa":113},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":80,"slug":115,"source":8,"term":73,"title_fa":116},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":84,"slug":118,"source":8,"term":73,"title_fa":119},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":88,"slug":121,"source":8,"term":73,"title_fa":122},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":124,"source":8,"term":73,"title_fa":125},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":127,"source":8,"term":73,"title_fa":128},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":12,"slug":130,"source":8,"term":73,"title_fa":131},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":6,"slug":133,"source":8,"term":73,"title_fa":134},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":16,"slug":136,"source":8,"term":73,"title_fa":137},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":139,"source":8,"term":9,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":142,"source":8,"term":9,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":9,"slug":145,"source":8,"term":9,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":80,"slug":148,"source":8,"term":9,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":84,"slug":151,"source":8,"term":9,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":88,"slug":154,"source":8,"term":9,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":157,"source":8,"term":9,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":160,"source":8,"term":9,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":69,"slug":166,"source":8,"term":80,"title_fa":167},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":73,"slug":169,"source":8,"term":80,"title_fa":170},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":9,"slug":172,"source":8,"term":80,"title_fa":173},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":80,"slug":175,"source":8,"term":80,"title_fa":176},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":84,"slug":178,"source":8,"term":80,"title_fa":179},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":88,"slug":181,"source":8,"term":80,"title_fa":182},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":184,"source":8,"term":80,"title_fa":185},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":187,"source":8,"term":80,"title_fa":188},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":190,"source":8,"term":84,"title_fa":191},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":73,"slug":193,"source":8,"term":84,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":9,"slug":196,"source":8,"term":84,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":80,"slug":199,"source":8,"term":84,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":84,"slug":202,"source":8,"term":84,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":88,"slug":205,"source":8,"term":84,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":208,"source":8,"term":84,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":211,"source":8,"term":84,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":12,"slug":214,"source":8,"term":84,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":6,"slug":217,"source":8,"term":84,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":69,"slug":220,"source":8,"term":88,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":73,"slug":223,"source":8,"term":88,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":9,"slug":226,"source":8,"term":88,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":80,"slug":229,"source":8,"term":88,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":84,"slug":232,"source":8,"term":88,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":88,"slug":235,"source":8,"term":88,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":238,"source":8,"term":88,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":241,"source":8,"term":88,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":12,"slug":244,"source":8,"term":88,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":6,"slug":247,"source":8,"term":88,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":16,"slug":250,"source":8,"term":88,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105124]