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

—

—

**دستورالعمل‌های استایل‌دهی برای ویرایشگر بلوک (CSS پیشنهادی):**

برای اینکه این محتوا با طراحی منحصر به فرد و رنگ‌بندی زیبا در ویرایشگر بلوک یا کلاسیک شما نمایش داده شود و رسپانسیو باشد، می‌توانید از CSS زیر در قسمت سفارشی‌سازی قالب یا در تنظیمات بلوک‌های HTML/CSS استفاده کنید. این کد فرض می‌کند که محتوا درون یک `div` والد قرار گرفته است.

“`css
/* Base Styles for the main container */
.thesis-article-container {
font-family: ‘Vazirmatn’, ‘Arial’, sans-serif; /* A modern Persian font */
max-width: 100%; /* Ensures responsiveness for all devices */
margin: 0 auto; /* Centers the content */
padding: 20px;
background-color: #F8F9FA; /* Light gray background for the whole article */
color: #333333; /* Dark gray for main text */
line-height: 1.8;
word-spacing: 0.5px;
box-sizing: border-box; /* Include padding in element’s total width and height */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.thesis-article-container {
padding: 15px;
line-height: 1.6;
}
.thesis-article-container h1 {
font-size: 1.8em !important; /* Smaller H1 for mobile */
margin-bottom: 15px !important;
}
.thesis-article-container h2 {
font-size: 1.5em !important; /* Smaller H2 for mobile */
margin-top: 25px !important;
margin-bottom: 10px !important;
}
.thesis-article-container h3 {
font-size: 1.2em !important; /* Smaller H3 for mobile */
margin-top: 15px !important;
margin-bottom: 8px !important;
}
.thesis-article-container p, .thesis-article-container li, .thesis-article-container td {
font-size: 0.95em !important; /* Slightly smaller body text */
}
.thesis-article-container table th, .thesis-article-container table td {
padding: 8px !important;
font-size: 0.9em !important;
}
.thesis-article-container ol li p { /* Adjust paragraph in ordered list */
margin-top: 0px !important;
margin-bottom: 0px !important;
}
}

/* Heading Styles */
.thesis-article-container h1 {
font-size: 2.5em; /* Main Title */
font-weight: bold;
color: #2C3E50; /* Midnight Blue/Dark Gray */
text-align: right;
margin-bottom: 25px;
padding-bottom: 10px;
border-bottom: 2px solid #3498DB; /* Accent blue underline */
}

.thesis-article-container h2 {
font-size: 1.8em; /* Section Titles */
font-weight: bold;
color: #34495E; /* Dark Slate Gray */
text-align: right;
margin-top: 30px;
margin-bottom: 15px;
border-bottom: 1px solid #7F8C8D; /* Medium Gray underline */
padding-bottom: 5px;
}

.thesis-article-container h3 {
font-size: 1.4em; /* Sub-section Titles */
font-weight: bold;
color: #7F8C8D; /* Asbestos – Medium Gray */
text-align: right;
margin-top: 20px;
margin-bottom: 10px;
}

/* Paragraph Styles */
.thesis-article-container p {
font-size: 1em; /* Default paragraph size */
text-align: justify;
margin-bottom: 20px;
}
.thesis-article-container p:last-child {
margin-bottom: 0; /* No bottom margin for last paragraph */
}

/* List Styles */
.thesis-article-container ul, .thesis-article-container ol {
margin-right: 20px; /* Adjust for RTL */
padding-left: 0; /* Reset default padding */
margin-bottom: 15px;
list-style-position: inside; /* Keeps bullets/numbers inside padding */
}

.thesis-article-container ul li {
margin-bottom: 8px;
font-size: 1em;
text-align: justify;
}
.thesis-article-container ol li {
margin-bottom: 15px;
font-size: 1em;
text-align: justify;
}
.thesis-article-container strong {
color: #3498DB; /* Accent blue for strong text */
}

/* Infographic-like Section (Roadmap) */
.thesis-article-container .infographic-like-section {
background-color: #EBF5FB; /* Light blue background */
border-left: 5px solid #3498DB; /* Accent blue border on left */
padding: 20px;
margin-bottom: 25px;
border-radius: 8px;
}
.thesis-article-container .infographic-like-section h3 {
color: #2C3E50; /* Darker heading for this section */
margin-top: 0;
margin-bottom: 15px;
border-bottom: none; /* No underline for inner H3 */
}
.thesis-article-container .infographic-like-section ol {
list-style-type: decimal;
margin-right: 25px;
padding-left: 0;
}
.thesis-article-container .infographic-like-section ol li p {
margin-top: 5px;
margin-bottom: 5px;
font-size: 0.95em; /* Slightly smaller text within list items */
}

/* Table Styles */
.thesis-article-container table {
width: 100%;
border-collapse: collapse;
text-align: right;
border-radius: 8px;
overflow: hidden; /* Ensures border-radius applies to table */
box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Subtle shadow for depth */
margin-bottom: 25px;
}

.thesis-article-container table thead {
background-color: #3498DB; /* Accent blue for table header */
color: white;
}

.thesis-article-container table th {
padding: 15px;
border: 1px solid #D3D6DB; /* Light gray border */
font-size: 1.1em;
text-align: center; /* Center align headers */
}

.thesis-article-container table tbody tr {
background-color: #FDFEFE; /* Alternating row colors */
}
.thesis-article-container table tbody tr:nth-child(even) {
background-color: #EFF8FB; /* Lighter blue for even rows */
}

.thesis-article-container table td {
padding: 12px;
border: 1px solid #D3D6DB;
font-size: 1em;
}

/* FAQ Section */
.thesis-article-container .faq-section {
background-color: #F8F9FA; /* Light background for FAQ block */
border: 1px solid #E0E0E0; /* Subtle border */
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
}
.thesis-article-container .faq-section h3 {
color: #34495E; /* Darker heading for FAQ questions */
margin-top: 0;
margin-bottom: 10px;
border-bottom: none;
}
.thesis-article-container .faq-section p {
margin-bottom: 10px;
font-size: 0.98em;
}
.thesis-article-container .faq-section a {
color: #3498DB; /* Accent blue for links within FAQ */
text-decoration: none;
font-weight: bold;
}
.thesis-article-container .faq-section a:hover {
text-decoration: underline;
}

/* General Link Style */
.thesis-article-container a {
color: #3498DB; /* Peter River Blue for all links */
text-decoration: none;
}
.thesis-article-container a:hover {
text-decoration: underline;
}

/* Ensure images (if any) are responsive – user to add if applicable */
.thesis-article-container img {
max-width: 100%;
height: auto;
display: block;
margin: 15px auto; /* Center images */
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Accessibility and Readability */
.thesis-article-container p, .thesis-article-container li {
max-width: 800px; /* Optional: Limit line length for better readability */
margin-right: auto;
margin-left: auto;
}
.thesis-article-container h1, .thesis-article-container h2, .thesis-article-container h3 {
max-width: 800px;
margin-right: auto;
margin-left: auto;
text-align: right; /* Ensure headings align right for RTL */
}

/* Special treatment for the main wrapper div */
.thesis-article-container {
direction: rtl; /* Set direction for the entire content */
text-align: right;
}
“`

**نحوه استفاده:**

1. **محتوای HTML:** تمام متن فارسی بالا را که درون تگ `

0 0 رای ها

امتیازدهی به مقاله

اشتراک در

وارد شدن

اطلاع از

نظرات جدید دنبال شده پاسخ جدید به دیدگاه های من

Label

اسم*

ایمیل*

آدرس سایت

Δ

Label

اسم*

ایمیل*

آدرس سایت

Δ

0 نظرات

قدیمی‌ترین

تازه‌ترین بیشترین رأی

بازخورد (Feedback) های اینلاین

مشاهده همه دیدگاه ها