Test your skills: Writing Modes and Logical Properties TASK 3

MDN Learn
1

TASK3

Task Three

Use logical versions of the margin, border, and padding properties so that the edges of the box relate to the text rather than following top, left, bottom and right. You can see how this should look in the image below.

Two boxes one horizontal one vertical with different margin, border and padding
Two boxes one horizontal one vertical with different margin, border and padding1246×704 11.9 KB

Can someone help me with task 3 please?
finding his part a little difficult and also an explanation would be great.

2

Hello @UnknownScript

check this with explanition for each line

.box {

	inline-size: 150px;   /*that will set the size in the inline direction to 150 in default which mean the writing mode in horizontal it will be the width unless the writing mode changed to vertical */

	block-size: 150px;  /*that will set the size in the block direction to 150 in default which mean the writing mode in horizontal it will be the hieght unless the writing mode changed to vertical */


	border-block-start: 5px solid rebeccapurple;  /*again in default writing mode it will be the top border  */

	border-inline-end: 5px solid grey; /*again in default writing mode it will be the right border  */

	border-block-end: 5px dotted red;  /*again in default writing mode it will be the bottom border  */

	border-inline-start: 5px dotted blue; /*again in default writing mode it will be the left border  */

	padding-block-start: 40px; /*again in default writing mode it will be the top padding  */

	margin-block-end: 30px; /*again in default writing mode it will be the bottom margin  */

}
.vertical {
writing-mode: vertical-rl; /*this will change the wrting mode for the secand box to vertical and start from right to left  */
}

check this https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions#Logical_margin_border_and_padding_properties

and this https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions#What_are_writing_modes

hope that help and have a nice day

3

That was very helpful! thank you.
Understood your explanation than the actual pages.

4

you very welcome and thanks a lot for your nice words and have a nice day :slight_smile:

5

I have one question if @justsomeone are seeing this?

However honestly thank you for answering my questions in your own time, very appreciated.

Regarding this? When is this used and how does this work?

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can’t do this calculation beforehand because we don’t know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

6

@UnknownScript you very welcome :slight_smile:

i see this would help you

and your example is right that we use it as the value calculated on the runtime and could even change when user resize his/her window in your example

so calc check what the atterbuite it will be apply to in your example you apply it for width then it caclulate the 20% of the parent then add 200px

and also try to lower the use it in real website
for that reason

and also if the parent is precetage or even use calc then it has to calculate the parent value first and so on

when you reach the flex and grid layout you will see better and more dynamic way to handle responsive website

hope that help and glad to offer any help and have a nice day :slight_smile:

7

@justsomeone
I do appreciate this! you have no idea.
Also thank you again for the explanation, I do try and. understand from the doc pages but sometimes I think explanation helps from others too.

Have a lovely day!

8

you very welcome @UnknownScript

and thanks a lot and you too :slight_smile: