06-basic-visual-formatting/complete-box-model.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The complete box model in two different writing modes</title>
<style type="text/css">
body {
	display: flex;
	justify-content: space-between;
	width: 100em;
	height: 50em;
	font: italic 1em Calibri, Helvetica, sans-serif;
	padding: 1em;
}
main {width: 50em;}
main.vertical {
	transform: rotate(90deg) translate(4.75em);
}
section > h2 {
	font-style: normal;
	font-size: 2.25em;
	text-align: center;
	margin-block: 0 1em;
}

/* --------------------------------- */

div {
	position: relative;
	padding: 5em;
	border: 2px solid;
	mix-blend-mode: darken;
	box-sizing: border-box;
}
div > span {
	position: absolute;
	display: flex;
	justify-content: center;
	font-size: 1.67em;
}
div > span b {
	display: inline-block;
	padding: 0.25em;
	padding-inline-end: 0.33em;
}
div > span.block-start {
	top: 1rem; left: 0; right: 0;
}
div > span.block-end {
	bottom: 1rem; left: 0; right: 0;
}
div > span.inline-start {
	writing-mode: sideways-lr;
	left: 1rem; top: 0; bottom: 0;
}
div > span.inline-end {
	writing-mode: sideways-lr;
	right: 1rem; top: 0; bottom: 0;
}

/* --------------------------------- */

div.edge {
	border: none;
	padding: 0;
	margin: -1.7em;
	height: calc(100% + 3.3em);
	width: calc(100% + 3.3em);
}
div.outer {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 1.6em;
}
div.edge > span {
	font-size: 1.15em;
	font-weight: 100;
	font-style: normal;
}
div.edge > span.block-start {
	top: 0;
}
div.edge > span.block-end {
	bottom: 0;
}
div.edge > span.inline-start {
	left: 0;
}
div.edge > span.inline-end {
	right: 0;
}

/* --------------------------------- */

div.margin {
	overflow: hidden;
}

div.margin::before, div.margin::after {
	content: "";
	position: absolute;
	z-index: 1;
	background: #FFA8;
	width: 33.1em;
	height: 33.1em;
}
div.margin {
	--diagonals: black, black 0.3em, transparent 0.3em, transparent 0.6em;
}
div.margin::before {
	top: -1px; left: -2px;
	transform-origin: 0 0;
	transform: rotate(-45deg);
	background:
		repeating-linear-gradient(180deg, var(--diagonals)) 0 0 / 0.125em 15em no-repeat,
		repeating-linear-gradient(90deg, var(--diagonals)) 100% 100% / 15em 0.125em no-repeat,
		transparent;
	;
}
div.margin::after {
	bottom: -1px; left: -2px;
	transform-origin: 0 100%;
	transform: rotate(45deg);
	background:
		repeating-linear-gradient(180deg, var(--diagonals)) 0 100% / 0.125em 15em no-repeat,
		repeating-linear-gradient(90deg, var(--diagonals)) 100% 0 / 15em 0.125em no-repeat,
		transparent;
	;
}

/* --------------------------------- */

div.border {
	padding: 0;
	border-width: 0.5em;
}
div.border > span.block-start {
	top: -1em;
}
div.border > span.block-end {
	bottom: -1em;
}
div.border > span.inline-start {
	left: -1em;
}
div.border > span.inline-end {
	right: -1em;
}
div.border > span b {
	display: inline-block;
	padding: 0.25em;
	padding-inline: 0.5em;
	background-color: rgba(255,255,255,0.9);
}

/* --------------------------------- */

div.padding {
	border-width: 0;
	background-color: #EEE;
	z-index: 3;
}

/* --------------------------------- */

div.content {
	height: 16em;
	padding: 0;
	background-color: #DDD;
}

div.content > span {
	display: block;
	padding-block: 0.75em;
	padding-inline: 2em 0;
	padding-inline-end: 2em;
}
div.content > span b {
	background-color: #DDD;
	display: inline-block;
	line-height: 0.9;
	text-align: center;
}
div.content span.height {
	z-index: 2;
	writing-mode: sideways-lr;
	text-align: right;
	top: 0; bottom: 0; left: 50%; margin-left: 0;
	background:
		url(i/arrowhead-up.svg) 50% 0% / 0.75em 1.25em no-repeat,
		url(i/arrowhead-down.svg) 50% 100% / 0.75em 1.25em no-repeat,
		linear-gradient(180deg,black,black) 50% 50% / 0.25rem calc(100% - 2em) no-repeat
		;
}
div.content span.width {
	z-index: 1;
	left: 0; right: 0; top: 50%; margin-top: -1em;
	background:
		url(i/arrowhead-right.svg) 100% 50% / 1.25em 0.75em no-repeat,
		url(i/arrowhead-left.svg) 0% 50% / 1.25em 0.75em no-repeat,
		linear-gradient(90deg,black,black) 50% 50% / calc(100% - 2em) 0.25rem no-repeat
		;
	font-style: italic;
}


</style>
</head>
<body>

<section>
<h2>left-to-right, top-to-bottom writing</h2>
<main>
	<div class="outer edge">
	  <span class="block-start"><b>block-start outer edge</b></span>
		 <span class="block-end"><b>block-end outer edge</b></span>
	<span class="inline-start"><b>inline-start outer edge</b></span>
	    <span class="inline-end"><b>inline-end outer edge</b></span>
		<div class="margin">
			  <span class="block-start"><b>block-start margin</b></span>
				 <span class="block-end"><b>block-end margin</b></span>
			<span class="inline-start"><b>inline-start margin</b></span>
			    <span class="inline-end"><b>inline-end margin</b></span>
			<div class="border">
				  <span class="block-start"><b>block-start border</b></span>
					 <span class="block-end"><b>block-end border</b></span>
				<span class="inline-start"><b>inline-start border</b></span>
				    <span class="inline-end"><b>inline-end border</b></span>
				<div class="padding">
					  <span class="block-start"><b>block-start padding</b></span>
						 <span class="block-end"><b>block-end padding</b></span>
					<span class="inline-start"><b>inline-start padding</b></span>
					    <span class="inline-end"><b>inline-end padding</b></span>
					<div class="content">
						<span class="height"><b>block size<br>height</b></span>
						<span class="width"><b>inline size<br>width</b></span>
							<div class="inner edge">
						  <span class="block-start"><b>block-start inner edge</b></span>
							 <span class="block-end"><b>block-end inner edge</b></span>
						<span class="inline-start"><b>inline-start inner edge</b></span>
						    <span class="inline-end"><b>inline-end inner edge</b></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
</section>

<section>
<h2>top-to-bottom, right-to-left writing</h2>
<main class="vertical">
	<div class="outer edge">
		  <span class="block-start"><b>block-start outer edge</b></span>
			 <span class="block-end"><b>block-end outer edge</b></span>
		<span class="inline-start"><b>inline-start outer edge</b></span>
		    <span class="inline-end"><b>inline-end outer edge</b></span>
		<div class="margin">
			  <span class="block-start"><b>block-start margin</b></span>
				 <span class="block-end"><b>block-end margin</b></span>
			<span class="inline-start"><b>inline-start margin</b></span>
			    <span class="inline-end"><b>inline-end margin</b></span>
			<div class="border">
				  <span class="block-start"><b>block-start border</b></span>
					 <span class="block-end"><b>block-end border</b></span>
				<span class="inline-start"><b>inline-start border</b></span>
				    <span class="inline-end"><b>inline-end border</b></span>
				<div class="padding">
					  <span class="block-start"><b>block-start padding</b></span>
						 <span class="block-end"><b>block-end padding</b></span>
					<span class="inline-start"><b>inline-start padding</b></span>
					    <span class="inline-end"><b>inline-end padding</b></span>
					<div class="content">
						<span class="height"><b>block size<br>width</b></span>
						<span class="width"><b>inline size<br>height</b></span>
							<div class="inner edge">
						  <span class="block-start"><b>block-start inner edge</b></span>
							 <span class="block-end"><b>block-end inner edge</b></span>
						<span class="inline-start"><b>inline-start inner edge</b></span>
						    <span class="inline-end"><b>inline-end inner edge</b></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
</section>

</body>
</html>