کتابخانه‌ی استاندارد · گرافیک و بازی

جعبه سی اس اس `gui.cssbox`

موتور چینش جعبه‌های CSS به زبان سلام: جریان بلوکی با ادغام حاشیه، فلکس‌باکس، جای‌گذاری مطلق و چینش دوباره‌ی جزئی.

واردسازی رابط گرافیکی.جعبه سی اس اس

نام آرگومان‌ها شناسه‌ی خود کد است و معادل فارسی ندارد؛ گونه‌ها، کلیدواژه‌ها و نام بسته‌ها با معادل فارسی نوشته می‌شوند.

در این صفحه

نوار ابزار با فلکس‌باکس و متن
جریان بلوکی و جای‌گذاری مطلق
تغییر یک جعبه
شبکه‌ی صفحه با ناحیه‌های نام‌دار
جدولی با گستره و عنوان
گونه‌ها
تابع‌ها

این بسته جای هر جعبه‌ی رابط کاربری را با قاعده‌های CSS محاسبه می‌کند تا صفحه‌ای که بومی رسم می‌شود همان هندسه‌ی صفحه‌ی مرورگر را داشته باشد. یک درخت از جعبه‌ها می‌سازید، به هر جعبه یک سبک می‌دهید (نمایش، اندازه، حاشیه‌ها، مرز، ویژگی‌های فلکس و مانند آن) و محاسبه را با اندازه‌ی پنجره صدا می‌زنید. سپس جانمایی گره جای، اندازه، جعبه‌ی محتوا و ناحیه‌ی پیمایش هر جعبه را می‌دهد. این بسته چیزی رسم نمی‌کند و قلم نمی‌شناسد: متن و تصویر برگ‌هایی‌اند که اندازه‌شان را تابع سنجشی که شما می‌دهید برمی‌گرداند.

جریان بلوکی از CSS 2 پیروی می‌کند و حاشیه‌ها را میان هم‌نیاها، میان والد و نخستین یا آخرین فرزند و از درون جعبه‌های خالی ادغام می‌کند. فلکس‌باکس از مشخصات CSS پیروی می‌کند: اندازه‌ی پایه، حلقه‌ی رشد و کوچک شدن با منجمد کردن، شکستن خط، همه‌ی مقدارهای چینش و تراز، حاشیه‌ی خودکار، خط پایه، جهت‌های وارون، ترتیب و سطرهای راست به چپ. جعبه‌های مطلق و ثابت نسبت به جعبه‌ی دربرگیرنده جای می‌گیرند، از جمله در جایگاه ایستا وقتی فاصله‌ها خودکارند. شناور، جریان متن درون‌خطی و نوشتار عمودی هنوز پشتیبانی نمی‌شوند.

شبکه از CSS Grid سطح ۱ پیروی می‌کند: فهرست ردیف‌ها با پیکسل، درصد، fr، auto، min-content، max-content، fit-content()، minmax() و repeat() همراه با auto-fill و auto-fit، خط‌های نام‌دار، ناحیه‌های نام‌دار، ردیف‌های ضمنی، جای‌دهی خودکار پراکنده و فشرده در هر دو جهت، گستره و خط‌های منفی، الگوریتم کامل اندازه‌گذاری ردیف‌ها، همه‌ی مقدارهای چینش و تراز، خط پایه و جعبه‌های مطلق که در ناحیه‌ی شبکه‌ی خود جای می‌گیرند. زیرشبکه پشتیبانی نمی‌شود. ویژگی‌های شبکه رشته‌هایی با نحو CSS هستند، مانند "repeat(3, 1fr)"؛ درخت رونوشت خود را نگه می‌دارد و فهرست ردیف معتبر است و آزمون‌های همانند درستی مقدار را می‌گویند.

جدول‌ها از مدل جدول CSS 2.1 به همان شیوه‌ی Chrome پیروی می‌کنند: سطر، گروه سطر، گروه سرآیند و پاورقی (که به بالا و پایین می‌روند)، ستون و گروه ستون، عنوان در بالا یا پایین، سطر و خانه‌ی بی‌نام دور فرزندان نابه‌جا، گستره‌ی ستون و سطر، پهنای خودکار ستون‌ها از کمینه و بیشینه‌ی پهنای محتوای هر خانه (با خانه‌های درصدی و ثابت)، چینش ثابت جدول، فاصله‌ی مرزها، مرزهای ادغام شده، پخش بلندی اضافه میان سطرها و تراز عمودی در خانه‌ها.

الگوریتم‌های بلوکی، فلکس و شبکه برگردانی از Taffy هستند و بسته با ۱۵۲۷ آزمون Taffy (۶۱۶ آزمون با شبکه) که در Chrome اندازه گرفته شده‌اند، در هر دو مدل سنجش جعبه و هر دو جهت، آزموده می‌شود. جدول‌ها از روی مشخصات نوشته شده‌اند و با ۵۳ نمونه که در Chrome بی‌سر اندازه گرفته شده‌اند سنجیده می‌شوند.

نکته‌ها

درازاها از پیش محاسبه‌شده‌اند: پیکسل یا درصد بدهید و em و rem و vw و vh را پیش از ساختن سبک تبدیل کنید.
پیش‌فرض‌ها مقدارهای آغازین CSS هستند: نمایش بلوکی، جایگاه عادی و سنجش جعبه‌ی محتوا.
شناسه‌ها عددهای ساده به ترتیب افزودن گره‌اند و گره‌ای که به محاسبه می‌دهید ریشه است.
نتیجه‌ها مانند Chrome به پیکسل کامل گرد می‌شوند؛ با تنظیم گردکردن می‌توانید کسرها را ببینید.
هر گره آخرین نتیجه‌هایش را نگه می‌دارد. پس از تغییر سبک فقط همان گره و نیاکانش دوباره چیده می‌شوند؛ وقتی محتوای پشت تابع سنجش عوض شد علامت تغییر را صدا بزنید.

نوار ابزار با فلکس‌باکس و متن

یک سطر با عنوانی که رشد می‌کند، یک دکمه و نشانی که با ترتیب به اول آمده. تابع سنجش جای متن را می‌گیرد: می‌گوید متن با فضای نامحدود چه پهنایی دارد، تا کجا باریک می‌شود و در یک پهنای معین چه بلندی‌ای دارد. با راست به چپ کردن جهت، سطر قرینه می‌شود.

gui-cssbox-guide-flex.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع label(chars: صحیح، mi: جعبه سی اس اس.داده‌سنجش): جعبه سی اس اس.سنجیده:
    full := (chars برگردان اعشار۶۴) * 8.0
    اگر mi.پهنای موجود.قسم فضا برابر جعبه سی اس اس.نوع‌فضا.فضای کمینه محتوا:
        برگشت جعبه سی اس اس.سنجش شده با خط پایه(40.0، 32.0، 12.0)
    پایان
    اگر mi.پهنای موجود.قسم فضا برابر جعبه سی اس اس.نوع‌فضا.فضای معین و mi.پهنای موجود.مقدار فضا کوچکتر full:
        برگشت جعبه سی اس اس.سنجش شده با خط پایه(mi.پهنای موجود.مقدار فضا، 32.0، 12.0)
    پایان
    برگشت جعبه سی اس اس.سنجش شده با خط پایه(full، 16.0، 12.0)
پایان

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    bar := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.فلکس، پهنا = جعبه سی اس اس.پیکسل(400.0)، حاشیه درونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(8.0))، فاصله ستون ها = جعبه سی اس اس.پیکسل(8.0)، تراز آیتم ها = جعبه سی اس اس.نوع‌تراز.تراز خط پایه، چینش محتوا = جعبه سی اس اس.نوع‌تراز.فاصله میان })
    title := t.افزودن گره(جعبه سی اس اس.سبک { رشد فلکس = 1.0، کوچک شدن فلکس = 1.0، پایه فلکس = جعبه سی اس اس.خودکار() })
    t.تنظیم سنجش(title، (mi: جعبه سی اس اس.داده‌سنجش): برگشت label(30، mi) پایان)
    button := t.افزودن گره(جعبه سی اس اس.سبک { حاشیه درونی = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.پیکسل(12.0)، جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.پیکسل(12.0))، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(1.0)) })
    t.تنظیم سنجش(button، (mi: جعبه سی اس اس.داده‌سنجش): برگشت label(4، mi) پایان)
    badge := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.پیکسل(24.0)، بلندی = جعبه سی اس اس.پیکسل(24.0)، تراز خود = جعبه سی اس اس.نوع‌تراز.تراز میانه، ترتیب = -1 })
    t.افزودن فرزند(bar، title)
    t.افزودن فرزند(bar، button)
    t.افزودن فرزند(bar، badge)
    t.محاسبه(bar، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    هر id در [bar، badge، title، button]:
        l := t.جانمایی گره(id)
        سرچاپ id، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه
    پایان
    rtl := t.سبک گره(bar)
    ناپایا s := rtl
    s.جهت = جعبه سی اس اس.نوع‌جهت.راست به چپ
    t.تنظیم سبک(bar، s)
    t.محاسبه(bar، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "rtl badge x"، t.جانمایی گره(badge).ایکس، "title x"، t.جانمایی گره(title).ایکس
پایان

خروجی0 0 0 416 42 3 8 9 24 24 1 40 13 294 16 2 342 8 66 26 rtl badge x 384 title x 82

جریان بلوکی و جای‌گذاری مطلق

حاشیه‌ی پایین سرصفحه و حاشیه‌ی بالای کارت در یک فاصله‌ی ۳۰ پیکسلی ادغام می‌شوند، کارت با حاشیه‌ی خودکار وسط می‌رود و دکمه‌ی بستن در گوشه‌ی صفحه می‌نشیند که چون جای‌گذاری شده جعبه‌ی دربرگیرنده‌ی آن است. جعبه‌ای با نمایش پنهان فضایی نمی‌گیرد.

gui-cssbox-guide-block.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    page := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.پیکسل(320.0)، جایگاه = جعبه سی اس اس.نوع‌جایگاه.نسبی، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(2.0)) })
    head := t.افزودن گره(جعبه سی اس اس.سبک { بلندی = جعبه سی اس اس.پیکسل(40.0)، حاشیه بیرونی = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(10.0)، جعبه سی اس اس.پیکسل(0.0)، جعبه سی اس اس.پیکسل(20.0)، جعبه سی اس اس.پیکسل(0.0)) })
    card := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.درصد(50.0)، حاشیه بیرونی = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(30.0)، جعبه سی اس اس.خودکار()، جعبه سی اس اس.پیکسل(0.0)، جعبه سی اس اس.خودکار())، حاشیه درونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(10.0))، سنجش جعبه = جعبه سی اس اس.نوع‌سنجش‌جعبه.جعبه مرز، کمینه بلندی = جعبه سی اس اس.پیکسل(60.0) })
    close := t.افزودن گره(جعبه سی اس اس.سبک { جایگاه = جعبه سی اس اس.نوع‌جایگاه.مطلق، فاصله جایگاه = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.خودکار()، جعبه سی اس اس.خودکار())، پهنا = جعبه سی اس اس.پیکسل(16.0)، بلندی = جعبه سی اس اس.پیکسل(16.0) })
    hidden := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.بدون نمایش، بلندی = جعبه سی اس اس.پیکسل(500.0) })
    t.افزودن فرزند(page، head)
    t.افزودن فرزند(page، card)
    t.افزودن فرزند(page، close)
    t.افزودن فرزند(page، hidden)
    t.محاسبه(page، جعبه سی اس اس.معین(800.0)، جعبه سی اس اس.معین(600.0))
    هر id در [page، head، card، close، hidden]:
        l := t.جانمایی گره(id)
        سرچاپ id، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه، "margin"، l.حاشیه بیرونی جعبه.لبه بالا، l.حاشیه بیرونی جعبه.لبه چپ
    پایان
پایان

خروجی0 0 0 324 144 margin 0 0 1 2 12 320 40 margin 10 0 2 82 82 160 60 margin 30 80 3 302 6 16 16 margin 0 0 4 0 0 0 0 margin 0 0

تغییر یک جعبه

شمارنده‌ها کار حافظه‌ی نهان را نشان می‌دهند: محاسبه‌ی دوباره بدون تغییر هیچ چیزی را حساب نمی‌کند و تغییر یک برگ فقط همان برگ و نیاکانش را دوباره می‌چیند. چیدن صفحه‌ای با ۵۰۰۰ جعبه (۵۰ سطر فلکس شکسته با ۱۰۰ برگ متنی) بار اول حدود ۱۵ میلی‌ثانیه روی یک هسته‌ی رایانه‌ی رومیزی و پس از تغییر یک برگ حدود ۰٫۷ میلی‌ثانیه طول می‌کشد که بیشترش گرد کردن کل درخت است.

gui-cssbox-guide-incremental.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    list := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.فلکس، جهت فلکس = جعبه سی اس اس.نوع‌جهت‌فلکس.ستونی، فاصله سطرها = جعبه سی اس اس.پیکسل(4.0) })
    ناپایا items := وکتور {} برگردان وکتور<صحیح>
    دیرکن items.آزادکن()
    تکرار 3 در i:
        item := t.افزودن گره(جعبه سی اس اس.سبک { بلندی = جعبه سی اس اس.پیکسل(20.0) })
        t.تنظیم سنجش(item، (_mi: جعبه سی اس اس.داده‌سنجش): برگشت جعبه سی اس اس.سنجش شده(100.0 + (i برگردان اعشار۶۴) * 10.0، 20.0) پایان)
        items.بیفزا(item)
    پایان
    t.تنظیم فرزندان(list، items)
    سرچاپ "nodes"، t.شمار گره ها()، "children"، t.شمار فرزندان(list)، "second"، t.فرزند(list، 1)، "parent"، t.والد(items.بگیر(0))
    t.محاسبه(list، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "size"، t.جانمایی گره(list).پهنای جعبه، t.جانمایی گره(list).بلندی جعبه، "calls"، t.شمار محاسبه ها()، "measures"، t.شمار سنجش ها()
    t.صفر کردن شمارنده ها()
    t.محاسبه(list، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "again"، t.شمار محاسبه ها()، "dirty"، t.تغییر کرده است(list)
    t.تنظیم سنجش(items.بگیر(2)، (_mi: جعبه سی اس اس.داده‌سنجش): برگشت جعبه سی اس اس.سنجش شده(200.0، 20.0) پایان)
    سرچاپ "dirty"، t.تغییر کرده است(list)، t.تغییر کرده است(items.بگیر(0))
    t.محاسبه(list، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "width"، t.جانمایی گره(list).پهنای جعبه، "calls"، t.شمار محاسبه ها()
    t.حذف سنجش(items.بگیر(2))
    t.علامت تغییر(items.بگیر(1))
    t.تنظیم گردکردن(نادرست)
    t.محاسبه(list، جعبه سی اس اس.فضای کمینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "width"، t.جانمایی گره(list).پهنای جعبه
پایان

خروجیnodes 4 children 3 second 2 parent 0 size 120 68 calls 10 measures 9 again 0 dirty false dirty true false width 200 calls 6 width 110

شبکه‌ی صفحه با ناحیه‌های نام‌دار

سرصفحه، ستون کناری، بخش اصلی و پاورقی با نام ناحیه جای می‌گیرند و جعبه‌ی اصلی با چینش خود در خانه‌اش وسط می‌آید. شبکه‌ی دوم سطری ۲۵۰ پیکسلی را با هر تعداد ستون ۷۰ پیکسلی که جا شود پر می‌کند و آن‌ها را می‌کشد و کاشی چهارم به سطر بعد می‌رود. شبکه‌ای ۲۰ در ۵۰ از خانه‌های متنی بار اول حدود ۱ تا ۳٫۵ میلی‌ثانیه و پس از تغییر یک خانه حدود ۰٫۸ تا ۳٫۳ میلی‌ثانیه روی یک هسته طول می‌کشد.

gui-cssbox-guide-grid.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    page := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.شبکه ای، پهنا = جعبه سی اس اس.پیکسل(400.0)، الگوی ستون های شبکه = "120px 1fr"، الگوی سطرهای شبکه = "40px auto 30px"، ناحیه های شبکه = `"head head" "side main" "foot foot"`، فاصله ستون ها = جعبه سی اس اس.پیکسل(10.0)، فاصله سطرها = جعبه سی اس اس.پیکسل(6.0) })
    head := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "head"، انتهای سطر شبکه = "head"، آغاز ستون شبکه = "head"، انتهای ستون شبکه = "head" })
    side := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "side"، انتهای سطر شبکه = "side"، آغاز ستون شبکه = "side"، انتهای ستون شبکه = "side"، بلندی = جعبه سی اس اس.پیکسل(80.0) })
    body := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "main"، انتهای سطر شبکه = "main"، آغاز ستون شبکه = "main"، انتهای ستون شبکه = "main"، چینش خود = جعبه سی اس اس.نوع‌تراز.تراز میانه، پهنا = جعبه سی اس اس.پیکسل(100.0)، بلندی = جعبه سی اس اس.پیکسل(50.0) })
    foot := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "foot"، انتهای سطر شبکه = "foot"، آغاز ستون شبکه = "foot"، انتهای ستون شبکه = "foot" })
    tiles := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.شبکه ای، پهنا = جعبه سی اس اس.پیکسل(250.0)، الگوی ستون های شبکه = "repeat(auto-fill, minmax(70px, 1fr))"، جریان خودکار شبکه = جعبه سی اس اس.نوع‌جریان‌شبکه.جریان سطری، فاصله ستون ها = جعبه سی اس اس.پیکسل(4.0) })
    هر c در [head، side، body، foot]:
        t.افزودن فرزند(page، c)
    پایان
    تکرار 4:
        tile := t.افزودن گره(جعبه سی اس اس.سبک { بلندی = جعبه سی اس اس.پیکسل(20.0) })
        t.افزودن فرزند(tiles، tile)
    پایان
    t.محاسبه(page، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    هر id در [page، head، side، body، foot]:
        l := t.جانمایی گره(id)
        سرچاپ id، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه
    پایان
    t.محاسبه(tiles، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    تکرار t.شمار فرزندان(tiles) در i:
        l := t.جانمایی گره(t.فرزند(tiles، i))
        سرچاپ "tile"، i، l.ایکس، l.ایگرگ، l.پهنای جعبه
    پایان
    سرچاپ جعبه سی اس اس.فهرست ردیف معتبر است("1fr [mid] minmax(40px, 2fr)")، جعبه سی اس اس.اندازه های ردیف معتبر است("50px auto")، جعبه سی اس اس.خط شبکه معتبر است("span 2")، جعبه سی اس اس.نواحی شبکه معتبر است("'a b' 'a c'")
پایان

خروجی0 0 0 400 162 1 0 0 400 40 2 0 46 120 80 3 215 46 100 50 4 0 132 400 30 tile 0 0 0 81 tile 1 85 0 80 tile 2 169 0 81 tile 3 0 20 81 true true true true

جدولی با گستره و عنوان

پهنای ستون‌ها از محتوای خانه‌ها می‌آید. خانه‌ی نخست دو سطر را می‌پوشاند و به‌طور عمودی وسط می‌آید، خانه‌ی آخر دو ستون را می‌پوشاند و عنوان پایین جدول است. سپس جدول به چینش ثابت ۳۰۰ پیکسلی با مرزهای ادغام شده می‌رود: چهار ستون پهنا را برابر تقسیم می‌کنند و هر خانه نیمی از هر مرز مشترک را نگه می‌دارد. جدولی با ۲۰۰ سطر و ۵ ستون متنی بار اول حدود ۰٫۷ تا ۱ میلی‌ثانیه و پس از تغییر یک خانه حدود ۰٫۴ تا ۰٫۵ میلی‌ثانیه طول می‌کشد.

gui-cssbox-guide-table.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    table := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.جدول، فاصله مرز افقی = 4.0، فاصله مرز عمودی = 2.0، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(1.0)) })
    caption := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.عنوان جدول، سوی عنوان = جعبه سی اس اس.نوع‌سوی‌عنوان.عنوان پایین، بلندی = جعبه سی اس اس.پیکسل(16.0) })
    body := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.گروه سطر جدول })
    t.افزودن فرزند(table، caption)
    t.افزودن فرزند(table، body)
    widths := [30.0، 80.0، 50.0، 40.0، 120.0]
    ناپایا cells := وکتور {} برگردان وکتور<صحیح>
    دیرکن cells.آزادکن()
    تکرار 2 در r:
        row := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.سطر جدول })
        t.افزودن فرزند(body، row)
        تکرار 3 - r در c:
            ناپایا st := جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.خانه جدول، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(2.0))، حاشیه درونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(2.0))، تراز عمودی = جعبه سی اس اس.نوع‌تراز‌عمودی.تراز عمودی میانه }
            اگر r برابر 1 و c برابر 1:
                st.گستره ستون = 2
            پایان
            اگر r برابر 0 و c برابر 0:
                st.گستره سطر = 2
            پایان
            cell := t.افزودن گره(st)
            inner := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.پیکسل(widths[r * 3 + c])، بلندی = جعبه سی اس اس.پیکسل(12.0 + (r برگردان اعشار۶۴) * 10.0) })
            t.افزودن فرزند(cell، inner)
            t.افزودن فرزند(row، cell)
            cells.بیفزا(cell)
        پایان
    پایان
    t.محاسبه(table، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    tl := t.جانمایی گره(table)
    سرچاپ "table"، tl.پهنای جعبه، tl.بلندی جعبه
    هر c در cells:
        l := t.جانمایی گره(c)
        سرچاپ "cell"، c، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه
    پایان
    cl := t.جانمایی گره(caption)
    سرچاپ "caption"، cl.ایگرگ، cl.پهنای جعبه
    ناپایا fixed := t.سبک گره(table)
    fixed.چینش جدول = جعبه سی اس اس.نوع‌چینش‌جدول.چینش ثابت جدول
    fixed.پهنا = جعبه سی اس اس.پیکسل(300.0)
    fixed.ادغام مرز = جعبه سی اس اس.نوع‌ادغام‌مرز.مرز ادغام شده
    t.تنظیم سبک(table، fixed)
    t.محاسبه(table، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    هر c در cells:
        l := t.جانمایی گره(c)
        سرچاپ "fixed"، c، l.ایکس، l.پهنای جعبه، l.مرز جعبه.لبه چپ
    پایان
    ناپایا first := t.سبک گره(cells[0])
    first.خطوط مرز = جعبه سی اس اس.خطوط‌مرز { خط بالا = جعبه سی اس اس.نوع‌خط‌مرز.خط پنهان، خط راست = جعبه سی اس اس.نوع‌خط‌مرز.خط دوتایی، خط پایین = جعبه سی اس اس.نوع‌خط‌مرز.خط پیوسته، خط چپ = جعبه سی اس اس.نوع‌خط‌مرز.خط خط چین }
    t.تنظیم سبک(cells[0]، first)
    t.محاسبه(table، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    ناپایا segs := t.مرزهای ادغامی(table)
    دیرکن segs.آزادکن()
    سرچاپ "segments"، segs.طول()
    s0 := segs[0]
    سرچاپ "segment"، s0.ایکس مرز، s0.ایگرگ مرز، s0.پهنای تکه، s0.بلندی تکه، s0.گره برنده، s0.سوی برنده، s0.عمودی است
پایان

خروجیtable 272 74 cell 4 0 0 38 52 cell 6 42 0 88 20 cell 8 134 0 124 20 cell 11 42 0 88 30 cell 13 134 0 128 30 caption 58 272 fixed 4 0 75 1 fixed 6 75 75 1 fixed 8 150 75 1 fixed 11 75 75 1 fixed 13 150 150 1 segments 19 segment 300 18 2 30 13 1 true

گونه‌ها

نوع‌درازا `LengthKind`

جداشمار نوع‌درازا

نوع یک درازا: خودکار، پیکسل، درصد یا یکی از کلیدواژه‌های اندازه.

نام	انگلیسی	توضیح
درازای خودکار	`Auto`	مقدار `auto` در CSS.
درازای پیکسلی	`Px`	درازا به پیکسل منطقی.
درازای درصدی	`Percent`	درصدی از جعبه‌ی دربرگیرنده؛ عدد همان عدد CSS است و ۵۰ یعنی ۵۰٪.
درازای کمینه محتوا	`MinContent`	کلیدواژه‌ی `min-content`: تا جایی که محتوا اجازه دهد باریک.
درازای بیشینه محتوا	`MaxContent`	کلیدواژه‌ی `max-content`: به پهنای محتوا بدون شکستن خط.
درازای اندازه محتوا	`FitContent`	کلیدواژه‌ی `fit-content`: پهنای محتوا، اما نه پهن‌تر از فضای موجود.
درازای کشیده	`Stretch`	کلیدواژه‌ی `stretch`: پر کردن جعبه‌ی دربرگیرنده منهای حاشیه‌ها.

gui-cssbox-Style.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا st := جعبه سی اس اس.سبک {}
    سرچاپ st.نمایش برابر جعبه سی اس اس.نوع‌نمایش.بلوکی، st.جایگاه برابر جعبه سی اس اس.نوع‌جایگاه.عادی، st.کوچک شدن فلکس، st.پهنا.قسم درازا برابر جعبه سی اس اس.نوع‌درازا.درازای خودکار
    st.پهنا = جعبه سی اس اس.درصد(50.0)
    st.بیشینه پهنا = جعبه سی اس اس.پیکسل(300.0)
    st.کمینه بلندی = جعبه سی اس اس.کمینه محتوا()
    st.بلندی = جعبه سی اس اس.اندازه محتوا()
    st.حاشیه بیرونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.خودکار())
    st.حاشیه درونی = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(1.0)، جعبه سی اس اس.پیکسل(2.0)، جعبه سی اس اس.پیکسل(3.0)، جعبه سی اس اس.پیکسل(4.0))
    سرچاپ st.پهنا.مقدار درازا، st.حاشیه درونی.سوی چپ.مقدار درازا، st.حاشیه بیرونی.سوی بالا.قسم درازا برابر جعبه سی اس اس.نوع‌درازا.درازای خودکار
    m := جعبه سی اس اس.بیشینه محتوا()
    s := جعبه سی اس اس.کشیده()
    سرچاپ m.قسم درازا برابر جعبه سی اس اس.نوع‌درازا.درازای بیشینه محتوا، s.قسم درازا برابر جعبه سی اس اس.نوع‌درازا.درازای کشیده
    sp := جعبه سی اس اس.معین(120.0)
    سرچاپ sp.قسم فضا برابر جعبه سی اس اس.نوع‌فضا.فضای معین، sp.مقدار فضا، جعبه سی اس اس.فضای کمینه().قسم فضا برابر جعبه سی اس اس.نوع‌فضا.فضای کمینه محتوا
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    root := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.پیکسل(200.0)، سرریز عمودی = جعبه سی اس اس.نوع‌سرریز.پیمایشی، پهنای نوار پیمایش = 12.0، بلندی = جعبه سی اس اس.پیکسل(50.0)، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(3.0))، حاشیه درونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(5.0)) })
    child := t.افزودن گره(جعبه سی اس اس.سبک { بلندی = جعبه سی اس اس.پیکسل(90.0) })
    t.تنظیم سنجش(child، (mi: جعبه سی اس اس.داده‌سنجش): برگشت جعبه سی اس اس.سنجش شده با خط پایه(mi.پهنای معلوم، 90.0، 14.0) پایان)
    t.افزودن فرزند(root، child)
    t.محاسبه(root، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    l := t.جانمایی گره(root)
    سرچاپ l.ایکس، l.ایگرگ، l.ایکس مطلق، l.ایگرگ مطلق، l.پهنای جعبه، l.بلندی جعبه
    سرچاپ l.ایکس محتوا، l.ایگرگ محتوا، l.پهنای محتوا، l.بلندی محتوا
    سرچاپ l.حاشیه درونی جعبه.لبه بالا، l.حاشیه درونی جعبه.لبه راست، l.حاشیه درونی جعبه.لبه پایین، l.حاشیه درونی جعبه.لبه چپ
    سرچاپ l.مرز جعبه.لبه بالا، l.مرز جعبه.لبه راست، l.مرز جعبه.لبه پایین، l.مرز جعبه.لبه چپ، l.حاشیه بیرونی جعبه.لبه بالا
    سرچاپ l.پهنای نوار پیمایش جعبه، l.بلندی نوار پیمایش جعبه، l.پهنای پیمایش، l.بلندی پیمایش، l.دارای خط پایه، l.خط پایه
پایان

خروجیtrue true 1 true 50 4 true true true true 120 true 0 0 0 0 216 66 8 8 188 50 5 5 5 5 3 3 3 3 0 12 0 198 100 true 22

نوع‌نمایش `Display`

جداشمار نوع‌نمایش

ویژگی display در CSS.

نام	انگلیسی	توضیح
بلوکی	`Block`	جعبه‌ی بلوکی با چینش جریان بلوکی و ادغام حاشیه‌ها.
بلوکی درون خطی	`InlineBlock`	مانند بلوکی که به اندازه‌ی محتوا کوچک می‌شود و زمینه‌ی چینش تازه‌ای می‌سازد؛ چینش درون‌خطی هنوز انجام نمی‌شود.
ریشه جریان	`FlowRoot`	بلوکی که زمینه‌ی چینش بلوکی تازه‌ای می‌سازد و حاشیه‌ی فرزندانش از آن عبور نمی‌کند.
فلکس	`Flex`	نگهدارنده‌ی فلکس که با الگوریتم فلکس‌باکس CSS چیده می‌شود.
فلکس درون خطی	`InlineFlex`	نگهدارنده‌ی فلکسی که درون والد بلوکی به اندازه‌ی محتوا کوچک می‌شود.
فقط فرزندان	`Contents`	خود جعبه حذف می‌شود و فرزندانش جای آن را در والد می‌گیرند.
بدون نمایش	`None`	جعبه و زیردرختش فضایی نمی‌گیرند و جانمایی صفر دارند.
شبکه ای	`Grid`	ظرف شبکه که با الگوریتم شبکه‌ی CSS چیده می‌شود.
شبکه درون خطی	`InlineGrid`	ظرف شبکه‌ای که درون والد بلوکی به اندازه‌ی محتوا جمع می‌شود.
جدول	`Table`	جدول: فرزندانش با مدل جدول CSS چیده می‌شوند و اگر پهنا نداشته باشد به اندازه‌ی ستون‌هایش جمع می‌شود.
جدول درون خطی	`InlineTable`	جدولی که درون والد بلوکی به اندازه‌ی محتوا جمع می‌شود.
گروه سطر جدول	`TableRowGroup`	گروهی از سطرها، مانند `tbody`.
گروه سرآیند جدول	`TableHeaderGroup`	گروهی از سطرها که نخست رسم می‌شود، مانند `thead`.
گروه پاورقی جدول	`TableFooterGroup`	گروهی از سطرها که در پایان رسم می‌شود، مانند `tfoot`.
سطر جدول	`TableRow`	سطر جدول؛ فرزندانش خانه‌های آن هستند.
خانه جدول	`TableCell`	خانه‌ی جدول که درونش مانند بلوکی با بافت قالب‌بندی تازه چیده می‌شود.
ستون جدول	`TableColumn`	ستون، مانند `col`؛ پهنا و گستره‌اش به ستون‌های جدول می‌رسد.
گروه ستون جدول	`TableColumnGroup`	گروهی از ستون‌ها، مانند `colgroup`.
عنوان جدول	`TableCaption`	عنوانی بالا یا پایین جدول، هم‌پهنای جدول.

gui-cssbox-block.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    page := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.پیکسل(320.0)، جایگاه = جعبه سی اس اس.نوع‌جایگاه.نسبی، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(2.0)) })
    head := t.افزودن گره(جعبه سی اس اس.سبک { بلندی = جعبه سی اس اس.پیکسل(40.0)، حاشیه بیرونی = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(10.0)، جعبه سی اس اس.پیکسل(0.0)، جعبه سی اس اس.پیکسل(20.0)، جعبه سی اس اس.پیکسل(0.0)) })
    card := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.درصد(50.0)، حاشیه بیرونی = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(30.0)، جعبه سی اس اس.خودکار()، جعبه سی اس اس.پیکسل(0.0)، جعبه سی اس اس.خودکار())، حاشیه درونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(10.0))، سنجش جعبه = جعبه سی اس اس.نوع‌سنجش‌جعبه.جعبه مرز، کمینه بلندی = جعبه سی اس اس.پیکسل(60.0) })
    close := t.افزودن گره(جعبه سی اس اس.سبک { جایگاه = جعبه سی اس اس.نوع‌جایگاه.مطلق، فاصله جایگاه = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.خودکار()، جعبه سی اس اس.خودکار())، پهنا = جعبه سی اس اس.پیکسل(16.0)، بلندی = جعبه سی اس اس.پیکسل(16.0) })
    hidden := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.بدون نمایش، بلندی = جعبه سی اس اس.پیکسل(500.0) })
    t.افزودن فرزند(page، head)
    t.افزودن فرزند(page، card)
    t.افزودن فرزند(page، close)
    t.افزودن فرزند(page، hidden)
    t.محاسبه(page، جعبه سی اس اس.معین(800.0)، جعبه سی اس اس.معین(600.0))
    هر id در [page، head، card، close، hidden]:
        l := t.جانمایی گره(id)
        سرچاپ id، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه، "margin"، l.حاشیه بیرونی جعبه.لبه بالا، l.حاشیه بیرونی جعبه.لبه چپ
    پایان
پایان

خروجی0 0 0 324 144 margin 0 0 1 2 12 320 40 margin 10 0 2 82 82 160 60 margin 30 80 3 302 6 16 16 margin 0 0 4 0 0 0 0 margin 0 0

نوع‌جریان‌شبکه `GridAutoFlow`

جداشمار نوع‌جریان‌شبکه

ویژگی grid-auto-flow: جعبه‌های بی‌جایگاه چگونه جای می‌گیرند.

نام	انگلیسی	توضیح
جریان سطری	`Row`	هر سطر پر می‌شود و سپس سطر تازه آغاز می‌شود.
جریان ستونی	`Column`	هر ستون پر می‌شود و سپس ستون تازه آغاز می‌شود.
جریان سطری فشرده	`RowDense`	مانند جریان سطری، ولی جعبه‌های بعدی می‌توانند جاهای خالی پیشین را پر کنند.
جریان ستونی فشرده	`ColumnDense`	مانند جریان ستونی، ولی جعبه‌های بعدی می‌توانند جاهای خالی پیشین را پر کنند.

gui-cssbox-grid.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    page := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.شبکه ای، پهنا = جعبه سی اس اس.پیکسل(400.0)، الگوی ستون های شبکه = "120px 1fr"، الگوی سطرهای شبکه = "40px auto 30px"، ناحیه های شبکه = `"head head" "side main" "foot foot"`، فاصله ستون ها = جعبه سی اس اس.پیکسل(10.0)، فاصله سطرها = جعبه سی اس اس.پیکسل(6.0) })
    head := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "head"، انتهای سطر شبکه = "head"، آغاز ستون شبکه = "head"، انتهای ستون شبکه = "head" })
    side := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "side"، انتهای سطر شبکه = "side"، آغاز ستون شبکه = "side"، انتهای ستون شبکه = "side"، بلندی = جعبه سی اس اس.پیکسل(80.0) })
    body := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "main"، انتهای سطر شبکه = "main"، آغاز ستون شبکه = "main"، انتهای ستون شبکه = "main"، چینش خود = جعبه سی اس اس.نوع‌تراز.تراز میانه، پهنا = جعبه سی اس اس.پیکسل(100.0)، بلندی = جعبه سی اس اس.پیکسل(50.0) })
    foot := t.افزودن گره(جعبه سی اس اس.سبک { آغاز سطر شبکه = "foot"، انتهای سطر شبکه = "foot"، آغاز ستون شبکه = "foot"، انتهای ستون شبکه = "foot" })
    tiles := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.شبکه ای، پهنا = جعبه سی اس اس.پیکسل(250.0)، الگوی ستون های شبکه = "repeat(auto-fill, minmax(70px, 1fr))"، جریان خودکار شبکه = جعبه سی اس اس.نوع‌جریان‌شبکه.جریان سطری، فاصله ستون ها = جعبه سی اس اس.پیکسل(4.0) })
    هر c در [head، side، body، foot]:
        t.افزودن فرزند(page، c)
    پایان
    تکرار 4:
        tile := t.افزودن گره(جعبه سی اس اس.سبک { بلندی = جعبه سی اس اس.پیکسل(20.0) })
        t.افزودن فرزند(tiles، tile)
    پایان
    t.محاسبه(page، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    هر id در [page، head، side، body، foot]:
        l := t.جانمایی گره(id)
        سرچاپ id، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه
    پایان
    t.محاسبه(tiles، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    تکرار t.شمار فرزندان(tiles) در i:
        l := t.جانمایی گره(t.فرزند(tiles، i))
        سرچاپ "tile"، i، l.ایکس، l.ایگرگ، l.پهنای جعبه
    پایان
    سرچاپ جعبه سی اس اس.فهرست ردیف معتبر است("1fr [mid] minmax(40px, 2fr)")، جعبه سی اس اس.اندازه های ردیف معتبر است("50px auto")، جعبه سی اس اس.خط شبکه معتبر است("span 2")، جعبه سی اس اس.نواحی شبکه معتبر است("'a b' 'a c'")
پایان

خروجی0 0 0 400 162 1 0 0 400 40 2 0 46 120 80 3 215 46 100 50 4 0 132 400 30 tile 0 0 0 81 tile 1 85 0 80 tile 2 169 0 81 tile 3 0 20 81 true true true true

نوع‌چینش‌جدول `TableLayout`

جداشمار نوع‌چینش‌جدول

ویژگی table-layout.

نام	انگلیسی	گونه	توضیح
چینش خودکار جدول	`Auto`		پهنای ستون‌ها از محتوای همه‌ی خانه‌ها می‌آید.
چینش ثابت جدول	`Fixed`		پهنای ستون‌ها فقط از ستون‌ها و سطر نخست می‌آید؛ وقتی جدول پهنا دارد به کار می‌رود.

gui-cssbox-table.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    table := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.جدول، فاصله مرز افقی = 4.0، فاصله مرز عمودی = 2.0، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(1.0)) })
    caption := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.عنوان جدول، سوی عنوان = جعبه سی اس اس.نوع‌سوی‌عنوان.عنوان پایین، بلندی = جعبه سی اس اس.پیکسل(16.0) })
    body := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.گروه سطر جدول })
    t.افزودن فرزند(table، caption)
    t.افزودن فرزند(table، body)
    widths := [30.0، 80.0، 50.0، 40.0، 120.0]
    ناپایا cells := وکتور {} برگردان وکتور<صحیح>
    دیرکن cells.آزادکن()
    تکرار 2 در r:
        row := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.سطر جدول })
        t.افزودن فرزند(body، row)
        تکرار 3 - r در c:
            ناپایا st := جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.خانه جدول، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(2.0))، حاشیه درونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(2.0))، تراز عمودی = جعبه سی اس اس.نوع‌تراز‌عمودی.تراز عمودی میانه }
            اگر r برابر 1 و c برابر 1:
                st.گستره ستون = 2
            پایان
            اگر r برابر 0 و c برابر 0:
                st.گستره سطر = 2
            پایان
            cell := t.افزودن گره(st)
            inner := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.پیکسل(widths[r * 3 + c])، بلندی = جعبه سی اس اس.پیکسل(12.0 + (r برگردان اعشار۶۴) * 10.0) })
            t.افزودن فرزند(cell، inner)
            t.افزودن فرزند(row، cell)
            cells.بیفزا(cell)
        پایان
    پایان
    t.محاسبه(table، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    tl := t.جانمایی گره(table)
    سرچاپ "table"، tl.پهنای جعبه، tl.بلندی جعبه
    هر c در cells:
        l := t.جانمایی گره(c)
        سرچاپ "cell"، c، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه
    پایان
    cl := t.جانمایی گره(caption)
    سرچاپ "caption"، cl.ایگرگ، cl.پهنای جعبه
    ناپایا fixed := t.سبک گره(table)
    fixed.چینش جدول = جعبه سی اس اس.نوع‌چینش‌جدول.چینش ثابت جدول
    fixed.پهنا = جعبه سی اس اس.پیکسل(300.0)
    fixed.ادغام مرز = جعبه سی اس اس.نوع‌ادغام‌مرز.مرز ادغام شده
    t.تنظیم سبک(table، fixed)
    t.محاسبه(table، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    هر c در cells:
        l := t.جانمایی گره(c)
        سرچاپ "fixed"، c، l.ایکس، l.پهنای جعبه، l.مرز جعبه.لبه چپ
    پایان
    ناپایا first := t.سبک گره(cells[0])
    first.خطوط مرز = جعبه سی اس اس.خطوط‌مرز { خط بالا = جعبه سی اس اس.نوع‌خط‌مرز.خط پنهان، خط راست = جعبه سی اس اس.نوع‌خط‌مرز.خط دوتایی، خط پایین = جعبه سی اس اس.نوع‌خط‌مرز.خط پیوسته، خط چپ = جعبه سی اس اس.نوع‌خط‌مرز.خط خط چین }
    t.تنظیم سبک(cells[0]، first)
    t.محاسبه(table، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    ناپایا segs := t.مرزهای ادغامی(table)
    دیرکن segs.آزادکن()
    سرچاپ "segments"، segs.طول()
    s0 := segs[0]
    سرچاپ "segment"، s0.ایکس مرز، s0.ایگرگ مرز، s0.پهنای تکه، s0.بلندی تکه، s0.گره برنده، s0.سوی برنده، s0.عمودی است
پایان

نوع‌ادغام‌مرز `BorderCollapse`

جداشمار نوع‌ادغام‌مرز

ویژگی border-collapse.

نام	انگلیسی	گونه	توضیح
مرز جدا	`Separate`		هر خانه مرز خودش را دارد و فاصله‌ی مرزها آن‌ها را جدا می‌کند.
مرز ادغام شده	`Collapse`		خانه‌ها، ردیف‌ها، گروه‌های ردیف، ستون‌ها، گروه‌های ستون و خود جدول برای هر لبه یک مرز مشترک دارند که با قاعده‌های کشمکش CSS برگزیده می‌شود (نگاه کنید به `BorderKind`)؛ مرز چینش هر خانه در هر سو نیمی از پهنای برنده است و فاصله صفر است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-table.salam

نوع‌سوی‌عنوان `CaptionSide`

جداشمار نوع‌سوی‌عنوان

ویژگی caption-side.

نام	انگلیسی	گونه	توضیح
عنوان بالا	`Top`		عنوان بالای جدول جای می‌گیرد.
عنوان پایین	`Bottom`		عنوان پایین جدول جای می‌گیرد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-table.salam

نوع‌تراز‌عمودی `VerticalAlign`

جداشمار نوع‌تراز‌عمودی

ویژگی vertical-align آن‌گونه که بر خانه‌های جدول اثر دارد.

نام	انگلیسی	توضیح
تراز عمودی خط پایه	`Baseline`	نخستین خط خانه با خانه‌های دیگرِ هم‌ترازِ خط پایه در سطر هم‌تراز می‌شود.
تراز عمودی بالا	`Top`	محتوا بالای خانه می‌نشیند.
تراز عمودی میانه	`Middle`	محتوا به‌طور عمودی وسط خانه می‌آید.
تراز عمودی پایین	`Bottom`	محتوا پایین خانه می‌نشیند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-table.salam

نوع‌جایگاه `Position`

جداشمار نوع‌جایگاه

ویژگی position در CSS.

نام	انگلیسی	توضیح
عادی	`Static`	جریان عادی؛ فاصله‌های جایگاه نادیده گرفته می‌شوند.
نسبی	`Relative`	جریان عادی و سپس جابه‌جایی با فاصله‌ها؛ برای نوادگان مطلق جعبه‌ی دربرگیرنده است.
مطلق	`Absolute`	بیرون از جریان، نسبت به نزدیک‌ترین نیای جای‌گذاری‌شده یا اگر نباشد نسبت به نمای پنجره.
ثابت	`Fixed`	بیرون از جریان، نسبت به نمای پنجره‌ای که به `محاسبه` داده شده.
چسبان	`Sticky`	فعلاً مانند `نسبی` چیده می‌شود؛ جابه‌جایی هنگام پیمایش اعمال نمی‌شود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-block.salam

نوع‌سنجش‌جعبه `BoxSizing`

جداشمار نوع‌سنجش‌جعبه

اینکه پهنا و بلندی شامل حاشیه‌ی درونی و مرز باشند یا نه.

نام	انگلیسی	گونه	توضیح
جعبه محتوا	`ContentBox`		اندازه‌ها برای جعبه‌ی محتواست (پیش‌فرض CSS).
جعبه مرز	`BorderBox`		اندازه‌ها شامل حاشیه‌ی درونی و مرز است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-block.salam

نوع‌سرریز `Overflow`

جداشمار نوع‌سرریز

مقدار overflow در CSS برای یک محور.

نام	انگلیسی	توضیح
نمایان	`Visible`	محتوا می‌تواند بیرون بزند و در سرریز والد حساب می‌شود.
مخفی	`Hidden`	نگهدارنده‌ی پیمایش بدون نوار؛ کمینه‌ی خودکارش صفر است.
بریده	`Clip`	محتوا بریده می‌شود اما جعبه نگهدارنده‌ی پیمایش نیست.
پیمایشی	`Scroll`	نگهدارنده‌ی پیمایش که همیشه به اندازه‌ی پهنای نوار پیمایش جا نگه می‌دارد.
پیمایش خودکار	`Auto`	نگهدارنده‌ی پیمایش؛ در چینش مانند `مخفی` است و جایی برای نوار نگه نمی‌دارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

نوع‌جهت `Direction`

جداشمار نوع‌جهت

ویژگی direction در CSS.

نام	انگلیسی	گونه	توضیح
چپ به راست	`Ltr`		چپ به راست.
راست به چپ	`Rtl`		راست به چپ: فرزندان بلوکی از راست شروع می‌شوند، سطرهای فلکس از راست می‌آیند و آغاز و انتها جابه‌جا می‌شوند.

gui-cssbox-flex.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع label(chars: صحیح، mi: جعبه سی اس اس.داده‌سنجش): جعبه سی اس اس.سنجیده:
    full := (chars برگردان اعشار۶۴) * 8.0
    اگر mi.پهنای موجود.قسم فضا برابر جعبه سی اس اس.نوع‌فضا.فضای کمینه محتوا:
        برگشت جعبه سی اس اس.سنجش شده با خط پایه(40.0، 32.0، 12.0)
    پایان
    اگر mi.پهنای موجود.قسم فضا برابر جعبه سی اس اس.نوع‌فضا.فضای معین و mi.پهنای موجود.مقدار فضا کوچکتر full:
        برگشت جعبه سی اس اس.سنجش شده با خط پایه(mi.پهنای موجود.مقدار فضا، 32.0، 12.0)
    پایان
    برگشت جعبه سی اس اس.سنجش شده با خط پایه(full، 16.0، 12.0)
پایان

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    bar := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.فلکس، پهنا = جعبه سی اس اس.پیکسل(400.0)، حاشیه درونی = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(8.0))، فاصله ستون ها = جعبه سی اس اس.پیکسل(8.0)، تراز آیتم ها = جعبه سی اس اس.نوع‌تراز.تراز خط پایه، چینش محتوا = جعبه سی اس اس.نوع‌تراز.فاصله میان })
    title := t.افزودن گره(جعبه سی اس اس.سبک { رشد فلکس = 1.0، کوچک شدن فلکس = 1.0، پایه فلکس = جعبه سی اس اس.خودکار() })
    t.تنظیم سنجش(title، (mi: جعبه سی اس اس.داده‌سنجش): برگشت label(30، mi) پایان)
    button := t.افزودن گره(جعبه سی اس اس.سبک { حاشیه درونی = جعبه سی اس اس.ساخت چهارسو(جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.پیکسل(12.0)، جعبه سی اس اس.پیکسل(4.0)، جعبه سی اس اس.پیکسل(12.0))، مرز = جعبه سی اس اس.همه سوها(جعبه سی اس اس.پیکسل(1.0)) })
    t.تنظیم سنجش(button، (mi: جعبه سی اس اس.داده‌سنجش): برگشت label(4، mi) پایان)
    badge := t.افزودن گره(جعبه سی اس اس.سبک { پهنا = جعبه سی اس اس.پیکسل(24.0)، بلندی = جعبه سی اس اس.پیکسل(24.0)، تراز خود = جعبه سی اس اس.نوع‌تراز.تراز میانه، ترتیب = -1 })
    t.افزودن فرزند(bar، title)
    t.افزودن فرزند(bar، button)
    t.افزودن فرزند(bar، badge)
    t.محاسبه(bar، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    هر id در [bar، badge، title، button]:
        l := t.جانمایی گره(id)
        سرچاپ id، l.ایکس، l.ایگرگ، l.پهنای جعبه، l.بلندی جعبه
    پایان
    rtl := t.سبک گره(bar)
    ناپایا s := rtl
    s.جهت = جعبه سی اس اس.نوع‌جهت.راست به چپ
    t.تنظیم سبک(bar، s)
    t.محاسبه(bar، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "rtl badge x"، t.جانمایی گره(badge).ایکس، "title x"، t.جانمایی گره(title).ایکس
پایان

خروجی0 0 0 416 42 3 8 9 24 24 1 40 13 294 16 2 342 8 66 26 rtl badge x 384 title x 82

نوع‌جهت‌فلکس `FlexDirection`

جداشمار نوع‌جهت‌فلکس

ویژگی flex-direction در CSS.

نام	انگلیسی	توضیح
سطری	`Row`	آیتم‌ها در راستای افقی می‌آیند.
سطری وارون	`RowReverse`	سطر با ترتیب وارون.
ستونی	`Column`	آیتم‌ها از بالا به پایین می‌آیند.
ستونی وارون	`ColumnReverse`	ستون با ترتیب وارون.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-flex.salam

نوع‌شکست‌فلکس `FlexWrap`

جداشمار نوع‌شکست‌فلکس

ویژگی flex-wrap در CSS.

نام	انگلیسی	توضیح
بی شکست	`NoWrap`	همه‌ی آیتم‌ها در یک خط می‌مانند.
شکستن	`Wrap`	وقتی خط پر شود آیتم‌ها به خط تازه می‌روند.
شکستن وارون	`WrapReverse`	مانند `شکستن`، با خط‌هایی که در جهت وارون روی هم می‌آیند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-flex.salam

نوع‌تراز `Align`

جداشمار نوع‌تراز

یک نوع برای ویژگی‌های چینش و تراز در CSS.

نام	انگلیسی	توضیح
تراز خودکار	`Auto`	برای تراز خود: همان تراز آیتم‌های نگهدارنده.
تراز معمولی	`Normal`	مقدار `normal`: کشیدن برای آیتم‌ها و آغاز فلکس برای محتوا.
تراز آغاز	`Start`	لبه‌ی آغاز محور در جهت نوشتن.
تراز انتها	`End`	لبه‌ی انتهای محور در جهت نوشتن.
تراز آغاز فلکس	`FlexStart`	لبه‌ی آغاز جهت فلکس.
تراز انتهای فلکس	`FlexEnd`	لبه‌ی انتهای جهت فلکس.
تراز میانه	`Center`	در میانه.
تراز خط پایه	`Baseline`	آیتم‌ها روی نخستین خط پایه‌ای که تابع سنجش گزارش کرده هم‌تراز می‌شوند.
تراز کشیده	`Stretch`	پر کردن خط یا نگهدارنده.
فاصله میان	`SpaceBetween`	فضای آزاد میان آیتم‌ها پخش می‌شود؛ اگر نباشد به آغاز برمی‌گردد.
فاصله پیرامون	`SpaceAround`	فضای آزاد پیرامون هر آیتم؛ اگر منفی باشد به آغاز برمی‌گردد.
فاصله یکنواخت	`SpaceEvenly`	فاصله‌های برابر میان و پیرامون آیتم‌ها؛ اگر منفی باشد به آغاز برمی‌گردد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-flex.salam

نوع‌فضا `SpaceKind`

جداشمار نوع‌فضا

نوع فضایی که جعبه در آن چیده می‌شود.

نام	انگلیسی	توضیح
فضای معین	`Definite`	تعداد معینی پیکسل.
فضای کمینه محتوا	`MinContent`	تا جای ممکن باریک، برای یافتن اندازه‌ی کمینه‌ی محتوا.
فضای بیشینه محتوا	`MaxContent`	با فضای نامحدود، برای یافتن اندازه‌ی بیشینه‌ی محتوا.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

نوع‌خط‌مرز `BorderKind`

جداشمار نوع‌خط‌مرز

سبک خط یک سوی مرز، که فقط برای حل مرزهای ادغامی جدول به کار می‌رود (CSS 2.1 بخش 17.6.2.1): نخست hidden، سپس مرز پهن‌تر، سپس سبک به ترتیب double، solid، dashed، dotted، ridge، outset، groove، inset، سپس جعبه (خانه، ردیف، گروه ردیف، ستون، گروه ستون، جدول) و سپس آن‌که در آغاز یا بالا است.

نام	انگلیسی	توضیح
خط پیوسته	`Solid`	`solid`؛ پیش‌فرض است، پس سبکی که فقط پهنا می‌دهد مانند پیش رفتار می‌کند.
بی خط	`None`	`none`: این سو در ادغام شرکت نمی‌کند.
خط پنهان	`Hidden`	`hidden`: در هر کشمکش برنده است و مرز مشترک را برمی‌دارد.
خط فرورفته	`Inset`	`inset`؛ در ادغام، چنان که CSS می‌گوید، هم‌رتبه‌ی `ridge` است.
خط شیار	`Groove`	`groove`.
خط برآمده	`Outset`	`outset`؛ در ادغام هم‌رتبه‌ی `groove` است.
خط برجسته	`Ridge`	`ridge`.
خط نقطه چین	`Dotted`	`dotted`.
خط خط چین	`Dashed`	`dashed`.
خط دوتایی	`Double`	`double`: بالاترین رتبه.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-table.salam

درازا `Length`

ساختار درازا

درازای CSS که از پیش به پیکسل یا درصد تبدیل شده؛ em و rem و vw و vh را فراخوان تبدیل می‌کند.

نام	انگلیسی	گونه	توضیح
قسم درازا	`kind`	`نوع‌درازا`	نوع درازا.
مقدار درازا	`value`	`اعشار۶۴ = 0`	پیکسل برای نوع پیکسلی، درصد CSS برای نوع درصدی، و در بقیه بی‌کاربرد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

چهارسو `Sides`

ساختار چهارسو

چهار درازا برای حاشیه، مرز یا فاصله‌ی جایگاه.

نام	انگلیسی	گونه	توضیح
سوی بالا	`top`	`درازا`	سوی بالا.
سوی راست	`right`	`درازا`	سوی راست.
سوی پایین	`bottom`	`درازا`	سوی پایین.
سوی چپ	`left`	`درازا`	سوی چپ.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

لبه‌ها `Edges`

ساختار لبه‌ها

چهار مقدار پیکسلی محاسبه‌شده که در جانمایی می‌آید.

نام	انگلیسی	گونه	توضیح
لبه بالا	`top`	`اعشار۶۴ = 0`	لبه‌ی بالا به پیکسل.
لبه راست	`right`	`اعشار۶۴ = 0`	لبه‌ی راست به پیکسل.
لبه پایین	`bottom`	`اعشار۶۴ = 0`	لبه‌ی پایین به پیکسل.
لبه چپ	`left`	`اعشار۶۴ = 0`	لبه‌ی چپ به پیکسل.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-block.salam

خطوط‌مرز `BorderKinds`

ساختار خطوط‌مرز

سبک خط هر سوی یک جعبه.

نام	انگلیسی	گونه	توضیح
خط بالا	`top`	`نوع‌خط‌مرز`	سوی بالا.
خط راست	`right`	`نوع‌خط‌مرز`	سوی راست.
خط پایین	`bottom`	`نوع‌خط‌مرز`	سوی پایین.
خط چپ	`left`	`نوع‌خط‌مرز`	سوی چپ.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-table.salam

مرزادغامی `CollapsedBorder`

ساختار مرزادغامی

یک تکه‌ی کشیدنی از مرز ادغامی جدول: مستطیلی نسبت به جعبه‌ی مرزی جدول و سویی از جعبه که مرزش برنده شد.

نام	انگلیسی	گونه	توضیح
ایکس مرز	`x`	`اعشار۶۴ = 0`	لبه‌ی چپ تکه.
ایگرگ مرز	`y`	`اعشار۶۴ = 0`	لبه‌ی بالای تکه.
پهنای تکه	`width`	`اعشار۶۴ = 0`	پهنای تکه.
بلندی تکه	`height`	`اعشار۶۴ = 0`	بلندی تکه.
گره برنده	`node`	`صحیح = -1`	گره‌ای (خانه، ردیف، گروه ردیف، ستون، گروه ستون یا جدول) که مرزش برنده شد.
سوی برنده	`side`	`صحیح = 0`	کدام سوی آن گره برنده شد: ۰ بالا، ۱ راست، ۲ پایین، ۳ چپ.
عمودی است	`vertical`	`منطقی = نادرست`	آیا تکه در امتداد خط ستون است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-table.salam

سبک `Style`

ساختار سبک

سبک محاسبه‌شده‌ی یک جعبه. هر فیلد با مقدار آغازین CSS شروع می‌شود، پس فقط فیلدهای متفاوت را بنویسید.

نام	انگلیسی	گونه	توضیح
نمایش	`display`	`نوع‌نمایش`	نوع نمایش، پیش‌فرض بلوکی.
جایگاه	`position`	`نوع‌جایگاه`	نوع جایگاه، پیش‌فرض عادی.
فاصله جایگاه	`inset`	`چهارسو`	فاصله‌های بالا، راست، پایین و چپ، پیش‌فرض خودکار.
سنجش جعبه	`box_sizing`	`نوع‌سنجش‌جعبه`	سنجش جعبه، پیش‌فرض جعبه‌ی محتوا.
پهنا	`width`	`درازا`	پهنا، پیش‌فرض خودکار.
بلندی	`height`	`درازا`	بلندی، پیش‌فرض خودکار.
کمینه پهنا	`min_width`	`درازا`	کمینه‌ی پهنا؛ خودکار یعنی بدون کمینه جز کمینه‌ی خودکار فلکس.
کمینه بلندی	`min_height`	`درازا`	کمینه‌ی بلندی.
بیشینه پهنا	`max_width`	`درازا`	بیشینه‌ی پهنا؛ خودکار یعنی بدون محدودیت.
بیشینه بلندی	`max_height`	`درازا`	بیشینه‌ی بلندی؛ خودکار یعنی بدون محدودیت.
نسبت ابعاد	`aspect_ratio`	`اعشار۶۴ = 0`	نسبت ابعاد به صورت پهنا تقسیم بر بلندی؛ صفر یعنی ندارد.
حاشیه بیرونی	`margin`	`چهارسو`	حاشیه‌ی بیرونی؛ حاشیه‌ی خودکار بلوک را وسط می‌برد و در فلکس فضای آزاد را می‌گیرد.
حاشیه درونی	`padding`	`چهارسو`	حاشیه‌ی درونی.
مرز	`border`	`چهارسو`	پهنای مرزها؛ درصد نسبت به پهنای جعبه‌ی دربرگیرنده.
سرریز افقی	`overflow_x`	`نوع‌سرریز`	سرریز افقی.
سرریز عمودی	`overflow_y`	`نوع‌سرریز`	سرریز عمودی.
پهنای نوار پیمایش	`scrollbar_width`	`اعشار۶۴ = 0`	پهنایی که برای نوار پیمایش در حالت پیمایشی کنار گذاشته می‌شود، پیش‌فرض صفر.
جهت	`direction`	`نوع‌جهت`	جهت، پیش‌فرض چپ به راست.
جهت فلکس	`flex_direction`	`نوع‌جهت‌فلکس`	جهت فلکس.
شکست فلکس	`flex_wrap`	`نوع‌شکست‌فلکس`	شکست فلکس.
رشد فلکس	`flex_grow`	`اعشار۶۴ = 0`	رشد فلکس، پیش‌فرض ۰.
کوچک شدن فلکس	`flex_shrink`	`اعشار۶۴ = 1`	کوچک شدن فلکس، پیش‌فرض ۱.
پایه فلکس	`flex_basis`	`درازا`	پایه‌ی فلکس، پیش‌فرض خودکار.
چینش محتوا	`justify_content`	`نوع‌تراز`	چینش محتوا در نگهدارنده‌ی فلکس.
تراز آیتم ها	`align_items`	`نوع‌تراز`	تراز آیتم‌ها.
تراز خود	`align_self`	`نوع‌تراز`	تراز خود؛ جعبه‌ی مطلق میان دو فاصله‌ی عمودی را هم تراز می‌کند.
تراز محتوا	`align_content`	`نوع‌تراز`	تراز محتوا برای خط‌های شکسته‌ی فلکس و نگهدارنده‌ی بلوکی.
فاصله سطرها	`row_gap`	`درازا`	فاصله‌ی سطرها.
فاصله ستون ها	`column_gap`	`درازا`	فاصله‌ی ستون‌ها.
ترتیب	`order`	`صحیح = 0`	ترتیب آیتم فلکس.
چینش آیتم ها	`justify_items`	`نوع‌تراز`	`justify-items` ظرف شبکه: چینش پیش‌فرض افقی جعبه‌هایش.
چینش خود	`justify_self`	`نوع‌تراز`	`justify-self` یک جعبه‌ی شبکه یا یک جعبه‌ی مطلق.
الگوی ستون های شبکه	`grid_template_columns`	`رشته = ""`	`grid-template-columns` با نحو CSS، مانند `"100px [main] repeat(auto-fill, minmax(4em, 1fr))"`. درازاها باید پیکسل یا درصد باشند. رشته‌ی خالی یعنی `none`.
الگوی سطرهای شبکه	`grid_template_rows`	`رشته = ""`	`grid-template-rows` با نحو CSS. رشته‌ی خالی یعنی `none`.
ناحیه های شبکه	`grid_template_areas`	`رشته = ""`	`grid-template-areas` به صورت سطرهای در نقل‌قول، مانند `"'head head' 'side main'"`. هر ناحیه خط‌های `name-start` و `name-end` را می‌سازد.
ستون های خودکار شبکه	`grid_auto_columns`	`رشته = ""`	`grid-auto-columns`: اندازه‌ی ستون‌های ضمنی که به نوبت تکرار می‌شوند. رشته‌ی خالی یعنی `auto`.
سطرهای خودکار شبکه	`grid_auto_rows`	`رشته = ""`	`grid-auto-rows`: اندازه‌ی سطرهای ضمنی که به نوبت تکرار می‌شوند. رشته‌ی خالی یعنی `auto`.
جریان خودکار شبکه	`grid_auto_flow`	`نوع‌جریان‌شبکه`	`grid-auto-flow` ظرف شبکه.
آغاز سطر شبکه	`grid_row_start`	`رشته = ""`	`grid-row-start` یک جعبه‌ی شبکه: شماره‌ی خط، عدد منفی از انتها، `span 2`، نام خط یا ناحیه، یا رشته‌ی خالی برای `auto`.
انتهای سطر شبکه	`grid_row_end`	`رشته = ""`	`grid-row-end` یک جعبه‌ی شبکه.
آغاز ستون شبکه	`grid_column_start`	`رشته = ""`	`grid-column-start` یک جعبه‌ی شبکه.
انتهای ستون شبکه	`grid_column_end`	`رشته = ""`	`grid-column-end` یک جعبه‌ی شبکه.
چینش جدول	`table_layout`	`نوع‌چینش‌جدول`	`table-layout` جدول.
ادغام مرز	`border_collapse`	`نوع‌ادغام‌مرز`	`border-collapse` جدول.
خطوط مرز	`border_kinds`	`خطوط‌مرز`	سبک خط هر سوی مرز، برای حل مرزهای ادغامی جدول.
فاصله مرز افقی	`border_spacing_x`	`اعشار۶۴ = 0`	فاصله‌ی افقی مرزهای جدول به پیکسل.
فاصله مرز عمودی	`border_spacing_y`	`اعشار۶۴ = 0`	فاصله‌ی عمودی مرزهای جدول به پیکسل.
سوی عنوان	`caption_side`	`نوع‌سوی‌عنوان`	`caption-side` عنوان جدول.
تراز عمودی	`vertical_align`	`نوع‌تراز‌عمودی`	`vertical-align` خانه‌ی جدول.
گستره ستون	`col_span`	`صحیح = 1`	شمار ستون‌هایی که خانه می‌پوشاند (`colspan` در HTML)، یا شمار ستون‌هایی که یک عنصر ستون نماینده‌ی آن‌هاست (`span` در HTML).
گستره سطر	`row_span`	`صحیح = 1`	شمار سطرهایی که خانه می‌پوشاند (`rowspan` در HTML)؛ صفر یعنی تا پایان گروه سطر.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

فضا `Space`

ساختار فضا

فضایی که درخت در آن چیده می‌شود و به محاسبه و تابع سنجش داده می‌شود.

نام	انگلیسی	گونه	توضیح
قسم فضا	`kind`	`نوع‌فضا`	معین، کمینه‌ی محتوا یا بیشینه‌ی محتوا.
مقدار فضا	`value`	`اعشار۶۴ = 0`	تعداد پیکسل وقتی نوع معین است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

داده‌سنجش `MeasureInput`

ساختار داده‌سنجش

آنچه از تابع سنجش پرسیده می‌شود: گره، اندازه‌های معلوم و فضای موجود. اندازه‌ها برای جعبه‌ی محتواست.

نام	انگلیسی	گونه	توضیح
گره سنجش	`node`	`صحیح = 0`	گره‌ای که سنجیده می‌شود.
پهنای معلوم	`known_width`	`اعشار۶۴ = 0`	پهنای ثابت وقتی پهنا معلوم است.
پهنا معلوم است	`has_known_width`	`منطقی = نادرست`	وقتی پهنا تعیین شده و فقط بلندی لازم است، درست است.
بلندی معلوم	`known_height`	`اعشار۶۴ = 0`	بلندی ثابت وقتی بلندی معلوم است.
بلندی معلوم است	`has_known_height`	`منطقی = نادرست`	وقتی بلندی تعیین شده درست است.
پهنای موجود	`available_width`	`فضا`	پهنای موجود: معین، کمینه یا بیشینه‌ی محتوا.
بلندی موجود	`available_height`	`فضا`	بلندی موجود.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-flex.salam

سنجیده `MeasureOutput`

ساختار سنجیده

خروجی تابع سنجش: اندازه‌ی محتوا و در صورت وجود نخستین خط پایه.

نام	انگلیسی	گونه	توضیح
پهنای سنجیده	`width`	`اعشار۶۴ = 0`	پهنای محتوا.
بلندی سنجیده	`height`	`اعشار۶۴ = 0`	بلندی محتوا.
خط پایه سنجیده	`baseline`	`اعشار۶۴ = 0`	نخستین خط پایه از بالای جعبه‌ی محتوا.
خط پایه دارد	`has_baseline`	`منطقی = نادرست`	وقتی خط پایه تعیین شده درست است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-flex.salam

جانمایی `BoxLayout`

ساختار جانمایی

نتیجه‌ی یک جعبه، گردشده به پیکسل کامل همان‌گونه که مرورگر گرد می‌کند.

نام	انگلیسی	گونه	توضیح
ایکس	`x`	`اعشار۶۴ = 0`	لبه‌ی چپ جعبه نسبت به جعبه‌ی والد.
ایگرگ	`y`	`اعشار۶۴ = 0`	لبه‌ی بالای جعبه نسبت به جعبه‌ی والد.
ایکس مطلق	`abs_x`	`اعشار۶۴ = 0`	لبه‌ی چپ نسبت به ریشه.
ایگرگ مطلق	`abs_y`	`اعشار۶۴ = 0`	لبه‌ی بالا نسبت به ریشه.
پهنای جعبه	`width`	`اعشار۶۴ = 0`	پهنای جعبه‌ی مرز.
بلندی جعبه	`height`	`اعشار۶۴ = 0`	بلندی جعبه‌ی مرز.
ایکس محتوا	`content_x`	`اعشار۶۴ = 0`	لبه‌ی چپ جعبه‌ی محتوا درون جعبه.
ایگرگ محتوا	`content_y`	`اعشار۶۴ = 0`	لبه‌ی بالای جعبه‌ی محتوا درون جعبه.
پهنای محتوا	`content_width`	`اعشار۶۴ = 0`	پهنای جعبه‌ی محتوا پس از کم کردن حاشیه، مرز و نوار پیمایش.
بلندی محتوا	`content_height`	`اعشار۶۴ = 0`	بلندی جعبه‌ی محتوا.
حاشیه درونی جعبه	`padding`	`لبه‌ها`	حاشیه‌ی درونی محاسبه‌شده.
مرز جعبه	`border`	`لبه‌ها`	پهنای مرزهای محاسبه‌شده.
حاشیه بیرونی جعبه	`margin`	`لبه‌ها`	حاشیه‌های بیرونی محاسبه‌شده، با مقدار حاشیه‌های خودکار.
پهنای نوار پیمایش جعبه	`scrollbar_width`	`اعشار۶۴ = 0`	پهنای گرفته‌شده برای نوار پیمایش عمودی.
بلندی نوار پیمایش جعبه	`scrollbar_height`	`اعشار۶۴ = 0`	بلندی گرفته‌شده برای نوار پیمایش افقی.
پهنای پیمایش	`scroll_width`	`اعشار۶۴ = 0`	پهنای ناحیه‌ی قابل پیمایش، دست‌کم پهنای جعبه‌ی حاشیه‌ی درونی.
بلندی پیمایش	`scroll_height`	`اعشار۶۴ = 0`	بلندی ناحیه‌ی قابل پیمایش.
خط پایه	`baseline`	`اعشار۶۴ = 0`	نخستین خط پایه از بالای جعبه.
دارای خط پایه	`has_baseline`	`منطقی = نادرست`	وقتی جعبه خط پایه دارد درست است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

درخت `Tree`

ساختار درخت

درختی از جعبه‌ها با شناسه‌ی عددی و حافظه‌ی نهان چینش برای هر گره.

gui-cssbox-Tree.salam

// زبان: فارسی
واردسازی رابط گرافیکی.جعبه سی اس اس

تابع ریشه:
    ناپایا t := جعبه سی اس اس.درخت {}
    دیرکن t.آزاد کردن()
    list := t.افزودن گره(جعبه سی اس اس.سبک { نمایش = جعبه سی اس اس.نوع‌نمایش.فلکس، جهت فلکس = جعبه سی اس اس.نوع‌جهت‌فلکس.ستونی، فاصله سطرها = جعبه سی اس اس.پیکسل(4.0) })
    ناپایا items := وکتور {} برگردان وکتور<صحیح>
    دیرکن items.آزادکن()
    تکرار 3 در i:
        item := t.افزودن گره(جعبه سی اس اس.سبک { بلندی = جعبه سی اس اس.پیکسل(20.0) })
        t.تنظیم سنجش(item، (_mi: جعبه سی اس اس.داده‌سنجش): برگشت جعبه سی اس اس.سنجش شده(100.0 + (i برگردان اعشار۶۴) * 10.0، 20.0) پایان)
        items.بیفزا(item)
    پایان
    t.تنظیم فرزندان(list، items)
    سرچاپ "nodes"، t.شمار گره ها()، "children"، t.شمار فرزندان(list)، "second"، t.فرزند(list، 1)، "parent"، t.والد(items.بگیر(0))
    t.محاسبه(list، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "size"، t.جانمایی گره(list).پهنای جعبه، t.جانمایی گره(list).بلندی جعبه، "calls"، t.شمار محاسبه ها()، "measures"، t.شمار سنجش ها()
    t.صفر کردن شمارنده ها()
    t.محاسبه(list، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "again"، t.شمار محاسبه ها()، "dirty"، t.تغییر کرده است(list)
    t.تنظیم سنجش(items.بگیر(2)، (_mi: جعبه سی اس اس.داده‌سنجش): برگشت جعبه سی اس اس.سنجش شده(200.0، 20.0) پایان)
    سرچاپ "dirty"، t.تغییر کرده است(list)، t.تغییر کرده است(items.بگیر(0))
    t.محاسبه(list، جعبه سی اس اس.فضای بیشینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "width"، t.جانمایی گره(list).پهنای جعبه، "calls"، t.شمار محاسبه ها()
    t.حذف سنجش(items.بگیر(2))
    t.علامت تغییر(items.بگیر(1))
    t.تنظیم گردکردن(نادرست)
    t.محاسبه(list، جعبه سی اس اس.فضای کمینه()، جعبه سی اس اس.فضای بیشینه())
    سرچاپ "width"، t.جانمایی گره(list).پهنای جعبه
پایان

خروجیnodes 4 children 3 second 2 parent 0 size 120 68 calls 10 measures 9 again 0 dirty false dirty true false width 200 calls 6 width 110

افزودن گره `AddNode`

تابع افزودن گره(style: سبک): صحیح

جعبه‌ای با سبک داده‌شده می‌افزاید و شناسه‌اش را برمی‌گرداند؛ شناسه‌ها از صفر شروع می‌شوند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

شمار گره ها `NodeCount`

تابع شمار گره ها(): صحیح

تعداد گره‌ها.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

تنظیم فرزندان `SetChildren`

تابع تنظیم فرزندان(node: صحیح، children: وکتور<صحیح>)

فرزندان گره را با شناسه‌های بردار به همان ترتیب جایگزین می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

افزودن فرزند `AddChild`

تابع افزودن فرزند(node: صحیح، child: صحیح)

یک فرزند به انتها می‌افزاید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

شمار فرزندان `ChildCount`

تابع شمار فرزندان(node: صحیح): صحیح

تعداد فرزندان گره.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

فرزند `Child`

تابع فرزند(node: صحیح، index: صحیح): صحیح

شناسه‌ی فرزند با شماره‌ی داده‌شده یا -1.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

والد `Parent`

تابع والد(node: صحیح): صحیح

شناسه‌ی والد یا -1 برای ریشه.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

سبک گره `GetStyle`

تابع سبک گره(node: صحیح): سبک

رونوشتی از سبک گره.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

تنظیم سبک `SetStyle`

تابع تنظیم سبک(node: صحیح، style: سبک)

سبک گره را جایگزین و آن را تغییرکرده علامت می‌زند. دادن سبکی برابر با سبک کنونی هیچ چیز را تغییر نمی‌دهد و چینش نگه‌داشته‌شده می‌ماند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

تنظیم سنجش `SetMeasure`

تابع تنظیم سنجش(node: صحیح، measure: تابع(داده‌سنجش): سنجیده)

تابعی را تعیین می‌کند که برگ را می‌سنجد، مانند متن یا تصویر.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

حذف سنجش `ClearMeasure`

تابع حذف سنجش(node: صحیح)

تابع سنجش را برمی‌دارد؛ برگ دیگر اندازه‌ی محتوا ندارد.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

علامت تغییر `MarkDirty`

تابع علامت تغییر(node: صحیح)

حافظه‌ی نهان گره و نیاکانش را پاک می‌کند؛ وقتی محتوای سنجیده‌شده عوض شد صدا بزنید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

تغییر کرده است `IsDirty`

تابع تغییر کرده است(node: صحیح): منطقی

وقتی گره نتیجه‌ی ذخیره‌شده ندارد درست است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

تنظیم گردکردن `SetRounding`

تابع تنظیم گردکردن(enabled: منطقی)

گرد کردن نتیجه‌ها به پیکسل را روشن یا خاموش می‌کند (پیش‌فرض روشن).

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

شمار سنجش ها `MeasureCalls`

تابع شمار سنجش ها(): صحیح

تعداد اجرای تابع‌های سنجش از آخرین صفر کردن.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

شمار محاسبه ها `LayoutCalls`

تابع شمار محاسبه ها(): صحیح

تعداد چینش‌هایی که محاسبه شدند و از حافظه‌ی نهان نیامدند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

صفر کردن شمارنده ها `ResetCounters`

تابع صفر کردن شمارنده ها()

هر دو شمارنده را صفر می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

محاسبه `Compute`

تابع محاسبه(root: صحیح، width: فضا، height: فضا)

درخت زیر ریشه را در نمای داده‌شده می‌چیند؛ فقط گره‌های تغییرکرده و گره‌هایی که فضایشان عوض شده دوباره محاسبه می‌شوند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

جانمایی گره `Layout`

تابع جانمایی گره(node: صحیح): جانمایی

نتیجه‌ی یک گره پس از محاسبه.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

مرزهای ادغامی `CollapsedBorders`

تابع مرزهای ادغامی(table: صحیح): وکتور<مرزادغامی>

تکه‌هایی که برای جدولی با مرز ادغامی پس از محاسبه باید کشیده شوند، یکی برای هر لبه‌ی خانه که برنده‌ی دیدنی دارد، با گوشه‌هایی که مانند کرومیوم به مرز برنده می‌رسند. فراخواننده بردار را آزاد می‌کند؛ برای جدولی با مرز جدا خالی است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-table.salam

آزاد کردن `Free`

تابع آزاد کردن()

حافظه‌ی درخت را آزاد می‌کند.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Tree.salam

تابع‌ها

پیکسل `Px`

تابع پیکسل(v: اعشار۶۴): درازا

درازا به پیکسل.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

درصد `Percent`

تابع درصد(v: اعشار۶۴): درازا

درازای درصدی؛ ۵۰ یعنی ۵۰٪.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

خودکار `Auto`

تابع خودکار(): درازا

درازای خودکار.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

کمینه محتوا `MinContent`

تابع کمینه محتوا(): درازا

کلیدواژه‌ی کمینه‌ی محتوا.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

بیشینه محتوا `MaxContent`

تابع بیشینه محتوا(): درازا

کلیدواژه‌ی بیشینه‌ی محتوا.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

اندازه محتوا `FitContent`

تابع اندازه محتوا(): درازا

کلیدواژه‌ی اندازه‌ی محتوا.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

کشیده `Stretch`

تابع کشیده(): درازا

کلیدواژه‌ی کشیده.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

همه سوها `AllSides`

تابع همه سوها(v: درازا): چهارسو

یک درازا برای هر چهار سو.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

ساخت چهارسو `SidesOf`

تابع ساخت چهارسو(top: درازا، right: درازا، bottom: درازا، left: درازا): چهارسو

چهار درازا به ترتیب CSS: بالا، راست، پایین، چپ.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

معین `Definite`

تابع معین(v: اعشار۶۴): فضا

فضای معین به پیکسل.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

فضای کمینه `MinContentSpace`

تابع فضای کمینه(): فضا

فضای کمینه‌ی محتوا.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

فضای بیشینه `MaxContentSpace`

تابع فضای بیشینه(): فضا

فضای بیشینه‌ی محتوا.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-Style.salam

سنجش شده `Measured`

تابع سنجش شده(width: اعشار۶۴، height: اعشار۶۴): سنجیده

نتیجه‌ی سنجش بدون خط پایه.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-flex.salam

سنجش شده با خط پایه `MeasuredWithBaseline`

تابع سنجش شده با خط پایه(width: اعشار۶۴، height: اعشار۶۴، baseline: اعشار۶۴): سنجیده

نتیجه‌ی سنجش با نخستین خط پایه.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-flex.salam

فهرست ردیف معتبر است `IsTrackList`

تابع فهرست ردیف معتبر است(text: رشته): منطقی

اگر متن مقدار درستی برای grid-template-columns یا grid-template-rows باشد درست است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-grid.salam

اندازه های ردیف معتبر است `IsTrackSizes`

تابع اندازه های ردیف معتبر است(text: رشته): منطقی

اگر متن مقدار درستی برای grid-auto-columns یا grid-auto-rows باشد درست است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-grid.salam

خط شبکه معتبر است `IsGridLine`

تابع خط شبکه معتبر است(text: رشته): منطقی

اگر متن جای‌دهی درستی مانند grid-row-start باشد درست است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-grid.salam

نواحی شبکه معتبر است `IsGridAreas`

تابع نواحی شبکه معتبر است(text: رشته): منطقی

اگر متن مقدار درستی برای grid-template-areas با ناحیه‌های مستطیلی باشد درست است.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: gui-cssbox-grid.salam

جعبه سی اس اس gui.cssbox

نکته‌ها

نوار ابزار با فلکس‌باکس و متن

جریان بلوکی و جای‌گذاری مطلق

تغییر یک جعبه

شبکه‌ی صفحه با ناحیه‌های نام‌دار

جدولی با گستره و عنوان

گونه‌ها

نوع‌درازا LengthKind

نوع‌نمایش Display

نوع‌جریان‌شبکه GridAutoFlow

نوع‌چینش‌جدول TableLayout

نوع‌ادغام‌مرز BorderCollapse

نوع‌سوی‌عنوان CaptionSide

نوع‌تراز‌عمودی VerticalAlign

نوع‌جایگاه Position

نوع‌سنجش‌جعبه BoxSizing

نوع‌سرریز Overflow

نوع‌جهت Direction

نوع‌جهت‌فلکس FlexDirection

نوع‌شکست‌فلکس FlexWrap

نوع‌تراز Align

نوع‌فضا SpaceKind

نوع‌خط‌مرز BorderKind

درازا Length

چهارسو Sides

لبه‌ها Edges

خطوط‌مرز BorderKinds

مرزادغامی CollapsedBorder

سبک Style

فضا Space

داده‌سنجش MeasureInput

سنجیده MeasureOutput

جانمایی BoxLayout

درخت Tree

افزودن گره AddNode

شمار گره ها NodeCount

تنظیم فرزندان SetChildren

افزودن فرزند AddChild

شمار فرزندان ChildCount

فرزند Child

والد Parent

سبک گره GetStyle

تنظیم سبک SetStyle

تنظیم سنجش SetMeasure

حذف سنجش ClearMeasure

علامت تغییر MarkDirty

تغییر کرده است IsDirty

تنظیم گردکردن SetRounding

شمار سنجش ها MeasureCalls

شمار محاسبه ها LayoutCalls

صفر کردن شمارنده ها ResetCounters

محاسبه Compute

جانمایی گره Layout

مرزهای ادغامی CollapsedBorders

آزاد کردن Free

تابع‌ها

پیکسل Px

درصد Percent

خودکار Auto

کمینه محتوا MinContent

بیشینه محتوا MaxContent

اندازه محتوا FitContent

کشیده Stretch

همه سوها AllSides

ساخت چهارسو SidesOf

معین Definite

فضای کمینه MinContentSpace

فضای بیشینه MaxContentSpace

سنجش شده Measured

سنجش شده با خط پایه MeasuredWithBaseline

فهرست ردیف معتبر است IsTrackList

اندازه های ردیف معتبر است IsTrackSizes

خط شبکه معتبر است IsGridLine

نواحی شبکه معتبر است IsGridAreas

جعبه سی اس اس `gui.cssbox`

نوع‌درازا `LengthKind`

نوع‌نمایش `Display`

نوع‌جریان‌شبکه `GridAutoFlow`

نوع‌چینش‌جدول `TableLayout`

نوع‌ادغام‌مرز `BorderCollapse`

نوع‌سوی‌عنوان `CaptionSide`

نوع‌تراز‌عمودی `VerticalAlign`

نوع‌جایگاه `Position`

نوع‌سنجش‌جعبه `BoxSizing`

نوع‌سرریز `Overflow`

نوع‌جهت `Direction`

نوع‌جهت‌فلکس `FlexDirection`

نوع‌شکست‌فلکس `FlexWrap`

نوع‌تراز `Align`

نوع‌فضا `SpaceKind`

نوع‌خط‌مرز `BorderKind`

درازا `Length`

چهارسو `Sides`

لبه‌ها `Edges`

خطوط‌مرز `BorderKinds`

مرزادغامی `CollapsedBorder`

سبک `Style`

فضا `Space`

داده‌سنجش `MeasureInput`

سنجیده `MeasureOutput`

جانمایی `BoxLayout`

درخت `Tree`

افزودن گره `AddNode`

شمار گره ها `NodeCount`

تنظیم فرزندان `SetChildren`

افزودن فرزند `AddChild`

شمار فرزندان `ChildCount`

فرزند `Child`

والد `Parent`

سبک گره `GetStyle`

تنظیم سبک `SetStyle`

تنظیم سنجش `SetMeasure`

حذف سنجش `ClearMeasure`

علامت تغییر `MarkDirty`

تغییر کرده است `IsDirty`

تنظیم گردکردن `SetRounding`

شمار سنجش ها `MeasureCalls`

شمار محاسبه ها `LayoutCalls`

صفر کردن شمارنده ها `ResetCounters`

محاسبه `Compute`

جانمایی گره `Layout`

مرزهای ادغامی `CollapsedBorders`

آزاد کردن `Free`

پیکسل `Px`

درصد `Percent`

خودکار `Auto`

کمینه محتوا `MinContent`

بیشینه محتوا `MaxContent`

اندازه محتوا `FitContent`

کشیده `Stretch`

همه سوها `AllSides`

ساخت چهارسو `SidesOf`

معین `Definite`

فضای کمینه `MinContentSpace`

فضای بیشینه `MaxContentSpace`

سنجش شده `Measured`

سنجش شده با خط پایه `MeasuredWithBaseline`

فهرست ردیف معتبر است `IsTrackList`

اندازه های ردیف معتبر است `IsTrackSizes`

خط شبکه معتبر است `IsGridLine`

نواحی شبکه معتبر است `IsGridAreas`