ጽሑፍ

ንኣሰላልፋ፣ ምጥቕላል፣ ክብደትን ካልእን ንምቁጽጻር ዝሕግዙ ናይ ልሙዳት ናይ ጽሑፍ ውጽኢታት ሰነዳትን ኣብነታትን።

ኣብዚ ገጽ

ጽሑፍ ኣሰላልፋ

ጽሑፍ ብቐሊሉ ናብ ኣካላት ምስ ናይ ጽሑፍ ኣሰላልፋ ክፍልታት ዳግማይ ኣመዓራርዮ። ንመጀመርታ፣ መወዳእታን ማእከልን ኣሰላልፋ፣ ከም ስርዓት ሽቦ ተመሳሳሊ ስፍሓት ቪውፖርት ስብራት ዝጥቀሙ ምላሽ ዝህቡ ክፍልታት ኣለዉ።

ኣብ ኩሉ ዓቐናት ቪውፖርት ዝተሰለፈ ጽሑፍ ጀምር።

ኣብ ኩሉ ዓቐናት ቪውፖርት ብማእከል ዝተሰለፈ ጽሑፍ።

ኣብ ኩሉ ዓቐናት ቪውፖርት ዝተሰለፈ ጽሑፍ ምዝዛም።

ኣብ SM (ንእሽቶ) ወይ ካብኡ ንላዕሊ ዝዓቐኑ ቪውፖርትታት ዝተሰለፈ ጽሑፍ ጀምር።

ኣብ MD (ማእከላይ) ወይ ካብኡ ንላዕሊ ዝዓቐኑ ቪውፖርትታት ዝተሰለፈ ጽሑፍ ጀምር።

ኣብ 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-breakto set word-wrap: break-wordand word-break: break-word. word-wrapኣብ ክንዲ እቲ ዝያዳ ዝውቱር overflow-wrapንዝሰፍሐ ደገፍ መርበብ ሓበሬታ ንጥቀመሉ ፣ ከምኡ’ውን word-break: break-wordምስ ፍሌክስ መትሓዚታት ንዘጋጥም ጸገማት ንምክልኻል ነቲ ዘይተጠቕመ ንውስኸሉ።

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

html ዝብል ጽሑፍ ኣሎ።

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

ኣስተውዕል ቃላት ምብታኽ ኣብ ዓረብኛ ከምዘይከኣል ፣ እዚ ድማ እቲ ዝበዝሐ ዝጥቀመሉ ቋንቋ RTL እዩ። ስለዚ .text-breakካብቲ ናትና RTL ዝተጠርነፈ CSS ይእለ።

ጽሑፍ ምቕያር

ጽሑፍ ኣብ ኣካላት ምስ ናይ ጽሑፍ ርእሰ-ጽሑፍ ክፍልታት ምቕያር።

ብንእሽቶ ፊደል ዘለዎ ጽሑፍ።

ዓቢ ፊደል ዘለዎ ጽሑፍ።

ካፒታላይዝድ ዝኾነ ጽሑፍ።

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>

ነቲ ናይ ሳስ ካርታ 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-*።

እዚ ንሓደ ባእታ መስመር-ቁመት ብዩቲሊቲታትና ብኸመይ ከም ዝጽሎ ንምግላጽ ዝተጻሕፈ ነዊሕ ሕጡበ-ጽሑፍ እዩ። ክፍልታት ኣብቲ ባእታ ባዕሉ ወይ ሓደ ሓደ ግዜ ኣብቲ ወላዲ ባእታ ይትግበሩ። እዞም ክፍልታት ከም ኣድላይነቱ ብናይ ዩቲሊቲ ኤፒኣይና ክመዓራረዩ ይኽእሉ።

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;

ካርታታት

ካብዚ ካርታ እዚ ቅርጺ ቅርጺ ዘለዎም ዩቲሊቲታት ይፍጠሩ፣ ምስ ዩቲሊቲታትና ኤፒኣይ ተደሚሮም።

$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
);

ዩቲሊቲስ ኤፒኣይ

ፊደልን ጽሑፍን ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።

    "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
    ),