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:

https://i.sstatic.net/gNxZG.png

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

arranging fashionable divs side by side

Create a footer with a centered column orientation

Guide to positioning an item at the bottom of the screen using Material UI

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

In Internet Explorer, transitions do not always play correctly when using ng-animate and ng-if

designing the border at the bottom of the existing menu selection

What is the best way to target an anchor element that includes a particular word using jquery or css?

What's the reason for the mousewheel functioning in Chrome but not in Firefox?

Ensure that the CSS grid has a minimum span of 3 columns, and if a class object is the only item in a grid row, it

Automatic keyboard suggestions not working for HTML search input using Ajax

Center the R Shiny showNotification on the screen

Create a CSS style that locks the first column of a table in place while allowing the rest of the columns to scroll horizontally on an HTML webpage

How can I use jQuery to add styling to my menu options?

Styling the first visible item in ngRepeat using Angular

Issue encountered while trying to display images next to each other using only HTML and CSS

Is there a way to effectively overwrite CSS styles when utilizing @extend with another class in SCSS?

Remove the outline on a particular input and retain only its border

Design a sophisticated background using CSS

Enhancing the mobile menu with a feature that allows users to easily close the

Using the radius to determine the center point of the circle