---
type: reference
title: الحجم والتخطيط
summary: كيف تضبط سمات width و height و overlay-width و overlay-height حجم عنصر caputchin-game عبر تخطيطات inline و modal و fullscreen.
---

يستطيع `<caputchin-game>` أن يُعرَض بثلاثة تخطيطات (تُضبَط بسمة `layout`): `inline` و `modal` و `fullscreen`. وكيف تضبط حجمه يتوقّف على التخطيط، لأن تخطيطَي modal و fullscreen يُظهِران **صندوقين منفصلين**:

- **العنصر داخل الصفحة**: الشيء الذي يجلس في تدفّق صفحتك. في `inline` هو لوحة اللعبة كاملةً؛ وفي `modal` / `fullscreen` هو خانة الاختيار الصغيرة التي ينقرها الزائر ليفتح اللعبة.
- **صندوق اللعبة**: مربّع الحوار الذي يفتح من فوق في `modal` / `fullscreen`، واللعبة بداخله. (في `inline` لا يوجد مربّع حوار منفصل: اللوحة نفسها هي اللعبة.)

أربع سمات تضبط حجم هذين الصندوقين. وكل قيمة هي واحدة من `auto` (الافتراضي)، أو `full` (يملأ المساحة المتاحة)، أو عدد بكسلات موجب مثل `480`.

| السمة | تضبط حجم | تسري في |
|---|---|---|
| `width` / `height` | العنصر داخل الصفحة | كل التخطيطات |
| `overlay-width` / `overlay-height` | صندوق اللعبة (مربّع الحوار + اللعبة) | `modal`، `fullscreen` |

## Inline

تخطيط inline له صندوق واحد، فتضبط `width` / `height` حجم اللوحة كاملةً. أما `overlay-width` / `overlay-height` فلا تفعل شيئًا هنا وتُتجاهَل (تسجّل الأداة تحذيرًا إن ضبطتهما).

```html
<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>
```

## Modal و fullscreen

هنا الصندوقان مستقلّان. تضبط `width` / `height` حجم **خانة اختيار الدخول** في صفحتك؛ وتضبط `overlay-width` / `overlay-height` حجم **مربّع الحوار واللعبة** اللذين يفتحان حين ينقرها الزائر.

```html
<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>
```

تجعل `overlay-width="full"` اللعبةَ تملأ مربّع الحوار على ذلك المحور؛ أما قيمة بالبكسل فتُثبّت اللعبة على ذلك الحجم (وينكمش مربّع الحوار حوله بإحكام). وفي `fullscreen` يكون مربّع الحوار قد غطّى إطار العرض أصلًا، فتتحكّم `overlay-*` في ما إن كانت اللعبة تتمدّد لتملأه أم تجلس متوسّطةً بحجمها الخاص.

## حين تترك صندوق اللعبة بلا ضبط

إن لم تضبط `overlay-width` / `overlay-height`، استعمل صندوق اللعبة الحجمَ الذي اختاره **مؤلّف اللعبة** لها (مساحتها المفضّلة، المُصرَّح بها في ملف `caputchin.json` الخاص باللعبة). فأغلب الوقت تحتاج فقط إلى `width` / `height` لتخطيط صفحتك، واللعبة تضبط حجم نفسها بحكمة. ولا تضبط `overlay-*` إلا حين تريد تجاوز ذلك.

## القيم بالبكسل

العدد المجرّد هو بكسلات CSS: `width="500"` و `width="500px"` متكافئان. أما القيم الصفرية والسالبة وغير العددية فتُرفَض (ترتدّ السمة إلى افتراضها وتسجّل الأداة تحذيرًا).

## انظر أيضًا

- [عنصر أداة اللعبة](/docs/getting-started/add-a-game): مجموعة سمات `<caputchin-game>` كاملةً.
- [طرائق الأداة وأحداثها](/docs/references/widget-methods-and-events): قيادة الأداة والتفاعل معها.