CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Giovanni Venturelli
Giovanni Venturelli

Reputation: 67

Evenly distribute rotated text

I want to create a horizontal menu with rotated text (let's say -50deg). My code looks as follow:

 .menuItem {
   text-align: right;
   margin-top: 3vh;
   list-style-type: none;
   display:inline-block;
  }

  .menuButton{
      text-align: right;
      background:none;
      padding: 0;
      border:none;
      -webkit-transform: rotate(310deg);
      -moz-transform: rotate(310deg);
      -ms-transform: rotate(310deg);
      -o-transform: rotate(310deg);
      transform: rotate(310deg);
      -webkit-transform-origin:100%;
      -moz-transform-origin:100%;
      -ms-transform-origin:100%;
      -o-transform-origin:100%;
      transform-origin:100% ;
  }
      <ul class="menu">
        <li class="menuItem">
          <button class="menuButton" id="newsButton">Button</button>
        </li>
        <li class="menuItem">
          <button class="menuButton" id="aboutButton">LoooooooongButton</button>
        </li>
        <li class="menuItem">
          <button class="menuButton" id="contactsButton">ShortButton</button>
        </li>
        <li class="menuItem">
          <button class="menuButton" id="otherStuffButton">LoooooooooooooongestButton</button>
        </li>

      </ul>

I've already managed to rotate each button, to right-align the text, and to put them horizontal, the only problem I face is that I can't manage to evenly distribute the text, since the buttons with longer text will be farer from their left sibling than those with a short text. What's the best solution for this problem? Thank you all.

UPDATE

I've just written a simple script through javascript which gets the container width and distributes evenly the buttons:

var menuWidth = $('.menu').width();
var elements = document.querySelectorAll(".menuItem");
for (var element of elements){
    let ind = $(element).index();
    $(element).css("left", $(element).height()-$(element).width()+(menuWidth/(elements.length))*ind);
}

Obviously the trick here is to assign position: absolute to all menu items and position: relative to menu. Thank you all, guys ;)

Upvotes: 1

Views: 94

Answers (1)

Paulie_D
Paulie_D

Reputation: 115283

This is pretty tricky because a transform is a purely visual effect and does not affect the actual position of elements.

Generally, one solution is to size the element as required and position the content absolutely.

Kind of like this:

.menu {
  display: flex;
  margin: 4em;
}
.menuItem {
  text-align: right;
  list-style-type: none;
  transform-origin: right center;
  transform: rotate(310deg);
  flex: 0 0 1.2em;
  height: 1.4em;
  position: relative;
  background: pink;
}
.menuButton {
  background: none;
  padding: 0;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
}
<ul class="menu">
  <li class="menuItem">
    <button class="menuButton" id="newsButton">Button</button>
  </li>
  <li class="menuItem">
    <button class="menuButton" id="aboutButton">LoooooooongButton</button>
  </li>
  <li class="menuItem">
    <button class="menuButton" id="contactsButton">ShortButton</button>
  </li>
  <li class="menuItem">
    <button class="menuButton" id="otherStuffButton">LoooooooooooooongestButton</button>
  </li>

</ul>

Now this has downsides as the size of the li has no dynamic size but I leave this here as a general guide.

Upvotes: 1

Related Questions