[Tamil] Text Space Using CSS In Tamil

Text Indent

First line-யை margin-ல் இருந்து உள்தள்ளிக் காண்பிப்பதற்கு Text Indent என்கிற property-ஆனது பயன்படுத்தப்படுகிறது.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .indent{

            text-indent: 100px;

        }

    </style>

</head>

<body>

<h1>text-indent கொடுப்பதற்கு முன்பு,</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
     Autem aliquid tempora aperiam excepturi totam quod! Dolorem sapiente illum repudiandae dolorum quia? Nesciunt quidem veniam id debitis aperiam veritatis eius facilis!</p>


	 <h1>text-indent கொடுத்த பிறகு,</h1>

<p class="indent">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Enim, dolor nulla, ullam, autem error vero voluptas deleniti et deserunt quia fuga perspiciatis? Culpa quod numquam, accusantium perspiciatis harum voluptates enim.</p>


	</body>

</html>

Output:

Line Height

Line-களுக்கு இடையே இடைவெளி கொடுப்பதற்கு Line Height property ஆனது பயன்படுத்தப்படுகிறது.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .space{

            line-height: 4.3;

        }

    </style>

</head>

<body>

<h1>line-height கொடுப்பதற்கு முன்பு,</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
     Autem aliquid tempora aperiam excepturi totam quod! Dolorem sapiente illum repudiandae dolorum quia? Nesciunt quidem veniam id debitis aperiam veritatis eius facilis!</p>


	 <h1>line-height கொடுத்த பிறகு,</h1>

<p class="space">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Enim, dolor nulla, ullam, autem error vero voluptas deleniti et deserunt quia fuga perspiciatis? Culpa quod numquam, accusantium perspiciatis harum voluptates enim.</p>


	</body>

</html>

Output:

Letter Space

ஒரு text-ல் உள்ளே இருக்கின்ற எழுத்துகளுக்கு இடைவெளி கொடுக்க வேண்டுமென்றால் அதற்கு Letter spacing property பயன்படுத்தப்படுகிறது.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .space{

            letter-spacing: 5px;

        }

    </style>

</head>

<body>

<h1>letter-spacing கொடுப்பதற்கு முன்பு,</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
     Autem aliquid tempora aperiam excepturi totam quod! Dolorem sapiente illum repudiandae dolorum quia? Nesciunt quidem veniam id debitis aperiam veritatis eius facilis!</p>


	 <h1>letter-spacing கொடுத்த பிறகு,</h1>

<p class="space">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Enim, dolor nulla, ullam, autem error vero voluptas deleniti et deserunt quia fuga perspiciatis? Culpa quod numquam, accusantium perspiciatis harum voluptates enim.</p>


	</body>

</html>

Output:

Word Space

ஒவ்வொரு வார்த்தையக்கும் இடையே இடைவெளி கொடுப்பதற்கு Word spacing property ஆனது பயன்படுத்தப்படுகிறது.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .space{

            word-spacing:10px;

        }

    </style>

</head>

<body>

<h1>word-spacing கொடுப்பதற்கு முன்பு,</h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
     </p>

<h1>word-spacing கொடுத்த பிறகு,</h1>

<p class="space">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>

</body>

</html>