Transitioned from Plan to Build mode
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: c2314a1f-ae0f-47c2-bf5c-1f075822b8d7 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/ylDMZtF Replit-Helium-Checkpoint-Created: true
This commit is contained in:
@@ -0,0 +1,151 @@
|
|||||||
|
أريد تعديل طباعة PDF لجدول حضور الاجتماعات بحيث يكون مطابقاً قدر الإمكان لملف PDF المرفق.
|
||||||
|
|
||||||
|
المهم جداً:
|
||||||
|
لا تغيّر فكرة التصميم. أريد نفس شكل الملف المرجعي:
|
||||||
|
- عنوان في الأعلى: قائمة بأسماء حضور الاجتماعات
|
||||||
|
- جدول بسيط بالأعمدة:
|
||||||
|
# | الاجتماع | الحضور | الوقت
|
||||||
|
- الاتجاه عربي RTL
|
||||||
|
- الخط المستخدم في كامل PDF:
|
||||||
|
DIN Next LT Arabic
|
||||||
|
|
||||||
|
تنسيق الحضور المطلوب:
|
||||||
|
- أسماء الحضور تكون داخل نفس خلية الحضور بشكل أفقي inline.
|
||||||
|
- لا تجعل كل اسم في سطر مستقل.
|
||||||
|
- كل سطر يحتوي تقريباً 3 إلى 4 أسماء حسب طول الاسم.
|
||||||
|
- إذا زاد عدد الحضور، ينزل تلقائياً للسطر التالي.
|
||||||
|
- الشكل المطلوب مثل:
|
||||||
|
-1 طارق عبدالله -2 فهد احمد -3 عبدالرحمن عبدالله
|
||||||
|
-4 د. سالم الشمري -5 سليمان محمد
|
||||||
|
|
||||||
|
مهم:
|
||||||
|
- أريد نفس أسلوب الترقيم الموجود في النموذج:
|
||||||
|
-1 الاسم
|
||||||
|
-2 الاسم
|
||||||
|
-3 الاسم
|
||||||
|
- لا تستخدم قائمة عمودية طويلة.
|
||||||
|
- لا تستخدم ol/li إذا كانت تسبب انقلاب الأرقام.
|
||||||
|
- لا تجعل الترقيم يظهر بشكل خاطئ أو منفصل عن الاسم.
|
||||||
|
- الرقم والاسم يكونان قطعة واحدة مع بعض داخل span.
|
||||||
|
|
||||||
|
تنسيق الجدول:
|
||||||
|
- استخدم table حقيقي للطباعة.
|
||||||
|
- لا تستخدم flex لتقسيم أعمدة الجدول.
|
||||||
|
- العرض كامل الصفحة.
|
||||||
|
- حجم الصفحة A4 portrait.
|
||||||
|
- الهوامش مناسبة.
|
||||||
|
- النصوص محاذاة يمين.
|
||||||
|
- الوقت يكون واضح داخل عمود الوقت ولا يطلع خارج الجدول.
|
||||||
|
- الوقت يكون بصيغة مثل:
|
||||||
|
12:20-12:50
|
||||||
|
1:00-1:30
|
||||||
|
|
||||||
|
أحجام الأعمدة المقترحة:
|
||||||
|
- الرقم #: 8%
|
||||||
|
- الاجتماع: 30%
|
||||||
|
- الحضور: 42%
|
||||||
|
- الوقت: 20%
|
||||||
|
|
||||||
|
CSS مقترح:
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
@page {
|
||||||
|
size: A4 portrait;
|
||||||
|
margin: 12mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "DIN Next LT Arabic", Arial, sans-serif;
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 6px 8px;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: right;
|
||||||
|
white-space: normal;
|
||||||
|
word-break: normal;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:nth-child(1), td:nth-child(1) {
|
||||||
|
width: 8%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:nth-child(2), td:nth-child(2) {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:nth-child(3), td:nth-child(3) {
|
||||||
|
width: 42%;
|
||||||
|
}
|
||||||
|
|
||||||
|
th:nth-child(4), td:nth-child(4) {
|
||||||
|
width: 20%;
|
||||||
|
text-align: center;
|
||||||
|
direction: ltr;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attendees-inline {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
gap: 2px 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attendee-item {
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
direction: rtl;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meeting-title {
|
||||||
|
direction: rtl;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
طريقة توليد الحضور داخل HTML:
|
||||||
|
بدلاً من:
|
||||||
|
<ul>
|
||||||
|
<li>طارق عبدالله</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
استخدم:
|
||||||
|
<div class="attendees-inline">
|
||||||
|
<span class="attendee-item">-1 طارق عبدالله</span>
|
||||||
|
<span class="attendee-item">-2 فهد احمد</span>
|
||||||
|
<span class="attendee-item">-3 عبدالرحمن عبدالله</span>
|
||||||
|
<span class="attendee-item">-4 د. سالم الشمري</span>
|
||||||
|
<span class="attendee-item">-5 سليمان محمد</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
المطلوب النهائي:
|
||||||
|
PDF يكون مثل الملف المرجعي تماماً من حيث:
|
||||||
|
- بساطة الجدول
|
||||||
|
- الحضور في نفس السطر
|
||||||
|
- 3 إلى 4 أسماء تقريباً في السطر
|
||||||
|
- عدم تداخل الأعمدة
|
||||||
|
- عدم خروج الوقت من مكانه
|
||||||
|
- الالتزام بخط DIN Next LT Arabic
|
||||||
|
- عدم تحويل الحضور إلى قائمة عمودية
|
||||||
Reference in New Issue
Block a user