Using CSS Flex to style text that has been transformed

Question

Using CSS Flex to style text that has been transformed

I'm attempting to achieve a specific date display effect, but I'm running into some difficulties. Despite using flex and text transform, I can't seem to get rid of the extra width on the right side of the year.

Here's my current outcome:

Below is the code I am working with:

.event {
  display: flex;
  gap: 20px;
  margin-bottom: 5px;
}

.date {
  border-radius: 5px;
  letter-spacing: 1.2px;
  background-color: #f6f5f0;
  color: #d8d6c8;
  padding: 5px;
}

.date .dayAndMonth {
  display: inline-block;
}

.date .month {
  text-align: center;
  font-size: 13px;
}

.date .day {
  text-align: center
}

.date .year {
  display: inline-block;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  position: relative;
  top: 18px;
}

.event_details {}

<article class="event">
  <div class="date">
    <div class="dayAndMonth">
      <div class="month">Feb</div>
      <div class="day">04</div>
    </div>
    <div class="year">2022</div>
  </div>
  <div class="event_details">
    <div class="title">Event Title</div>
  </div>
</article>

css

Answer 1

Answer №1

If you want to achieve a vertical writing mode, consider using writing-mode: vertical-lr; for more detailed information

.event {
  display: flex;
  gap: 20px;
  margin-bottom: 5px;
}

.date {
  border-radius: 5px;
  letter-spacing: 1.2px;
  background-color: #f6f5f0;
  color: #d8d6c8;
  padding: 5px;
  /*Added css*/
  display: flex;
  align-items: center;
}

.date .dayAndMonth {
  display: inline-block;
}

.date .month {
  text-align: center;
  font-size: 13px;
}

.date .day {
  text-align: center;
}

.date .year {
  display: inline-block;
  writing-mode: vertical-lr; // use this css
  position: relative;
}

.event_details {}

<article class="event">
  <div class="date">
    <div class="dayAndMonth">
      <div class="month">Feb</div>
      <div class="day">04</div>
    </div>
    <div class="year">2022</div>
  </div>
  <div class="event_details">
    <div class="title">Event Title</div>
  </div>
</article>

Answer 2

If you want to achieve a vertical writing mode, consider using writing-mode: vertical-lr; for more detailed information

.event {
  display: flex;
  gap: 20px;
  margin-bottom: 5px;
}

.date {
  border-radius: 5px;
  letter-spacing: 1.2px;
  background-color: #f6f5f0;
  color: #d8d6c8;
  padding: 5px;
  /*Added css*/
  display: flex;
  align-items: center;
}

.date .dayAndMonth {
  display: inline-block;
}

.date .month {
  text-align: center;
  font-size: 13px;
}

.date .day {
  text-align: center;
}

.date .year {
  display: inline-block;
  writing-mode: vertical-lr; // use this css
  position: relative;
}

.event_details {}

<article class="event">
  <div class="date">
    <div class="dayAndMonth">
      <div class="month">Feb</div>
      <div class="day">04</div>
    </div>
    <div class="year">2022</div>
  </div>
  <div class="event_details">
    <div class="title">Event Title</div>
  </div>
</article>

Answer 3

Answer №2

One of the reasons for this behavior is the use of position relative, which anchors the .year inside the .date container. This causes the .year to still occupy space within the container, making adjustments to accommodate it based on its relative position. There are two possible solutions that come to mind. The first option is to set fixed dimensions for the .date container - specifying the height and width, and then readjusting the positioning using right and top properties for the .year. Alternatively, you can simply apply position: absolute; to the .year element, while setting the parent container's width to 50 and tweaking the top property for repositioning.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.event {
  display: flex;
  gap: 20px;
  margin-bottom: 5px;
  padding: 1rem;
}

.date {
  border-radius: 5px;
  letter-spacing: 1.2px;
  background-color: #f6f5f0;
  color: #d8d6c8;
  padding: 5px;
  width: 50px;
}

.date .dayAndMonth {
  display: inline-block;
}

.date .month {
  text-align: center;
  font-size: 13px;
}

.date .day {
  text-align: center
}

.date .year {
  display: inline-block;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  position: absolute;
  top: 55px;
}

.event_details {}

<article class="event">
  <div class="date">
    <div class="dayAndMonth">
      <div class="month">Feb</div>
      <div class="day">04</div>
    </div>
    <div class="year">2022</div>
  </div>
  <div class="event_details">
    <div class="title">Event Title</div>
  </div>
</article>

For more information on CSS positions, refer to this link.

Answer 4

One of the reasons for this behavior is the use of position relative, which anchors the .year inside the .date container. This causes the .year to still occupy space within the container, making adjustments to accommodate it based on its relative position. There are two possible solutions that come to mind. The first option is to set fixed dimensions for the .date container - specifying the height and width, and then readjusting the positioning using right and top properties for the .year. Alternatively, you can simply apply position: absolute; to the .year element, while setting the parent container's width to 50 and tweaking the top property for repositioning.

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.event {
  display: flex;
  gap: 20px;
  margin-bottom: 5px;
  padding: 1rem;
}

.date {
  border-radius: 5px;
  letter-spacing: 1.2px;
  background-color: #f6f5f0;
  color: #d8d6c8;
  padding: 5px;
  width: 50px;
}

.date .dayAndMonth {
  display: inline-block;
}

.date .month {
  text-align: center;
  font-size: 13px;
}

.date .day {
  text-align: center
}

.date .year {
  display: inline-block;
  transform-origin: 0 0;
  transform: rotate(-90deg);
  position: absolute;
  top: 55px;
}

.event_details {}

<article class="event">
  <div class="date">
    <div class="dayAndMonth">
      <div class="month">Feb</div>
      <div class="day">04</div>
    </div>
    <div class="year">2022</div>
  </div>
  <div class="event_details">
    <div class="title">Event Title</div>
  </div>
</article>

For more information on CSS positions, refer to this link.

Answer 5

Answer №3

Resolution

To fix the alignment issue, simply assign a value to the width property of the .year class in your CSS stylesheet. Here's an example:

.calendar .year {
  /* ... (other styling rules) */
  width: 30px; /* new width value */
}

Clarification

When the browser renders your HTML and CSS, it calculates the widths of elements. In this case, the width of the .year container (which holds the year) may not be properly accounted for, resulting in extra space on the right side after rotating.

By explicitly setting the width, you can eliminate the unnecessary space and improve the visual alignment of the vertical text.

Important Tip

In order to prevent any overlap or distortion of values, consider also adjusting the font sizes of .month, .day, and .year. This ensures that the text remains legible, especially when users customize font sizes in their browsers.

Answer 6

Resolution

To fix the alignment issue, simply assign a value to the width property of the .year class in your CSS stylesheet. Here's an example:

.calendar .year {
  /* ... (other styling rules) */
  width: 30px; /* new width value */
}

Clarification

When the browser renders your HTML and CSS, it calculates the widths of elements. In this case, the width of the .year container (which holds the year) may not be properly accounted for, resulting in extra space on the right side after rotating.

By explicitly setting the width, you can eliminate the unnecessary space and improve the visual alignment of the vertical text.

Important Tip

In order to prevent any overlap or distortion of values, consider also adjusting the font sizes of .month, .day, and .year. This ensures that the text remains legible, especially when users customize font sizes in their browsers.

Using CSS Flex to style text that has been transformed

Answer №1

Answer №2

Answer №3

Resolution

Clarification

Important Tip

Similar questions

Chrome is failing to run the keyframe animation transform

I have a parent DIV with a child DIV, and I am looking to use jQuery to select the last child DIV. The parent DIV has an

Manipulating the DOM by nesting an icon within a button element in HTML

Perform a check on the state of the slideToggle using an if-else function and provide a report on the slideToggle state

Connect two radio buttons across separate forms

Styling child elements in Angular using css from its parent element

Discovering MaterialUI breakpoints within CSS styling

Centralized and secure masthead

Tips for keeping the header section anchored to the top of the page

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Issue with a responsive CSS circle element that holds an image

Creating a carousel of cards using JavaScript, CSS, and HTML

Efficient Techniques for Deleting Rows in a Dynamic JavaScript Table

"Utilizing a custom CSS style for a half heart rating system

Printing a specific column of a particular row in an HTML table to the printer: Tips and tricks

Animate images using mouse vertical movement

WordPress CSS & JS files failing to enqueue properly

A step-by-step guide on initializing and setting a cookie value with expiration

Resize images in PHP and MySQL with precision without distorting the image

What is a more effective way to showcase tab content than using an iframe?