#Columns:

[jcmarchi]

Pop(over) the Balloons

New Post has been published on https://thedigitalinsider.com/popover-the-balloons/

Pop(over) the Balloons

I’ve always been fascinated with how much we can do with just HTML and CSS. The new interactive features of the Popover API are yet another example of just how far we can get with those two languages alone.

You may have seen other tutorials out there showing off what the Popover API can do, but this is more of a beating-it-mercilessly-into-submission kind of article. We’ll add a little more pop music to the mix, like with balloons… some literal “pop” if you will.

What I’ve done is make a game — using only HTML and CSS, of course — leaning on the Popover API. You’re tasked with popping as many balloons as possible in under a minute. But be careful! Some balloons are (as Gollum would say) “tricksy” and trigger more balloons.

I have cleverly called it Pop(over) the Balloons and we’re going to make it together, step by step. When we’re done it’ll look something like (OK, exactly like) this:

Handling the popover attribute

Any element can be a popover as long as we fashion it with the popover attribute:

<div popover>...</div>

We don’t even have to supply popover with a value. By default, popover‘s initial value is auto and uses what the spec calls “light dismiss.” That means the popover can be closed by clicking anywhere outside of it. And when the popover opens, unless they are nested, any other popovers on the page close. Auto popovers are interdependent like that.

The other option is to set popover to a manual value:

<div popover=“manual”>...</div>

…which means that the element is manually opened and closed — we literally have to click a specific button to open and close it. In other words, manual creates an ornery popup that only closes when you hit the correct button and is completely independent of other popovers on the page.

Using the <details> element as a starter

One of the challenges of building a game with the Popover API is that you can’t load a page with a popover already open… and there’s no getting around that with JavaScript if our goal is to build the game with only HTML and CSS.

Enter the <details> element. Unlike a popover, the <details> element can be open by default:

<details open> <!-- rest of the game --> </details>

If we pursue this route, we’re able to show a bunch of buttons (balloons) and “pop” all of them down to the very last balloon by closing the <details>. In other words, we can plop our starting balloons in an open <details> element so they are displayed on the page on load.

This is the basic structure I’m talking about:

<details open> <summary>🎈</summary> <button>🎈</button> <button>🎈</button> <button>🎈</button> </details>

In this way, we can click on the balloon in <summary> to close the <details> and “pop” all of the button balloons, leaving us with one balloon (the <summary> at the end (which we’ll solve how to remove a little later).

You might think that <dialog> would be a more semantic direction for our game, and you’d be right. But there are two downsides with <dialog> that won’t let us use it here:

The only way to close a <dialog> that’s open on page load is with JavaScript. As far as I know, there isn’t a close <button> we can drop in the game that will close a <dialog> that’s open on load.

<dialog>s are modal and prevent clicking on other things while they’re open. We need to allow gamers to pop balloons outside of the <dialog> in order to beat the timer.

Thus we will be using a <details open> element as the game’s top-level container and using a plain ol’ <div> for the popups themselves, i.e. <div popover>.

All we need to do for the time being is make sure all of these popovers and buttons are wired together so that clicking a button opens a popover. You’ve probably learned this already from other tutorials, but we need to tell the popover element that there is a button it needs to respond to, and then tell the button that there is a popup it needs to open. For that, we give the popover element a unique ID (as all IDs should be) and then reference it on the <button> with a popovertarget attribute:

<!-- Level 0 is open by default --> <details open> <summary>🎈</summary> <button popovertarget="lvl1">🎈</button> </details> <!-- Level 1 --> <div id="lvl1" popover="manual"> <h2>Level 1 Popup</h2> </div>

This is the idea when everything is wired together:

Opening and closing popovers

There’s a little more work to do in that last demo. One of the downsides to the game thus far is that clicking the <button> of a popup opens more popups; click that same <button> again and they disappear. This makes the game too easy.

We can separate the opening and closing behavior by setting the popovertargetaction attribute (no, the HTML spec authors were not concerned with brevity) on the <button>. If we set the attribute value to either show or hide, the <button> will only perform that one action for that specific popover.

<!-- Level 0 is open by default --> <details open> <summary>🎈</summary> <!-- Show Level 1 Popup --> <button popovertarget="lvl1" popovertargetaction="show">🎈</button> <!-- Hide Level 1 Popup --> <button popovertarget="lvl1" popovertargetaction="hide">🎈</button> </details> <!-- Level 1 --> <div id="lvl1" popover="manual"> <h2>Level 1 Popup</h2> <!-- Open/Close Level 2 Poppup --> <button popovertarget="lvl2">🎈</button> </div> <!-- etc. -->

Note, that I’ve added a new <button> inside the <div> that is set to target another <div> to pop open or close by intentionally not setting the popovertargetaction attribute on it. See how challenging (in a good way) it is to “pop” the elements:

Styling balloons

Now we need to style the <summary> and <button> elements the same so that a player cannot tell which is which. Note that I said <summary> and not <details>. That’s because <summary> is the actual element we click to open and close the <details> container.

Most of this is pretty standard CSS work: setting backgrounds, padding, margin, sizing, borders, etc. But there are a couple of important, not necessarily intuitive, things to include.

First, there’s setting the list-style-type property to none on the <summary> element to get rid of the triangular marker that indicates whether the <details> is open or closed. That marker is really useful and great to have by default, but for a game like this, it would be better to remove that hint for a better challenge.

Safari doesn’t like that same approach. To remove the <details> marker here, we need to set a special vendor-prefixed pseudo-element, summary::-webkit-details-marker to display: none.

It’d be good if the mouse cursor indicated that the balloons are clickable, so we can set cursor: pointer on the <summary> elements as well.

One last detail is setting the user-select property to none on the <summary>s to prevent the balloons — which are simply emoji text — from being selected. This makes them more like objects on the page.

And yes, it’s 2024 and we still need that prefixed -webkit-user-select property to account for Safari support. Thanks, Apple.

Putting all of that in code on a .balloon class we’ll use for the <button> and <summary> elements:

.balloon background-color: transparent; border: none; cursor: pointer; display: block; font-size: 4em; height: 1em; list-style-type: none; margin: 0; padding: 0; text-align: center; -webkit-user-select: none; /* Safari fallback */ user-select: none; width: 1em;

One problem with the balloons is that some of them are intentionally doing nothing at all. That’s because the popovers they close are not open. The player might think they didn’t click/tap that particular balloon or that the game is broken, so let’s add a little scaling while the balloon is in its :active state of clicking:

.balloon:active scale: 0.7; transition: 0.5s;

Bonus: Because the cursor is a hand pointing its index finger, clicking a balloon sort of looks like the hand is poking the balloon with the finger. 👉🎈💥

The way we distribute the balloons around the screen is another important thing to consider. We’re unable to position them randomly without JavaScript so that’s out. I tried a bunch of things, like making up my own “random” numbers defined as custom properties that can be used as multipliers, but I couldn’t get the overall result to feel all that “random” without overlapping balloons or establishing some sort of visual pattern.

I ultimately landed on a method that uses a class to position the balloons in different rows and columns — not like CSS Grid or Multicolumns, but imaginary rows and columns based on physical insets. It’ll look a bit Grid-like and is less “randomness” than I want, but as long as none of the balloons have the same two classes, they won’t overlap each other.

I decided on an 8×8 grid but left the first “row” and “column” empty so the balloons are clear of the browser’s left and top edges.

/* Rows */ .r1 --row: 1; .r2 --row: 2; /* all the way up to .r7 */ /* Columns */ .c1 --col: 1; .c2 --col: 2; /* all the way up to .c7 */ .balloon /* This is how they're placed using the rows and columns */ top: calc(12.5vh * (var(--row) + 1) - 12.5vh); left: calc(12.5vw * (var(--col) + 1) - 12.5vw);

Congratulating The Player (Or Not)

We have most of the game pieces in place, but it’d be great to have some sort of victory dance popover to congratulate players when they successfully pop all of the balloons in time.

Everything goes back to a <details open> element. Once that element is not open, the game should be over with the last step being to pop that final balloon. So, if we give that element an ID of, say, #root, we could create a condition to hide it with display: none when it is :not() in an open state:

#root:not([open]) display: none;

This is where it’s great that we have the :has() pseudo-selector because we can use it to select the #root element’s parent element so that when #root is closed we can select a child of that parent — a new element with an ID of #congrats — to display a faux popover displaying the congratulatory message to the player. (Yes, I’m aware of the irony.)

#game:has(#root:not([open])) #congrats display: flex;

If we were to play the game at this point, we could receive the victory message without popping all the balloons. Again, manual popovers won’t close unless the correct button is clicked — even if we close its ancestral <details> element.

Is there a way within CSS to know that a popover is still open? Yes, enter the :popover-open pseudo-class.

The :popover-open pseudo-class selects an open popover. We can use it in combination with :has() from earlier to prevent the message from showing up if a popover is still open on the page. Here’s what it looks like to chain these things together to work like an and conditional statement.

/* If #game does *not* have an open #root * but has an element with an open popover * (i.e. the game isn't over), * then select the #congrats element... */ #game:has(#root:not([open])):has(:popover-open) #congrats /* ...and hide it */ display: none;

Now, the player is only congratulated when they actually, you know, win.

Conversely, if a player is unable to pop all of the balloons before a timer expires, we ought to inform the player that the game is over. Since we don’t have an if() conditional statement in CSS (not yet, at least) we’ll run an animation for one minute so that this message fades in to end the game.

#fail animation: fadein 0.5s forwards 60s; display: flex; opacity: 0; z-index: -1; @keyframes fadein 0% opacity: 0; z-index: -1; 100% opacity: 1; z-index: 10;

But we don’t want the fail message to trigger if the victory screen is showing, so we can write a selector that prevents the #fail message from displaying at the same time as #congrats message.

#game:has(#root:not([open])) #fail display: none;

We need a game timer

A player should know how much time they have to pop all of the balloons. We can create a rather “simple” timer with an element that takes up the screen’s full width (100vw), scaling it in the horizontal direction, then matching it up with the animation above that allows the #fail message to fade in.

#timer width: 100vw; height: 1em; #bar animation: 60s timebar forwards; background-color: #e60b0b; width: 100vw; height: 1em; transform-origin: right; @keyframes timebar 0% scale: 1 1; 100% scale: 0 1;

Having just one point of failure can make the game a little too easy, so let’s try adding a second <details> element with a second “root” ID, #root2. Once more, we can use :has to check that neither the #root nor #root2 elements are open before displaying the #congrats message.

#game:has(#root:not([open])):has(#root2:not([open])) #congrats display: flex;

Wrapping up

The only thing left to do is play the game!

Fun, right? I’m sure we could have built something more robust without the self-imposed limitation of a JavaScript-free approach, and it’s not like we gave this a good-faith accessibility pass, but pushing an API to the limit is both fun and educational, right?

I’m interested: What other wacky ideas can you think up for using popovers? Maybe you have another game in mind, some slick UI effect, or some clever way of combining popovers with other emerging CSS features, like anchor positioning. Whatever it is, please share!

[nevver]

Korn, Uli Westphal (because)

[389]

PORTO ROCHA

[nanaluvbug]

🧀🥪🌶️🥭 The Ravening War portraits  🧀🥪🌶️🥭

patreon * twitch * shop  

[ID: a series of digitally illustrated portraits showing - top left to bottom right - Bishop Raphaniel Charlock (an old radish man with a big red head and large white eyebrows & a scraggly beard. he wears green and gold robes with symbols of the bulb and he smirks at the viewer) Karna Solara (a skinny young chili pepper woman with wavy green hair, freckled light green skin with red blooms on her cheeks. she wears a chili pepper hood lined with small pepper seeds and stares cagily ahead) Thane Delissandro Katzon (a muscular young beef man with bright pinkish skin with small skin variations to resemble pastrami and dark burgundy hair. he wears a bread headress with a swirl of rye covering his ears and he looks ahead, optimistic and determined) Queen Amangeaux Epicée du Peche (a bright mango woman with orange skin, big red hair adorned with a green laurel, and sparkling green/gold makeup. she wears large gold hoop earrings and a high leafy collar) and Colin Provolone (a scraggly cheese man with waxy yellow skin and dark slicked back hair and patchy dark facial hair. he wears a muted, ratty blue bandana around his neck and raises a scarred brow at the viewer with a smirk) End ID.)

[70sscifiart]

One of my favorites by Paul Lehr, used as a 1971 cover to "Earth Abides," by George R. Stewart. It's also in my upcoming art book!

[layla-keating]

#thistension

XO, KITTY — 1.09 “SNAFU”

[foodffs]

Noodles with Lamb Sauce (Laghman, 新疆拌面) Xinjiang laghman features chewy noodles served with a bold and rich lamb and tomato sauce that is bursting with flavor.

Recipe: https://omnivorescookbook.com/recipes/uyghur-style-noodles-with-lamb-sauce

[taizooo]

もともとは10年ほど前にTumblrにすごくハマっていて。いろんな人をフォローしたらかっこいい写真や色が洪水のように出てきて、もう自分で絵を描かなくて良いじゃん、ってなったんです。それで何年も画像を集めていって、そこで集まった色のイメージやモチーフ、レンズの距離感など画面構成を抽象化して、いまの感覚にアウトプットしています。画像の持つ情報量というものが作品の影響になっていますね。

映画『きみの色』山田尚子監督×はくいきしろい対談。嫉妬し合うふたりが語る、色と光の表現｜Tokyo Art Beat

[lesserknownbots]

CJ from Hello World (MSPFA) by phasedsun?

[kithtaehyung]

AGUST D : DAECHWITA (大吹打) & HAEGEUM (解禁)  ⤷ movie posters | ig ; twt (click for hi-res)

[jcmarchi]

CSS Length Units

New Post has been published on https://thedigitalinsider.com/css-length-units/

CSS Length Units

Overview

Many CSS properties accept numbers as values. Sometimes those are whole numbers. Sometimes they’re decimals and fractions. Other times, they’re percentages. Whatever they are, the unit that follows a number determines the number’s computed length. And by “length” we mean any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things!

At the time of this writing, the CSS Values and Units Module Level 4 specification defines a bunch of different CSS units — and many of those are relatively new (this pun will make sense later).

Quick Reference

Absolute units

Unit Name cm Centimeters mm Millimeters Q Quarter-millimeters in Inches pc Picas pt Points px Pixels

Font units

Unit Relative to… em The font size of the element, or its nearest parent container ex The x-height of the element’s font  cap The cap height (the nominal height of capital letters) of the element’s font  ch The width of the 0 character of the font in use ic The average width of a full glyph of the font in use, as represented by the “水” (U+6C34) glyph rem The font-size value that’s set on the root (html) element lh The line-height value that’s set on the element  rlh The line-height that’s set on the root (html) element  vw 1% of viewport’s width vh 1% of viewport’s height vi 1% of viewport’s size in the root element’s inline axis vb 1% of viewport’s size in the root element’s block axis vmin Equal to 1% of the vw or vh, whichever is smaller vmax Equal to 1% of the vw or vh, whichever is larger

Viewport units

vw 1% of viewport’s width vh 1% of viewport’s height vi 1% of viewport’s size in the root element’s inline axis vb 1% of viewport’s size in the root element’s block axis vmin 1% of the vw or vh, whichever is smaller vmqx 1% of the vw or vh, whichever is larger

Container units

Unit Relative to cqw 1% of a query container’s width cqh 1% of a query container’s height cqi 1% of a query container’s inline size cqb 1% of a query container’s block size cqmin The smaller value of cqi or cqb cqmax The larger value of cqi or cqb

Angle units

Unit Description deg There are 360 degrees in a full circle. grad There are 400 gradians in a full circle. rad There are 2π radians in a full circle. turn There is 1 turn in a full circle.

Time units

Unit Description s There are 60 seconds in a minute, but there is no unit for minutes. ms There are 1,000 milliseconds in a second.

Fractional units

Unit Description fr One fraction of the free space in a grid container.

Resolution units

Unit Description dpi Dots per inch dpcm Dots per centimeter dppx, x Dots per pixel unit

Frequency units

Unit Description Hz Represents the number of occurrences per second kHz One kiloHertz is equal to 1000 Hertz.

Table of contents

Introduction

You’re going to see a lot numbers in CSS. Here are a few examples?

/* Integers */ 1 /* Pixels */ 14px /* em */ 1.5em /* rem */ 3rem /* Percentage */ 50% /* Characters */ 650ch /* Viewport units */ 100vw 80vh 50dvh /* Container units */ 100cqi 50cqb

While these all mean different things, they essentially do the same thing: define an element’s dimensions in CSS. We need units in CSS because they determine how to size elements on a page, whether it’s the height of a box, the width of an image, the font-size of a heading, the margin between two elements, how long an animation runs, etc. Without them, the browser would have no way of knowing how to apply numbers to an element.

So, what the heck is px? What’s up with this thing called rem? How are these different than other length units? The unit defines what type of number we’re dealing with, and each one does something different, giving us lots of ways to size things in CSS.

Types of numbers

You may think a number is just a number, and you’re not wrong. Numbers are numbers! But we can distinguish between a few different types of numbers, which is helpful context for discussing the different types of units we attach them to since “number” can mean, well, a number of different things.

Integers (literally a unit-less number, e.g. 3)

Numbers (same as an integer, only measured in decimals, e.g. 3.2)

Dimensions (either a number or integer with a unit, e.g. 3.2rem)

Ratios (the quotient between two divided numbers, e.g. 3/2)

Percentages (e.g. 3%)

Got that? They’re all numbers but with nuances that make them ever-so-slightly different.

From here, we can think of numbers in CSS as falling into two specific types of units: absolute and relative. Let’s start things off our deep dive on CSS length units by breaking those down.

Absolute units

An absolute unit is like Bill Murray in the movie Groundhog Day: it’s always the same. In other words, whatever the number is, that’s exactly how it computes in the browser regardless of how other elements are sized.

The most common absolute value you’ll see is the pixel value. It’s sort of hard to define, but a pixel is the smallest building block of a graphical display, like a computer screen. And it’s based on the resolution of the screen. So, if you’re on a super high-resolution screen, a pixel will be smaller than it would be on a low-resolution screen, as the resolution can pack more pixels into a smaller amount of space for higher clarity. But look at the example below. All of the boxes are sized with pixels, so you can get a sense of how large 50px is compared to 250px.

Absolute values are nice in that they are predictable. That could, however, change in some situations, particularly when it comes to zooming. If, say, a user zooms into a page using browser settings, then anything defined with an absolute value is going to increase its absolute size accordingly. So, if the font-size of a paragraph is set to 20px, the paragraph is going to be larger as the user zooms closer into the page. And because zooming is often used to make content more readable, using absolute values that retain their sizing could be a good approach for making pages more accessible by allowing users to zoom things up to a spot that more comfortable to read.

But then again, see Josh Collinsworth’s click-baity, but fantastic, post titled “Why you should never use px to set font-size in CSS” for an exhaustive explanation of how pixels behave when used to set the font-size of an element. It’s a great read to better understand the behavior and limitations of pixel units.

And, hey: pixels are only one of many types of absolute lengths that are available in CSS. In fact, we can group them by the types of things they measure:

Length units

Length units are a little funny because they can technically be either an absolute unit or a relative unit. But we’re discussing them in absolute terms at the moment and will revisit them when we get further along to relative length units.

A length is essentially a dimension, which is any integer proceeded by a unit, according to the list of types of numbers we looked at earlier. And when we talk about dimensions, we’re really talking about the physical size of an element.

Unit Name cm Centimeters mm Millimeters Q Quarter-millimeters in Inches pc Picas pt Points px Pixels

What we’re looking at here are the types of units you might use see on a tape measure (e.g., cm and in) or in print design (e.g. pc and pt). They are what they are and what you see is what you get.

Angle units

Angle units are purely geometric. They’re good for setting shape dimensions — like a circle’s radius, setting the direction of a linear-gradient(), or setting the how much we want to rotate() something.

Unit Name Description Example deg Degrees A full circle is equal to 360deg. rotate(180deg) grad Gradiens A full circle is equal to 400grad. rotate(200grad) rad Radiens A full circle is equal to 2π (i.e., 2 × 3.14), or about 6.2832rad. rotate(3.14rad) turn Turns A full circle is 1turn, like a bicycle wheel making one full rotation. rotate(.5turn)

Time units

Time units are what you’d expect to find on a clock or watch, but only measure in seconds and milliseconds. Apparently the web cannot be measured in minutes, hours, days, weeks, months, or years. Perhaps we’ll get a new category of “calendar units” at some point, or maybe there’s no good use case for that sort of thing. 🤷‍♂️

Unit Name Description Example s Seconds One full minute of time is equal to 60s. animation-duration: 2s ms Milliseconds One full second of time os equal to 1000ms. animation-duration: 2000ms

Frequency units

You won’t see frequency units used very often and for good reason: they’re not supported by any browser at the time of this writing. But they’re specced to change sound frequency, such as a sound’s pitch. The best I can make of it as it currently stands is that frequencies can be used to manipulate an audio file with a higher or lower pitch measured in hertz and kilohertz.

Unit Name Description Example Hz Hertz Measures the number of frequencies per second <source src="tubthumping.mp3" type="audio/mpeg" frequency="100Hz"> kHz Kilohertz A value of 1Hz is equal to 0.001kHz. <source src="tubthumping.mp3" type="audio/mpeg" frequency="0.1kHz">

If you’re wondering what constitutes a “low” pitch from a “high” one, the spec explains it like this:

[W]hen representing sound pitches, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a treble sound.

Resolution units

Resolution is how many little dots are packed into a screen — such as the screen you’re looking at right now — where more dots per inch of space improves the clarity and quality of the display. The fewer dots there are, the more pixelated and blurry the display.

Why would you need something like this? Well, it’s great for targeting styles to specific screens that support certain resolutions in a media query.

img max-width: 500px; /* Double the resolution and above */ @media (min-resolution >= 2dppx) img max-width: 100%;

Unit Name Description Example dpi Dots per inch The number of dots packed into one inch of space. @media (min-resolution: 96dpi) dpcm Dots per centimeter The number of dots packed into one centimeter of space. @media (min-resolution: 960dpcm) dppx (or x) Dots per pixel The number of dots packed into one pixel of space. @media (min-resolution: 1dppx)

Interestingly, the specification makes mention of an infinite value that is supported by resolution media queries for targeting screens without resolution constraints. It’s not so much of a “catch-all” value for targeting any sort of screen, but for cases when we’re using the media query range syntax to evaluate whether a certain value is greater than, less than, or equal to it:

For output mediums that have no physical constraints on resolution (such as outputting to vector graphics), this feature must match the infinite value. For the purpose of evaluating this media feature in the range context, infinite must be treated as larger than any possible <resolution>. (That is, a query like (resolution > 1000dpi)will be true for an infinite media.)

W3C Media Queries Level 4 specification

Relative units

A relative unit is extremely well-named because whatever value we use for a relative unit depends on the size of something else. Say we have an HTML element, a <div>, and we give it an absolute height value (not a relative one) of 200px.

<div class="box"> I am 200 pixels tall </div>

.box height: 200px;

That height will never change. The .box element will be 200px tall no matter what. But let’s say we give the element a relative width (not an absolute one) of 50%.

<div class="box"> I am 200 pixels tall and 50% wide </div>

.box height: 200px; width: 50%;

What happens to our box? It takes up 50%, or half, of the available space on the screen.

See that? Go ahead and open that demo in a new window and change the width of the screen. And notice, too, how the height never changes because it’s an absolute length unit in pixels. The width, meanwhile, is fluidly resized as “50% of the available space” changes with the width of the screen.

That’s what we mean when talking about computed values with relative numbers. A relative number acts sort of like a multiplier that calculates the value used to set a length based on what type of unit it is relative to. So, a value of 3rem is going to wind up becoming a different value when it is computed.

Percentages, like 50%, are only one kind of relative unit. We have many, many others. Once again, it’s helpful to break things out into separate groups to understand the differences just as we did earlier with absolute units.

Percentages

We’ve already discussed percentages in pretty good detail. What makes a percentage relative is that it computes to a number value based on the length of another element. So, an element that is given width: 25% in a container that is set to width: 1000px computes to width: 250px.

Unit Name Relative to… % Percent The size of the element’s parent container.

Font relative units

The em and rem units we looked at earlier are prime examples of relative units that you will see all over the place. They’re incredibly handy, as we saw, because changing the font-size value of an element’s parent or the <html> element, respectively, causes the element’s own font-size value to update in accordance with the updated value.

In other words, we do not need to directly change an element’s font-size when updating the font-size of other elements — it’s relative and scales with the change.

Unit Name Relative to… em Element The font-size value of the element’s parent container. rem Root element The font-size value of the <html> element. ch Character The width of one character of content relative to the parent element’s font. The computed width may update when replacing one font with another, except for monospace fonts that are consistently sized. rch Root character The same thing as a ch unit except it is relative to the font of the root element, i.e. <html>. lh Line height The line-height value of the element’s parent container. rlh Root element line height The line-height value of the <html> element. cap Capital letter The height of a capital letter for a particular font relative to the parent element. rcap Root capital letter The same measure as cap but relative to the root element, i.e. <html>. ic International character The width of a CJK character, or foreign glyph, e.g. from a Chinese font, relative to an element’s parent container. ric Root international character The same measure as ic but relative to the root element, i.e. <html>. ex X-height The height of the letter x of a particular font, or an equivalent for fonts that do not contain an x character, relative to the parent element. rex Root x-height The same measure as ex but relative to the root element, i.e. <html>.

Some of those terms will make more sense to typography nerds than others. The following diagram highlights the lines that correspond to relative font units.

So, at the expense of beating this concept into the ground, if width: 10ch computes to a certain number of pixels when using one font, it’s likely that the computed value will change if the font is swapped out with another one with either larger or smaller characters.

Viewport relative units

Unit Name Relative to… vh / vw Viewport Height / Viewport Width The height and width of the viewport (i.e., visible part of the screen), respectively. vmin / vmax Viewport Minimum / Viewport Maximum The lesser and greater of vh and vw, respectively. lvh / lvw Large Viewport Height / Large Viewport Width The height and width of the viewport when the device’s virtual keyboard or browser UI is out of view, leaving a larger amount of available space. lvb / lvi Large Viewport Block / Large Viewport Inline These are the logical equivalents of lvh and lvw, indicating the block and inline directions. svh / svw Small Viewport Height / Small Viewport Width The height and width of the viewport when the device’s virtual keyboard or browser UI is in view, making the amount of available space smaller. svb / svi Small Viewport Block / Small Viewport Inline These are the logical equivalents of svh and svw, indicating the block and inline directions. dvh / dvw Dynamic Viewport Height / Dynamic Viewport Width The height and width of the viewport accounting for the available space changing if, say, the device’s virtual keyboard or browser UI is in view. dvb / dvi Dynamic Viewport Block / Dynamic Viewport Inline These are the logical equivalents of dvh and dvw, indicating the block and inline directions. dvmin / dvmax Dynamic Viewport Minimum / Dynamic Viewport Maximum The lesser and greater of dvh/dvb and dvw/dvi, respectively.

Ah, viewport units! When we say that something should be 100% wide, that means it takes up the full width of the contain it is in. That’s because a percentage unit is always relative to its nearest parent element. But a  viewport unit is always relative to the size of the viewport, or browser window. If an element has a viewport height of 100vh and a viewport width of 100vw, then it will be as tall and wide as the full browser window.

This can be a neat way to create something like a hero banner at the top of your website. For example, we can make a banner that is always one half (50vh) the height of the viewport making it prominent no matter how tall someone’s browser is. Change the CSS in the top-left corner of the following demo from height: 50vh to something else, like 75vh to see how the banner’s height responds.

There’s something else that’s very important to know when working with viewport units. You know how mobile phones, like iPhone or an Android device, have virtual keyboards where you type directly on the screen? That keyboard changes the size of the viewport. That means that whenever the keyboard opens, 100vh is no longer the full height of the screen but whatever space is leftover while the keyboard is open, and the layout could get super squished as a result.

That’s why we have the svh, lvh, and dvh units in addition to vh:

svh is equal to the “small” viewport height, which occurs when the keyboard is open.

lvh is equal to the “large” viewport height, which is when the keyboard is disabled and out of view.

dvh is a happy medium between svh and lvh in that it is “dynamic” and updates its value accordingly when the keyboard is displayed or not.

dvmin / dvmax is the greater ore lesser of dvh, respectively.

It’s a bit of a tightrope walk in some cases and a good reason why container queries and their units (which we’ll get to next) are becoming more popular. Check out Ahmed Shader’s article “New Viewport Units” for a comprehensive explanation about viewport units with detailed examples of the issues you may run into. You may also be interested in Sime Vidas’s “New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem” for a better understanding of how viewport units compute values.

Container relative units

Unit Name Equivalent to… cqw Container query width 1% of the queried container’s width cqh Container query height 1% of the queried container’s height cqi Container query inline size 1% of the queried container’s inline size, which is its width in a horizontal writing mode. cqb Container query block size 1% of the queried container’s inline size, which is its height in a horizontal writing mode. cqmin Container query minimum size The value of cqi or cqb, whichever is smaller. cqmax Container query maximum size The value of cqi or cqb, whichever is larger.

Container units are designed to be used with container queries. Just as we are able to target a specific screen size with a media query, we can target the specific size of a particular element and apply styles using a container query.

We won’t do a big ol’ deep dive into container queries here. The relevant bit is that we have CSS length units that are relative to a container’s size. For example, if we were to define a container:

.parent-container container-type: inline-size;

…then we’re watching that element’s inline-size — which is equivalent to width in a horizontal writing mode — and can apply styles to other elements when it reaches certain sizes.

.child-element background: rebeccapurple; width: 100%; @container parent (width > 30ch) .child-element background: dodgeblue; width: 50cqi;

Try resizing the following demo. When the parent container is greater than 30ch, the child element will change backgrounds and shrink to one-half the parent container’s width, or 50cqi.

What about unit-less numbers?

Oh yeah, there are times when you’re going to see numbers in CSS that don’t have any unit at all — just a single integer or number without anything appended to it.

aspect-ratio: 2 / 1; /* Ratio */ column-count: 3; /* Specifies a number of columns */ flex-grow: 1; /* Allows the element to stretch in a flex layout */ grid-column-start: 4; /* Places the element on a specific grid line */ order: 2; /* Sets the order of elemnents in a flex or grid layout */ scale: 2; /* The elementis scaled up or down by a factor */ z-index: 100; /* Element is placed in a numbered layer for stacking */ zoom: 0.2; /* The element zooms in or out by a factor */

This isn’t a comprehensive list of all the CSS properties that accept unit-less numeric values, but it is a solid picture of when you would use them. You’ll see that in most cases a unit-less number is an explicit detail, such as a specific column to position an element, a specific layer in a stacking context, a boolean that enables or disables a feature, or the order of elements. But note that anytime we declare “zero” as a number, we can write it with or without a prepended unit, as zero always evaluates to zero no matter what unit we’re dealing with.

border: 0; /* No border */ box-shadow: 0 0 5px #333; /* No shadow offset */ margin: 0; /* No margin */ padding: 0; /* No padding */

We can create our own custom units!

In some cases, we may want to work with a numeric value, but CSS doesn’t exactly recognize it as one. In these cases, the number is recognized as a “string” value instead, regardless of whether or not it contains alphabetical characters. That’s where we can use @property to create what’s called a “custom property” that evaluates a numeric value in a certain way.

Here’s a good example. There was a time when it was virtually impossible to animate a gradient that changes colors over time because to do so would require (1) a color function that allows us to change a color value’s hue (which we have with hsl()) and (2) being able to interpolate that hue value around the color spectrum, between a range of 0deg and 360deg.

Sounds simple enough, right? Define a variable that starts at 0 and then cycles through 360 degrees at the end of an animation. But this doesn’t work:

/* 👎 */ .element --hue: 0; animation: rainbow 10s linear infinite; background: linear-gradient(hsl(--hue 50% 50%); @keyframes rainbow from --huw: 0; to --hue: 360deg;

That’s because CSS reads the variable as a string instead of a number. We have to register that variable as a custom property so that CSS aptly reads it as a numeric value.

@property --hue syntax: "<number>"; initial-value: 0; inherits: true;

There we go! Now that we’ve given CSS a hint that the --hue syntax is that of a <number>, we can animate away!

/* 👍 */ @property --hue syntax: "<number>"; initial-value: 0; inherits: true; .element --hue: 0; animation: rainbow 10s linear infinite; background: linear-gradient(hsl(--hue 50% 50%); @keyframes rainbow from --huw: 0; to --hue: 360deg;

Find a deeper explanation of this same example in “Interpolating Numeric CSS Variables” by Geoff Graham.

When to use one unit over another

This is super tricky because CSS is extremely flexible and there are no definitive or hard-and-fast rules for when to use a specific type of CSS length unit over another. In some cases, you absolutely have to use a specific unit because that’s how a certain CSS feature is specced, like using angle units to set the direction of a linear gradient:

.element background: linear-gradient( 135deg, red, blue; )

The same goes for the values we use in certain color functions, like using percentages to set the saturation and lightness levels in the hsl() function:

.element background: hsl(0 100% 10%);

Speaking of color functions, we define alpha transparency with either an integer or number:

.element background: hsl(0 100% 10% / 0.5); /* or simply .5 */

All that being said, many cases are going to be some degree of “it depends” but there are some instances where it makes sense to use a specific unit in your work.

Generally set font sizes in rem and em units

This way, you can set things up in a way where changing the font-size value of the <html> or a parent element updates the font sizes of their descendants.

html font-size: 18px; /* Inherited by all other elements */ .parent font-size: 1rem; /* Updates when the `html` size changes */ .child font-size: 1em; /* Updates when the parent size changes */

Declare “zero” without units if you’d like

It’s not a big deal or anything, but leaving off the units shortens the code a smidge, and anytime we’re able to write shorter code it’s an opportunity for faster page performance. The impact may be negligible, but we’re able to do it since 0 always computes to 0, no matter what unit we’re working with.

Use container units for responsive design, where possible

Container queries in general are so gosh-darn great for responsive layouts because they look at the size of the container and let us apply styles to its descendants when the container is a certain size.

.parent container: my-container / inline-size; /* Looks at width */ .child display: flex; flex-direction: column; max-width: 100vh; /* 100% of the viewport */ /* When the container is greater than 600px wide */ @container my-container (width >= 600px) .child flex-direction: row; max-width: 50%; /* 50% of the parent elenent */

So, if we going to size the .child element — or any of its children — it’s worth specifying sizes in relation to the container’s size with container units than, say, the viewport’s size with viewport units.

.parent container: my-container / inline-size; /* Looks at width */ .child display: flex; flex-direction: column; max-width: 100cqi; /* 100% of the container */ /* When the container is greater than 600px wide */ @container my-container (width >= 600px) .child flex-direction: row; max-width: 50cqi; /* 50% of the container */

Use percentages when you’re unsure of the context

Yes, use container units for responsive design, but that only does you good if you know you are in the context of a container. It’s possible, though, that you use the same component in different places, and one of those places might not be a registered container.

In that case, go with a percentage value because percentages are relative to whatever parent element you’re in, regardless of whether or not it’s a container. This way, you can declare an element’s size as 100% to take up the full space of whatever parent element contains it.

The only word of caution is to note that we’re only basing the size on the parent. Meanwhile, container units can style any descendant in the container, no matter where it is located.

Viewport units are great for laying out containers

You may be thinking that viewport units are a bad thing since we’ve been advising against them in so many cases, like font sizing, but they are still incredibly useful, particularly when it comes to establishing a full-page layout.

I say “full-page” layout because container queries are the gold standard for sizing elements according to the space they have in their container. But if we’re working with a full page of containers, this is where viewport units can be used to establish a responsive layout at a higher level.

If the elements of individual containers look at their container for sizing information, then the sizing and placement of individual containers themselves probably ought to look at the viewport since it directly influences the amount of space on the page.

Examples

Element (em) and Relative element (rem) units

Let’s talk specifically about these two little buggers. We saw how a percentage unit calculates its size by the size of something else. em and rem units are sort of the same, but they are calculated based on the relative font size of specific elements.

Let’s start with em units and say we have an HTML element, a <div> with a .box class, and we set its font size to 20px. That means any text inside of that element is 20px.

Great, now what if we decide we need additional text in the box, and give it a relative font size of 1.5em?

See how a font size of 1.5em is larger than the 20px text? That’s because the larger text is based on the box’s font size. Behind the scenes, this is what the browser is calculating:

20px * 1.5 = 30px

So, the relative font size is multiplied by the pixel font size, which winds up being 30px.

And guess what? rem units do the exact same thing. But instead of multiplying itself by the pixel font size of the parent container, it looks at the pixel font size of the actual <html> element. By default, that is 16px.

/* This is the browser's default font size */ html font-size: 16px; .box font-size: 1.5rem; /* 16px * 1.5 = 24px */

And if we change the HTML element’s font size to something else?

html font-size: 18px; .box font-size: 1.5rem; /* 18px * 1.5 = 27px */

Character unit (ch)

The character unit (ch) is another is another unit relative to font size and, while it isn’t used all that often, it is amazingly great at sizing things based on the amount of content displayed in an element, because one character unit equals the width of one character of content. Here’s how I wrap my own head around it. If we have this in our HTML:

<p>The big brown dog lazily jumped over the fence.</p>

…and this CSS:

p width: 10ch;

What we get is a paragraph that is 10 characters wide. That means the text will break after the tenth character, including spaces.

But note that the words themselves do not break. If the content is supposed to break after 10 characters, the browser will start the next line after a complete word instead of breaking the word into multiple lines, keeping everything easy to read.

If you’re wondering when you might reach for the ch unit, it’s absolutely boss at establishing line lengths that are more pleasant and legible, especially for long form content like this guide you’re reading.

Line height unit (lh)

The line-height unit (lh) looks at the line-height property value of the element’s containing (i.e., parent) element and uses that value to size things up.

.parent line-height: 1.5; .child height: 3lh; /* 3 * 1.5 = 4.5 */

When would you use this? Personally, I find lh useful for setting an exact height on something based on the number of lines needed for the text. You can see this clearly demonstrated in Temani Afif’s “CSS Ribbon” effect that uses lh to establish dimensions for each row of text that makes for consistently-sized lines that adapt to whatever the parent element’s font-size value happens to be,

Related Articles

Absolute vs. Relative Units Container Units Viewport Units

Article

on

Dec 21, 2017

“The Notch” and CSS

Article

on

Mar 25, 2020

CSS Viewport Units

Article

on

May 18, 2020

CSS fix for 100vh in mobile WebKit

Article

on

May 23, 2022

Fun with Viewport Units

Article

on

Aug 9, 2021

The Large, Small, and Dynamic Viewports

Article

on

Jun 5, 2015

Viewport vs Percentage Units

Article

on

Nov 15, 2022

Viewport Sized Typography

Article

on

Nov 6, 2019

Some Things You Oughta Know When Working with Viewport Units

Article

on

Jun 24, 2015

Viewport sized typography with minimum and maximum sizes

Article

on

Jan 5, 2018

`font-size` With All Viewport Units

Article

on

Jun 28, 2021

Working around the viewport-based fluid typography bug in Safari

Typography

Article

on

Apr 23, 2020

Accessible Font Sizing, Explained

Article

on

May 19, 2020

Simplified Fluid Typography

Article

on

Apr 13, 2017

There’s more to the CSS rem unit than font sizing

Article

on

Dec 17, 2015

Font Size Idea: px at the Root, rem for Components, em for Text Elements

Article

on

May 5, 2020

`lh` and `rlh` units

Article

on

Nov 15, 2022

Viewport Sized Typography

Article

on

Jan 5, 2018

`font-size` With All Viewport Units

Article

on

Jun 24, 2015

Viewport sized typography with minimum and maximum sizes

Angle Units Time Units

Article

on

Jan 7, 2017

CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More

Article

on

Jan 9, 2018

Making CSS Animations Feel More Natural

Article

on

Dec 9, 2010

CSS Transition Timing

Article

on

Aug 14, 2019

Staggered CSS Transitions

Article

on

Sep 6, 2022

Hacking CSS Animation State and Playback Time

Article

on

Aug 3, 2015

Debugging CSS Keyframe Animations

Article

on

Sep 19, 2022

Making a Real-Time Clock With a Conic Gradient Face

Resolution Units

[nevver]

Arts & Architecture, Sander Patelski

[theroyalweekly]

The video released by @KensingtonRoyal is like nothing we have seen from them before. It includes William and Kate hugging on the beach, the 3 children talking down the lens of the camera, and the family playing games with Grandma and Grandad Middleton. --

[389]

PORTO ROCHA

[agustdakasuga]

The Way Of A Criminal: Chapter 4

Genre: Mafia!AU, Criminal!AU, Angst, Romance

Pairing: OT7 x Reader

Characters: Normal!Reader, Gangster!Namjoon, Gangster!Seokjin, Gangster!Yoongi, Gangster!Hoseok, Gangster!Jimin, Gangster!Taehyung, Gangster!Jungkook

Summary: Your father was a stranger, you never knew who he was and what he did. But one day, someone knocks on your door, informing you of his passing. Now, you learn more about him, his life and the legacy you are expected to continue with the help of his 7 executives.

Story warning(s): This story will contain depictions of violence, blood shed/gore, death, mentions of abuse, smoking, alcohol drinking and gambling. This story is fictional and has nothing to do with real life events or the actual members of BTS. Please read at your own discretion.

Instead of dealing with all this head on, you avoided it. You put everything aside and went on with life, spending all your time doing work, studying and doing your university projects.

Wonwoo noticed this and decided to invite you for a night out. Just a chill night with some drinks. Usually, you would decline, which is why Wonwoo has never invited you out. But you could use the distraction. Maybe being out of the house was good.

DING DONG

“Coming!” You ran down, fixing your earring. You didn’t really know how to dress for a night out like this so you picked a random dress. It was a dark blue, crushed velvet cocktail dress.

“Come on in.” You opened the door for him. Wonwoo smiled, bowing before removing his shoes to come in.

“This dress isn’t really motorcycle friendly, is it?” You let out an awkward laugh, going into the kitchen to get your phone that you left there to charge.

“I didn’t ride my bike since we might drink. I’ll call a cab.” Wonwoo said. He just stood in the doorway, unsure of what to do since it was the first time he was in your house.

“(y/n)?” Wonwoo suddenly called your name, stopping you in your tracks.

“You look great.” He smiled softly.

“Oh... Thank you.” You felt your cheeks heat up at his sudden compliment. He held out a hand to support you as you wore your shoes. After locking up the house, he escorted you to the cab that was waiting for you. And of course, Wonwoo opened the door for you to get in first, being the gentleman that he is. The car ride was silent.

“C-Can I ask you something?” Wonwoo threaded lightly. You hummed, nodding your head.

“I know you like your privacy and I shouldn’t pry but there were this rumours and pictures floating around about some expensive sports car and handsome guy picking you up. Is he one of them?” He asked nervously.

“If by ‘one of them’, you mean my father’s... employees. Yes, he is... or was. There are 7 of them.” You rubbed the back of your neck.

“Are they bothering you?”

“Can we not talk about this anymore? I just don’t want to have to think about it for a few minutes.” That came out a lot harsher and colder than you expected. But Wonwoo didn’t react.

“Sorry. I’m...” You sighed, not really knowing how to piece your words together anymore.

“I understand. Don’t worry about it. I didn’t mean to pry.” Wonwoo smiled comfortingly. Thankfully for you, the cab stopped outside the club. You looked at the long line outside that didn’t seem to be moving,

“Don’t look so worried. My friend put our name on the list so we can just walk in.” Wonwoo laughed. You both got out and he grasped your hand, giving your names to the bouncer. You were so stunned by his action that you just followed him without a word, letting him lead you.

“There’s a table there.” Wonwoo said in your ear on top of the loud music. You were still shocked that he was holding your hand that you just followed him.

“Phew, it’s crowded.” You said, casually pulling your hand away to check if you dropped anything from your bag.

“Yeah, that’s what you get for being here on a Friday night.” He chuckled. You stood at the table while Wonwoo went to get drinks at the bar. The standing table was thankfully at the side of the bar, which meant less people.

“Relax, you’re here to have fun.” You told yourself.

“Here.” Wonwoo got himself a beer and got you a cocktail. It was a nice refreshing drink with flavoured soju as the alcohol.

“Let me know how much everything is tonight and we’ll split the cost.” You told him as you took a sip.

“It’s okay, (y/n). It’s my treat, just enjoy yourself.” Wonwoo smiled. He clinked his glass with yours. Although this wasn’t your exact idea of relaxing, you were glad that the noise and the crowd made the place too loud that you didn’t need to start sharing your feelings. Wonwoo was a good friend but you just weren’t used to sharing so much about yourself with others.

After some drinks, you excused yourself to go to the toilet. But of course, there was a line. About 15 minutes went by without the line moving. You were about to give up when someone grabbed your wrist.

“(y/n) sshi?” You looked at the familiar face.

“Oh... Uh...”

“Yoongi.” He said, letting you go. You nodded your head. Other people in the line now had their attention on you and Yoongi.

“Come.” He nodded over to follow him. You didn’t know why you just went along, not even asking why he wanted you to go with him. You came before a staircase with two guards. But they parted ways upon seeing Yoongi.

“Sir.” They bowed respectfully as Yoongi cooly walked up, hands tucked into his pockets. You quickly bowed your heads back to the guards and caught up to Yoongi.

“You can use this bathroom instead. It’s cleaner and safer.” Yoongi stopped before a door.

“A-Are you sure?”

“If I wasn’t sure, I wouldn’t have went down to fish you out of the crowd. Take all the time you need. This is our own private bathroom so no one else is allowed to use it.” He explained. You nodded, bowing gratefully to him before entering the restroom.

The bathroom was a lot more opulent and grand, with black granite and gold trims. Like Yoongi said, it was very clean, unlike a usual club bathroom. It was definitely a boys bathroom with urinals but you just used one of the stalls.

“Hyung, why can’t I use the bathroom? I really need to go!” You heard voices outside as you were washing your hands.

“Only the 7 of us use it anyway. Unless... Do you have a secret guest in there?!” The person talking to Yoongi gasped as if he just uncovered something scandalous.

“Watch your mouth.” You heard Yoongi threaten.

“Sorry, I’m done.” You opened the door. But you didn’t expect Yoongi to be standing so close that you ended up bumping into his back.

“Oh, no wonder hyung was guarding the bathroom.” The male said. He didn’t mind you and just brushed past to use the bathroom. Yoongi moved you away from the bathroom door, not wanting you to accidentally get hit.

“Thank you. Is it okay if I just stay here for a few more minutes? You can go back to what you were doing before.” You asked timidly. Yoongi took one look at you and nodded. You didn’t need to tell him anything for him to know what you were thinking. The club was getting overwhelming. Yoongi never really liked coming too unless his brothers make him.

“Why did you come if you don’t like it?”

“A friend brought me here as a distraction. Plus, I’ve never really come to a club before.” You replied. Yoongi nodded his head.

“You don’t need to stay and accompany me. I’ll go back down in a bit.” You said.

“It’s okay.” He leaned against the opposite wall. You took your phone out to send Wonwoo a text, assuring him that you were safe and that he could go home first. But you didn’t tell him where you were and who you were with.

“Actually... I wanted to apologise. My brothers told me I shouldn’t have offered you a smoke the other time. I just thought it would help.” Yoongi looked at you.

“It’s fine. I honestly didn’t think too much about it. There were other things to think about.” You shook your head.

“Understandable. I’m sure you have your fair share of confusion and questions that come along with it. This is just the start.” Yoongi said. You didn’t let his straightforward tone faze you, nodding your head glumly.

“Well, I should go. Thanks for letting me hang here.” You straightened up.

“No worries. I’ll walk you down.” Yoongi followed suit. You walked behind him, not sure of the way to the exit. With your insistence, Wonwoo had gone home on his own. You did feel bad for abandoning him when he was the one that invited you out but you also didn’t want him to wait.

“Do you have a ride home?” Yoongi asked.

“I told my friend to go home first so I guess I can get a cab home.” You waved him off, getting your phone out. But Yoongi stopped you, his hand grasping your phone and covering the screen.

“It’s not safe and cheap to get a cab from here at this time. I drank a little so I shouldn’t drive. Hang on.” Yoongi waved over one of the bouncers.

“Use the company car and send her home then report back.” Yoongi ordered.

“Yoongi sshi, it’s really okay.”

“Get the address from her and make sure you see her entering the house before coming back.” Yoongi ignored you. The bouncer nodded and bowed, running off the get the car.

“(y/n) sshi, hyung.” You both turned to see Taehyung jogging over. He had a big, square-ish grin as he waved.

“Jimin said you were here and that Yoongi hyung was with you. Are you driving her home, hyung?” Taehyung tilted his head.

“I drank. So was gonna get one of the workers to drive her back.” Yoongi explained, standing back as he lit a cigarette to smoke. Taehyung nodded his head.

“I’ll drive you home. I didn’t drink since I am the designated driver tonight. Bring my car instead.” Taehyung called out. The worker bowed and ran back into the club. Yoongi decided to go in first after his cigarette was done, not liking being out in the cold. He shot you a nod while you bowed gratefully to him. While waiting, Taehyung put his jacket over your shoulders.

“Did you come alone?” Taehyung asked.

“No... I came with a friend but I abandoned him. Yoongi sshi was kind enough to let me hang out in the quiet area. So I told my friend to go home first.” You said. You didn’t know why you were explaining so much to him.

“This isn’t you scene, is it?” He teased. You pursed your lips and shook your head. The noise and the crowd just wasn’t comfortable.

“Sir.” The car stopped right in front of you. The worker came out, bowing and passing Taehyung’s keys to him.

“Here you go. Watch your head.” Taehyung opened the car door for you to enter. You sat inside, keeping the sides of his jacket close to you so it wouldn’t get caught in the door.

Taehyung confirmed your address before starting to drive. One hand held his head, elbow resting on the door next to him while the other hand was on the steering wheel. During the quiet ride, you fiddled with the hem of the dress, pulling it down every now and then.

“Are you cold?” He asked.

“No, I’m good. Thank you.” You replied softly. With your head leaning against the headrest, you looked out the window. The only reason you would be out this late usually was because you were working.

“Thanks for dropping me off again.” You said as Taehyung pulled up outside of your house.

“Any time.” Taehyung smiled. You unbluckled your seatbelt and got out of the car. But before you could walk further, Taehyung rolled down the window.

“Goodnight, (y/n)!”

“G-Goodnight, Taehyung sshi.” A small smile formed on your lips as you bowed your head and entered the house. Like the other day, Taehyung only drove off after he was sure you had entered the house.

Only after you entered the house and you heard Taehyung drive off, that you realised you had forgotten the return him his jacket. You removed it carefully, as if any movement would cause it to tear like tissue. You inspected it, trying to figure out if you should wash it on your own, and risk ruining the expensive material, or just send it for dry cleaning.

“Hi, Wonwoo. Did you make it home safe?”

“Oh, (y/n). Yes, I am home. I went home after you sent me that text. Are you alright? You scared me.”

“Yes, I am alright. I just found a quiet space to chill for a while so I didn’t want you to wait for me. I just got home. Sorry for ruining the night. I’ll make it up to you, I promise.” You said, putting your shoes away.

“Don’t say that, (y/n). I’m sorry you didn’t enjoy yourself.”

“I did enjoy myself, Wonwoo. Thank you for bringing me out to feel better.” You laughed. After wishing each other good night, you hung up.

You took a shower and was feeling peckish so you made yourself some ramyeon. There was always ramyeon in the kitchen for when you or your mother needed a late night snack after working.

“I’ll have to drop the jacket off at the dry cleaners tomorrow.” You groaned tiredly, looking at the blazer that rested over the back of the chair.

-

Hoseok was one of the first ones to wake up. After a day of working and a night of drinking, the boys all usually slept in during the weekends. The moment his foot touched the bottom of the stairs, a maid ran over to him, bowing her head in fear.

“What is it?” He raised an eyebrow.

“Your workers are here, sir. They said that it is important for you to see them immediately.” She relayed timidly, afraid of making him angry.

“Send them in. And get my breakfast.” Hoseok shooed her away before shuffling to the dining room. Like any other normal person, he didn’t like having to work on the weekends.

“Good morning, Boss.” The 3 men put the crate that they were carrying down and bowed to Hoseok.

“This better be important for you to be here on a Saturday morning.” Hoseok said, not even looking up at them. He was more focused on the tray of food that the butler had placed down in front of him.

“The shipment is here early. We thought you would want to check it right away.” One of the men informed. Hoseok put his napkin on the table and stood up.

“Show me.” He commanded as he walked over. The men opened the box, revealing the contents inside.

“Very nice...” He picked up one of the items.

“Business on a Saturday morning, Hobah?” Yoongi came in. Hoseok’s workers bowed upon seeing the pale man enter the dining room. But of course, he didn’t even spare them a glance. He sat down in his allocated seat, waiting for the staff to serve him his breakfast. His breakfast was usually an iced coffee then his food 20 minutes later.

“Can’t help it, hyung. You want the best, you’ve got to work when others aren’t.” Hoseok laughed while Yoongi snorted at his comment. He placed the items back into the crate.

“Leave this here. I’ll show the others to see what they think. Good work. We’ll discuss the rest on Monday.” Hoseok said.

“Of course, boss. Have a nice weekend.” The 3 bowed, moving the crate to the side of the room before leaving the mansion. Hoseok took his seat across Yoongi.

“So hyung, I heard you had a little moment with the girl.” Hoseok asked.

“What moment?” Yoongi asked back, no emotion on his face as he sipped the last bit of his coffee.

“Jimin said you loyally guarded the door for her as she used our toilet. Even stayed with her in the hallway after to comfort her.” He explained. Yoongi rolled his eyes, his brothers really needed better things to talk about.

“I saw her the moment she entered, I’m surprised you guys didn’t considering how high our booth is. She needed to use a toilet and the queue was insane so I offered her to use ours. And I wasn’t comforting her, she needed a quiet place and I stayed with her. That’s all.” Yoongi explained.

“Well, that’s a lot more interaction than what the rest have got. Looks like she’ll warm up to you first.” Hoseok said.

“No, she’ll warm up to Taehyung first. He was the one that sent her home.” Yoongi dug into his food on the tray that the butler brought him. Hoseok hummed but couldn’t help the giggle that escaped him.

“What’s Hobi laughing about?” Namjoon came in. He had been awake for a while, opting to sit in his room to read the newspaper rather than come downstairs right away.

“No idea.” Yoongi replied, putting a chopstick of rice into his mouth.

“Ah, seriously, Hobi. I thought we established that we are not going to bring work into the dining room?” Namjoon tsked at the crate in the room.

“It’s fine, Namjoon ah. I’ll move it after breakfast. The boys needed me to inspect the goods, that’s all. Even risked bothering me on a Saturday to do it.” Hoseok waved the leader off. Namjoon shook his head with a sigh.

“Bring my breakfast.” He ordered as he took his seat at the head of the table. The butler bowed and left.

“I’m done. Going back to sleep.” Yoongi stood up and shuffled out of the room. The weekend was for Yoongi to catch up on sleep, it was normal to not see him for the entirety of the two days because he was just sleeping or resting in bed. Jin and Taehyung were the last ones that had breakfast. Jungkook and Jimin would sleep in until dinner time.

“Here. Take what is yours and leave the rest. I told you I would get things done.” Jin dropped the stack of files on the table. Namjoon, Hoseok and Taehyung shrugged, going through the pile to retrieve their things.

“So, hyung, did you find out anymore information about (y/n) when you did your stalking?” Taehyung asked.

“Yah, Taehyung! That was supposed to be confidential.” Jin hissed at the younger exposing him to the rest. However, the younger just shrugged.

“You’re running a check on her?” Namjoon raised an eyebrow.

“I’m not running a check on her... Well, at least not the background checks I usually do. I just wanted to find out about her to maybe try to connect with her in some way. She is a closed book.” Jin explained.

“So what if she is a closed book, I’m sure you can still find whatever you need on her.” Hosoek laughed.

“That’s the thing... She does not have much of a record except for her birth certificate and basic school details. Everything else either doesn’t exist or has been wiped.” Jin informed.

“Wait, you’re telling me there is actually information that you can’t find?”

“How do you know information has been wiped? She could have just not had that much of an eventful life so far. I doubt she can wipe her own records and she doesn’t seem to have a reason to do that.” Namjoon said. He didn’t know you but you didn’t seem like a skillful hacker that could wipe records.

“I know information has been wiped because I am the one who wiped them...” Jin admitted with his head slightly hung.

“What?”

“Boss wanted me to wipe them. He was paranoid, especially when it came to her. So my task was to regularly wipe her records that were 'not relevant’. Hospital visits, stuff like that...” Jin gulped.

~~

Series Masterlist

Ko-Fi

Main masterlist

[magicshop]

You, who gave me their hand when I fell, now I'll hold it for you.