Text Indentation and Spacing

Text Indentation and Spacing అంటే ఏమిటి?

వెబ్ పేజీలో text ఎలా ప్రారంభం కావాలి, అక్షరాల మధ్య ఎంత ఖాళీ ఉండాలి, పదాల మధ్య ఎంత ఖాళీ ఉండాలి అనే విషయాలను CSS ద్వారా నియంత్రించవచ్చు.

ఈ lessonలో నేర్చుకునే properties

• text-indent: paragraphలోని మొదటి line ప్రారంభానికి indentation ఇస్తుంది.
• letter-spacing: ప్రతి అక్షరం మధ్య ఖాళీని పెంచుతుంది లేదా తగ్గిస్తుంది.
• word-spacing: పదాల మధ్య ఖాళీని పెంచుతుంది లేదా తగ్గిస్తుంది.

text-indent

text-indent property paragraphలోని మొదటి lineను మాత్రమే కుడివైపు లేదా ఎడమవైపు కదిలిస్తుంది. సాధారణంగా article paragraphs ప్రారంభంలో ఉపయోగిస్తారు.

p {
  text-indent: 30px;
}

ఇక్కడ paragraph మొదటి line 30 pixels కుడివైపు ప్రారంభమవుతుంది. తరువాతి lines సాధారణ స్థానం నుంచే ప్రారంభమవుతాయి.

letter-spacing

letter-spacing ప్రతి అక్షరం మధ్య ఖాళీని నియంత్రిస్తుంది. Heading లేదా చిన్న labelsలో కొద్దిగా spacing ఇవ్వడానికి ఇది ఉపయోగపడుతుంది.

h1 {
  letter-spacing: 2px;
}

word-spacing

word-spacing పదాల మధ్య ఖాళీని నియంత్రిస్తుంది. ఇది ఒకే paragraphలోని పదాల మధ్య కనిపించే spaceను ప్రభావితం చేస్తుంది.

p {
  word-spacing: 8px;
}

ఈ propertiesలో px, em వంటి units ఉపయోగించవచ్చు. Negative value ఇస్తే spacing తగ్గవచ్చు. చాలా ఎక్కువ spacing readabilityని తగ్గించవచ్చు కాబట్టి సరైన విలువను ఎంచుకోవాలి.

Simple Explanation

ఒక పుస్తకంలోని paragraph మొదటి line కొంచెం లోపల నుంచి మొదలవుతుందని ఊహించండి. అదే విధంగా text-indent మొదటి lineకు space ఇస్తుంది. letter-spacing ప్రతి అక్షరం మధ్య దూరాన్ని మార్చుతుంది. word-spacing ప్రతి పదం మధ్య దూరాన్ని మార్చుతుంది.

ఉదాహరణకు, text-indent: 30px; అంటే మొదటి line 30 pixels లోపల నుంచి మొదలవుతుంది. letter-spacing: 2px; అంటే అక్షరాల మధ్య అదనపు ఖాళీ వస్తుంది. word-spacing: 8px; అంటే పదాల మధ్య ఖాళీ పెరుగుతుంది.

Real-Life Example

ఒక magazine articleలో ప్రతి paragraph మొదటి line కొంచెం లోపల నుంచి మొదలవుతుంది. అది paragraph కొత్తగా ప్రారంభమైందని పాఠకుడికి అర్థమయ్యేలా చేస్తుంది. అలాగే ఒక poster headingలో అక్షరాల మధ్య కొద్దిగా ఖాళీ పెడితే heading స్పష్టంగా కనిపిస్తుంది. ఇవే పనులను CSSలో text-indent మరియు letter-spacingతో చేయవచ్చు.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Indentation and Spacing</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 650px;
      margin: 30px auto;
      padding: 0 20px;
      color: #222222;
    }

    h1 {
      letter-spacing: 2px;
      color: #174a7e;
    }

    .article p {
      text-indent: 35px;
      word-spacing: 5px;
      line-height: 1.6;
    }

    .label {
      letter-spacing: 3px;
      color: #555555;
    }
  </style>
</head>
<body>
  <h1>Reading Corner</h1>
  <p class="label">SHORT ARTICLE</p>

  <section class="article">
    <p>Good typography makes an article easier to read and understand.</p>
    <p>Small spacing changes can give the text a clean and comfortable appearance.</p>
  </section>
</body>
</html>

The page shows a blue Reading Corner heading with extra letter spacing. The SHORT ARTICLE label has wider letter spacing. Both article paragraphs start with an indented first line and have slightly wider spaces between words.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Spacing Practice</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 30px auto;
      color: #222222;
    }

    h1 {
      letter-spacing: 1px;
    }

    p {
      text-indent: 0;
      word-spacing: 2px;
    }
  </style>
</head>
<body>
  <h1>My Article</h1>
  <p>Learning CSS text properties helps us create clear and attractive pages.</p>
  <p>We can control the first line and the spaces between words.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• text-indent paragraphలోని మొదటి lineకు indentation ఇస్తుంది.
• letter-spacing అక్షరాల మధ్య ఖాళీని నియంత్రిస్తుంది.
• word-spacing పదాల మధ్య ఖాళీని నియంత్రిస్తుంది.
• Length valuesకు px లేదా em వంటి units ఉపయోగించవచ్చు.
• చాలా ఎక్కువ spacing readabilityని తగ్గించవచ్చు.
• CSS propertyను సరైన selectorలో రాసి browserలో run చేసి ఫలితాన్ని పరీక్షించండి.