چطور یک قالب را فارسی کنیم ؟

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

از کجا شروع کنیم ؟
تمامی قالبهای استاندارد اصل جدایی ظاهر از ساختار (و گاها رفتار) را رعایت میکنند. در نتیجه هر قالب دارای حداقل یک فایل شیوه نامه (Style Sheet) میباشد که عمده فعالیت ما بر روی این قسمت متمرکز میشود.
برای فارسی سازی بهتر است قالب را در محیطی تحت کنترل و با حداکثر امکانات نصب کنیم. منظور از امکانات محتوای مناسب و کافی برای آزمایش بخشهای مختلف قالب و امکانات آن میباشد که در این مورد برای ورپرس باید وبلاگی با مثلا ۲۰ مطلب ، ۷ دسته بندی تو در تو ، چند صفحه و آرشیوماهانه برای ۴ ماه داشته باشیم.
تذکر : در این مقاله توضیحاتی کلی در مورد مراحل فارسی سازی قالبها و نکات قابل توجه ارائه شده است و فرض بر این است که شما به قدر کافی به مباحث طراحی وب مانند CSS و XHTML و روشهای کار آشنایی دارید.
گام اول : جهت و چیدمان نوشته ها
اولین مسئله ای که در مورد قالبهای انگلیسی وجود دارد جهت یا Direction نوشته هاست.که در زبان انگلیسی از چپ به راست و در زبان فارسی از راست به چپ میباشد. از آنجاییکه جهت و زبان پیش فرض مرورگرها برای نمایش صفحات انگلیسی LTR میباشد در قالبهای انگلیسی نیازی به تعریف جهت نوشته ها نیست که برای فارسی سازی باید به بخشهای مورد نظر این ویژگی را اختصاص دهیم.
اما چطور و کجای صفحه ؟!
شاید ساده ترین راه اضافه کردن این ویژگی به body یا html به نظر بیاید ، ولی راه های بهتری هم هست !
تغییر جهت نوشته ها توسط عنصرbody نوار عمودی پیمایش (Scrollbar) را به سمت چپ میبرد. ممکن است کل ساختار صفحه را به هم بریزد و از آنجاییکه بالاترین عنصر از لحاظ نمودار درختی ساختار شیئی سند است تمامی عناصر دیگر صفحه این خاصیت را از body به ارث میبرند و احتمالا همین موضوع مشکلات فراوانی ایجاد میکند ! بهترین راه تغییر جهت متن در بخشهای خاص دارای متن است. در وبلاگها معمولا دو بخش اصلی با متن زیاد وجود دارد : بخش محتوای اصلی یا بدنه مطالب و بخش نوار کناری وبلاگ. بهترین راه تغییر جهت متن به طور موضعی در این قسمتهاست.
برای پیدا کردن و هدف قرار دادن عنصر مورد نظر در شیوه نامه میتوانید از نوار ابزار قدرتمند فایرفاکس با عنوان WebDeveloper Toolbar استفاده کنید !
در بعضی موراد برای قالبهای انگلیسی و برای بخش خاصی جهت چیدمان یا text-align تعریف شده که برای متن فارسی باید از چپ به راست تغییر کند. دقت کنید که این مورد هم مثل جهت متن باید در محل مناسب اعمال شود.
در نهایت بهتر است جهت و چیدمان عناصری مانند Code و Blockquote را چپ به راست بکنید تا در صورت نیاز به قرار دادن متن انگلیسی یا کد در صفحه مشکلی ایجاد نشود.
گام دوم : ساختار صفحه ، فواصل و کادرها
مرحله بعد پرداختن به ساختار کلی صفحه و فواصل است. معمولا در اکثر قالبها نیازی به تغییر ساختار و شکل کلی قالب و محل قرار گرفتن بلوکهای مختلف نیست. در مورد فواصل هم اغلب توسط دو ویژگی margin و padding برای فاصله گرفتن متن از کناره های کادر و جایگیری مناسب عناصر استفاده میشود که باید فواصل موثر در زیبایی و جهت زبان فارسی را شناسایی و تغییر دهیم.
مثلا به احتمال زیاد در اکثر قالبها متن اصلی را به اندازه ۲۰px از سمت چپ و ۱۰px از سمت راست فاصله میدهند که باید جای این مقادیر عوض شود.
نکته قابل توجه این است که لزومی به تغییر تمامی فواصل نیست و قطعا کار عاقلانه ای نخواهد بود اگر تمامی margin-leftها را به margin-right تغییر دهیم و …
گام سوم : اندازه و نوع فونتها
حال که جهت نوشته ها راست به چپ تنظیم شده و فواصل به درستی تعیین شده باید نوع و اندازه فونتهای فارسی را مشخص کنیم. معمولا خواناترین فونتها برای متنهای اصلی فونت Tahoma با اندازه ای در حدود ۹px تا ۱۱px و فونت Arial با اندازه ای بین ۱۲px تا ۱۴px میباشد که بسته به سلیقه شما و شکل کلی قالب این مورد را تعیین میکنید. در اینجا شما با تجربه وبگردی و طراحی خود باید بهترین و مناسبترین فونت را برای متنها و عنواین انتخاب کنید. مثلا میدانید که فونت Tahoma برای عنواین درشت و با اندازه بالای ۱۲px ظاهر زیبایی ندارد و یا فونت Arial و Times برای متنهای معمولی و با اندازه کمتر از ۱۴px مناسب و خوانا نیستند. همچنین برای متنهای توضیحی و فرعی مانند اطلاعات طمان ارسال مطلب ، نظرات و … بهتر است از اندازه فونت کوچکتری استفاده شود.
مرحله نهایی : بخشهای گرافیکی و ریزه کاری ها
در این مرحله باید به بخشهای گرافیکی توجه کنید. بعضی عناصر گرافیکی صفحه تیز با توجه به جهت متن طراحی شده اند و ممکن است نیاز به چرخش یا برعکس کردن داشته باشند. مانند فلشهایی که اغلب در کنار عنوان مطالب وبلاگ یا شکل کوچکی که در کنار آیتمهای لیست موارد نوار کناری قرار میگیرند.
مسئله بعدی درباره تصاویر گرافیکی پس زمینه محل قرار گیری آنهاست که اکثر در سمت چپ عنوان یا آیتم لیست قرار گرفته اند که باید به سمت راست منتقل شود.
نکات قابل توجه در فارسی سازی !
ممکن است مواردی پیش بیاید که وضعیت قرارگیری یا شکل ضاهری یک عنصر و یک بخش خاص را نتوانید با انتخابگرهای موجود شیوه نامه کنترل کنید و شکل دهید. در این موارد حتی الامکان سعی کنید با استفاده از انتخابگرهای (Selector) حرفه ای و پیشرفته عنصر مورد نظر را هدف قرار دهید و نحوه نمایش آنرا کنترل کنید و تنها در صورتی که امکان کنترل نبود به ساختار قالب یک تگ div یا span با کلاس مورد نظر اضافه کنید و توسط شیوه نامه به آن شکل دهید. بهتر است تمامی مواردی که به شیوه نامه اضافه میکنید را در یک بخش جدا و ترجیحا در انتهای شیوه نامه قرار دهید و با استفاده از Commentها در CSS مشخص کنید که در آینده پیگیری و تغییر آن راحتتر باشد.
نکته آخر اینکه ممکن است لازم باشد متنها و پیغامهایی را درون فایلهای قالب ترجمه کنید. اولا اینکه مطمئن شوید از ویرایشگر متن استاندارد با پشتیبانی UTF-8 استفاده میکنید و دوما سعی کنید که ترجمه مناسبی از متنها ارائه کنید و از کلمات رسمی استفاده کنید.
در آخر سعی کنید قالب فارسی شده را با مروگرهای مختلفی مانند IE ، FireFox و Opera آزمایش کنید و مشکلات احتمالی پیگیری و رفع کنید. و به سلیقه خودتان در صورت نیاز تغییرا ت کوچکی در فواصل و اندازه ها اعمال کنید.
در پایان اگر درست کار کرده باشیم شکل و ظاهر کلی قالب اصلی با متن انگلیسی با قالب فارسی شده ما باید یکی باشد !