متن

سیدھ، ریپنگ، وزن، اور مزید کو کنٹرول کرنے کے لیے عام متن کی افادیت کے لیے دستاویزات اور مثالیں۔

اس صفحہ پر

متن کی سیدھ

متن کی صف بندی کی کلاسوں کے ساتھ اجزاء میں متن کو آسانی سے دوبارہ ترتیب دیں۔ آغاز، اختتام اور مرکز کی سیدھ کے لیے، ریسپانسیو کلاسز دستیاب ہیں جو گرڈ سسٹم کی طرح ویو پورٹ کی چوڑائی کے بریک پوائنٹس کا استعمال کرتی ہیں۔

تمام ویو پورٹ سائز پر منسلک متن شروع کریں۔

تمام ویو پورٹ سائزز پر بیچ میں منسلک متن۔

تمام ویو پورٹ سائزز پر اختتامی موافق متن۔

ویو پورٹ کے سائز کے SM (چھوٹے) یا اس سے بڑے پر منسلک متن شروع کریں۔

ویو پورٹ کے سائز کے ایم ڈی (میڈیم) یا اس سے زیادہ وسیع پر منسلک متن شروع کریں۔

ویو پورٹ کے سائز کے LG (بڑے) یا اس سے بڑے پر منسلک متن شروع کریں۔

ویو پورٹ کے سائز کے XL (اضافی بڑے) یا اس سے زیادہ وسیع پر منسلک متن شروع کریں۔

html

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

نوٹ کریں کہ ہم جائز متن کے لیے یوٹیلیٹی کلاسز فراہم نہیں کرتے ہیں۔ اگرچہ، جمالیاتی اعتبار سے، جائز متن زیادہ دلکش لگ سکتا ہے، لیکن یہ الفاظ کے درمیان فاصلہ کو زیادہ بے ترتیب بنا دیتا ہے اور اس لیے پڑھنا مشکل ہوتا ہے۔

ٹیکسٹ ریپنگ اور اوور فلو

.text-wrapکلاس کے ساتھ متن لپیٹیں ۔

اس متن کو لپیٹ دینا چاہئے۔

html

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

.text-nowrapمتن کو کلاس کے ساتھ لپیٹنے سے روکیں ۔

یہ متن والدین کو اوور فلو کرنا چاہئے۔

html

<div class="text-nowrap bg-light border" style="width: 8rem;">
  This text should overflow the parent.
</div>

لفظ کا وقفہ

.text-breakسیٹ word-wrap: break-wordاور word-break: break-word. _ ہم وسیع براؤزر سپورٹ کے لیے word-wrapزیادہ عام کی بجائے استعمال کرتے ہیں، اور فلیکس کنٹینرز کے مسائل سے بچنے کے لیے فرسودہ کو شامل کرتے ہیں۔overflow-wrapword-break: break-word

مممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممممم

html

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

نوٹ کریں کہ الفاظ کو توڑنا عربی میں ممکن نہیں ہے ، جو کہ سب سے زیادہ استعمال ہونے والی RTL زبان ہے۔ لہذا .text-breakہمارے RTL مرتب کردہ CSS سے ہٹا دیا گیا ہے۔

متن کی تبدیلی

متن کیپٹلائزیشن کلاسز کے ساتھ متن کو اجزاء میں تبدیل کریں۔

چھوٹے ہاتھ کا متن۔

بڑے حرف والا متن۔

CapiTaliZed متن۔

html

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

نوٹ کریں کہ کس طرح .text-capitalizeہر لفظ کے پہلے حرف کو تبدیل کیا جاتا ہے، کسی دوسرے حروف کے کیس کو غیر متاثر چھوڑ کر۔

حرف کا سائز

font-sizeمتن کو جلدی سے تبدیل کریں۔ جبکہ ہماری ہیڈنگ کلاسز (مثلاً، .h1– .h6) لاگو ہوتی ہیں font-size، font-weightاور line-height، یہ یوٹیلیٹیز صرف لاگو ہوتی ہیں font-size۔ ان یوٹیلیٹیز کا سائز HTML کے ہیڈنگ عناصر سے میل کھاتا ہے، اس لیے جیسے جیسے تعداد بڑھتی ہے، ان کا سائز کم ہوتا جاتا ہے۔

.fs-1 متن

.fs-2 متن

.fs-3 متن

.fs-4 متن

.fs-5 متن

.fs-6 متن

html

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Sass نقشے font-sizeمیں ترمیم کرکے اپنے دستیاب s کو حسب ضرورت بنائیں ۔$font-sizes

فونٹ کا وزن اور ترچھا

font-weightان یوٹیلیٹیز کے ساتھ یا font-styleمتن کو جلدی سے تبدیل کریں۔ font-styleافادیت کو مختصر کیا جاتا ہے .fst-*اور font-weightیوٹیلیٹیز کو مختصر کیا جاتا .fw-*ہے۔

بولڈ ٹیکسٹ۔

زیادہ بولڈ ویٹ ٹیکسٹ (والدین عنصر کے نسبت)۔

سیمبولڈ وزن کا متن۔

عام وزن کا متن۔

ہلکے وزن کا متن۔

ہلکے وزن کا متن (والدین عنصر کے نسبت)۔

ترچھا متن۔

عام فونٹ کے انداز کے ساتھ متن

html

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-semibold">Semibold weight text.</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

لکیر کی اونچائی

.lh-*افادیت کے ساتھ لائن کی اونچائی کو تبدیل کریں ۔

یہ ایک لمبا پیراگراف ہے جو یہ ظاہر کرنے کے لیے لکھا گیا ہے کہ کسی عنصر کی لائن کی اونچائی ہماری افادیت سے کیسے متاثر ہوتی ہے۔ کلاسز کا اطلاق خود عنصر یا بعض اوقات بنیادی عنصر پر ہوتا ہے۔ ان کلاسوں کو ہماری یوٹیلیٹی API کے ساتھ ضرورت کے مطابق اپنی مرضی کے مطابق بنایا جا سکتا ہے۔

html

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

مونو اسپیس

ایک انتخاب کو ہمارے مونو اسپیس فونٹ اسٹیک کے ساتھ تبدیل کریں .font-monospace۔

یہ مونو اسپیس میں ہے۔

html

<p class="font-monospace">This is in monospace</p>

رنگ ری سیٹ کریں۔

کسی متن یا لنک کا رنگ کے ساتھ .text-resetدوبارہ ترتیب دیں، تاکہ اسے اپنے والدین سے رنگ وراثت میں ملے۔

ری سیٹ لنک کے ساتھ خاموش متن ۔

html

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

متن کی سجاوٹ

متن کی سجاوٹ کی کلاسوں کے ساتھ اجزاء میں متن کو سجائیں۔

اس متن کے نیچے ایک لائن ہے۔

اس متن میں ایک لائن ہے جس سے گزر رہی ہے۔

اس لنک سے متن کی سجاوٹ ہٹا دی گئی ہے۔

html

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

سس

متغیرات

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$prefix}font-sans-serif);
$font-family-code:            var(--#{$prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-semibold:        600;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

نقشے

فونٹ سائز کی افادیتیں اس نقشے سے ہماری یوٹیلیٹیز API کے ساتھ مل کر تیار کی گئی ہیں۔

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

یوٹیلیٹیز API

فونٹ اور ٹیکسٹ کی افادیت کا اعلان ہماری یوٹیلیٹیز API میں scss/_utilities.scss. یوٹیلیٹیز API کو استعمال کرنے کا طریقہ سیکھیں۔

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        semibold: $font-weight-semibold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),