CoderShot

Rate this post

CSS Logical Properties

A collection of features in CSS called CSS Logical Properties and Values gives programmers writing mode and direction-neutral control over the layout. This implies that you can design styles that, without requiring you to change the CSS, automatically adjust to various writing modes (horizontal, vertical), as well as directions (left-to-right, right-to-left).

CSS Logical Properties

What are CSS Logical properties?

In simple words, With the help of CSS Logical Properties, layout control is no longer dependent on text direction, allowing styles to easily adjust to various writing modes.

When working with logical attributes rather than directional ones, typing modes and the path(direction) of the text flow affect both spacing and layout. By allowing the webpage’s format and spacing to change based on the user’s writing style, it improves and becomes more responsive.

The directional qualities are considered in terms of:

  • Top
  • Right
  • Bottom
  • Left

The physical configuration of the user’s device is referred to by these names in the physical properties.

Logical properties are considered in terms of:

  • block-start
  • block-end
  • inline-start
  • inline-end

When opposed to directional qualities, logical attributes offer more flexibility. The spacing and arrangement of the material will adjust to reflect the user’s changing writing mode (language style).

CSS Logical Properties

CSS logical attributes Use the terms “block” and “inline” to clarify the writing’s direction.

  1. Block properties: In CSS, “block properties” refer to logical attributes that manage the size and spacing of layout elements around the block axis, effortlessly adjusting to various writing styles and text orientations.

It usually matches the horizontal writing mode’s vertical dimension.

  • block-size: Indicates an element’s height.
  • margin-block-start: Determines the upper margin.
  • margin-block-end: Establishes the margin at the bottom.
  • padding-block-start: Defines the padding at the top.
  • padding-block-end: Affects the padding at the bottom.
  • border-block start: Establishes the upper boundary.
  • border-block-end: Indicates the border at the bottom.

Syntax:

element{
         block-property-name: value;
              }

Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logical Block Properties</title>
    <style>
        body{
            background-color: wheat;
        }
        .main {
            background-color: skyblue;
            width: 350px;
            height: 150px;
            margin-block-start: 40px;  
            margin-block-end: 30px;
            padding-block-start: 20px;
            padding-block-end: 20px;
            border: 6px solid blue;
        }
    </style>
</head>
<body>
    <div class="main"> 
        <h1>Logical Block Properties</h1>
         <h2>Block properties example</h2>
    </div>
</body>
</html>

Output:

2. Inline properties: In CSS, “inline properties” are logical attributes that manage an element’s width and spacing around the inline axis so that it can easily adjust to various text orientations and writing styles.

This in horizontal writing forms usually corresponds to the horizontal dimension.

  • inline-size: Indicates an element’s width.
  • margin-inline-start: In left-to-right writing modes, this property sets the left margin.
  • margin-inline-end: In left-to-right writing modes, margin-inline-end sets the right margin.
  • padding-inline-start: In left-to-right writing modes, this sets the left padding.
  • padding-inline-end: In left-to-right writing modes, this setting sets the proper padding.
  • border-inline-start: In left-to-right writing modes, this defines the left border.
  • border-inline-end: Specifies the right boundary for writing modes that move from left to right.

Syntax:

Element{
         inline-property-name: value;
                   }
  • Example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Logical Inline Properties</title>
    <style>
        body{
            background-color: rgb(198, 237, 250);
        }
        .main {
            background-color: skyblue;
            width: 350px;
            height: 150px;
            margin-inline-start: 25px;
            margin-inline-end: 40px;
            padding-inline-start: 15px;
            padding-inline-end: 20px;
            border: 6px solid blue;
        }
    </style>
</head>
<body>
    <div class="main">
        <h1>Logical Inline Properties</h1>
        <h2>Inline Properties Example</h2>
    </div>
</body>
</html>

Output:

PROPERTYDESCRIPTION
inline-sizecomparable to the property of breadth.
max-inline-sizeThe property’s equivalent to max-width.
min-inline-sizeThe property’s equivalent to min-width.
block-sizeThe attribute that corresponds to height.
max-block-sizemax-height is equal to max-block-size.
min-block-sizemin-height is equal to min-block-size.
margin-block-startThe top margin is the same as margin-block-start.
margin-block-endThe bottom margin is equivalent to margin-block-end.
margin-inline-startThe left margin’s equivalent.
margin-inline-endThe appropriate margin.
border-block-startborder-top is the same as border-block-start.
border-block-endborder-bottom is equal to border-block-end.
border-inline-startThe border-left equivalent.
border-inline-endThe border-right equivalent.
inset-block-startThe same as top.
inset-block-endThe opposite of bottom.
inset-inline-startleft is equivalent to inset-inline-start.
inset-inline-endThe right equivalent

Examples: (1) A syntactical guide to using CSS’s logical features.

<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <style>
        html 
        {
            background: lightpink;
        }
        .adding-border 
        {
            font-size: 1.5rem;
            font-weight: 800;
            line-height: 1.5;
            color: #2f4f4f;
            padding: 2rem;
            border-inline-start: 1rem purple solid;
            border-block-start: 1rem blue solid;
            border-inline-end: 1rem green solid;
            border-block-end: 1rem red solid;
        }

        .inline-start 
        {
            color: green;
        }
        .block-start 
        {
            color: blue;
        }
        .inline-end 
        {
            color: purple;
        }
        .block-end 
        {
            color: red;
        }

        h2 {
            margin: 0.20rem;
        }
        .container{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div style="text-align: center">
       <h1 style="color: blue">Codershot</h1>
    </div>
    <div class="container">
        <div class="adding-border">
            <h2 class="block-start">block-start</h2>
            <h2 class="block-end">block-end</h2>
            <h2 class="inline-start">inline-start</h2>
            <h2 class="inline-end">inline-end</h2>
        </div>
    </div>
</body>
</html>

Output:

Example: (2) Demonstrate the distinction and application of inline and block logical features.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <style>
        * 
        {
            margin: 0;
            box-sizing: border-box;
        }
        body
        {
            background-color: black;
            padding: 10px;
            text-align: center;
        }
        main 
        {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #border-block 
        {
            border-block: 11px solid green;
            font-size: 101px;
            width: 801px;
            margin-block-end: 151px;
        }
        #border-inline 
        {
            border-inline: 11px solid green;
            font-size: 101px;
            width: 801px;
        }
       
    </style>
</head>
<body>
    <header>
        <h1 style="color: blue">Codershot</h1>
    </header>
    <main>
        <p id="border-block" style="color: white">border-block</p>
        <p id="border-inline" style="color: white">border-inline</p>
    </main>
</body>
</html>

Output:

Important Considerations of CSS Logical properties

When utilizing the logical characteristics of CSS, keep in mind:

  1. Adaptability: They can write in both vertical and horizontal orientations, as well as in LTR and RTL text directions.
  2. Consistency: Maintain a consistent look across all locations.
  3. Fallbacks: To support older browsers, provide physical property fallbacks.
  4. Shorthand: For efficiency, use shorthand logical properties (padding-block, margin-inline, etc.).
  5. Layouts: Use Flexbox and CSS Grid with ease.
  6. Testing: Check designs over a range of text directions and writing styles.
  7. Accessibility: Make text easier to read and navigate across various writing systems and languages.

READ ALSO: CSS WEBSITE LAYOUT

0 0 votes
Course Rating

Share:

More Posts

Send Us A Message

7 Applications of Machine Learning VS Deep Learning in real life scenarios

7 Applications of Machine Learning VS Deep Learning in real life scenarios

Suppose you’re thinking about pursuing a career in the IT sector. In that case, you’ve probably heard of data science, …

Read more

A Simple Calculator in C: Understanding Basic Operations

A Simple Calculator in C: Understanding Basic Operations

In the world of programming, creating a calculator or menu-driven program is a rite of passage for many beginners. It’s …

Read more

Swapping Variables in C: A Beginner’s Guide

Swapping Variables in C: A Beginner’s Guide

In the world of programming, the need of swapping variables is a common occurrence. Whether you’re working on a simple …

Read more

0
Would love your thoughts, please comment.x
()
x