در CSS، ویژگی ruby-position برای کنترل موقعیت نواردان (به انگلیسی: ruby text) نسبت به متن پایه استفاده می‌شود. این ویژگی به‌ویژه در زبان‌هایی مانند چینی و ژاپنی که به‌روبی یا توضیحات کوچکی بر روی کاراکترهای نوشتاری نیاز دارند، بسیار کارآمد است.
در فرهنگ‌های شرقی، گاهی اوقات نیاز است که تلفظ یا معنای کاراکترها در کنار آن‌ها نمایش داده شود. به‌همین دلیل، ویژگی ruby به CSS اضافه شده است. ruby-position به شما اجازه می‌دهد تا مکانی که این توضیحات نمایش داده می‌شود را کنترل کنید.
خاصیت ruby-position به شما اجازه می‌دهد تا تعیین کنید که این توضیحات در بالای متن پایه یا پایین آن نشان داده شوند. به‌واسطه طراحی سایت‌های بین‌المللی و نیز محتوای چندزبانه، این ویژگی بسیار مهم و کاربردی است.
در ادامه به بررسی دیدگاهی خواهیم پرداخت که چگونه این خاصیت در واقعیت پیاده‌سازی می‌شود و تأثیر آن در صفحات وب چگونه است.
مثالی از نحوه استفاده از خاصیت ruby-position
<ruby>سایت<rt>site</rt></ruby>
<ruby style="ruby-position: under;">متن<rt>text</rt></ruby>
در مثال بالا، ابتدا یک عنصر ruby تعریف شده است که کلمه 'سایت' را با متن 'site' زیر آن نشان می‌دهد.
سپس، یک عنصر دیگر ruby ایجاد شده که کلمه 'متن' به همراه توضیح 'text' را در زیر آن نشان می‌دهد.
توضیحات خط به خط:
<ruby>: تگ ruby جهت محصورکردن متنی که توضیح یا ترجمه لازم دارد.سایت: متن اصلی که نیاز به توضیح دارد.<rt>: تگ rt برای محصورکردن متن توضیحات یا ترجمه مرتبط با متن اصلی.site: توضیح یا ترجمه‌ای که توسط تگ rt نمایش داده می‌شود.style="ruby-position: under;": این خط باعث می‌شود که توضیحات در زیر متن اصلی قرار گیرد.