Obrócone elementy w CSS, które poprawnie wpływają na wzrost rodzica

Powiedzmy, że mam kilka kolumn, z których niektóre chciałbym obracać wartościami:

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Z tym CSS:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

Kończy się tak:

Czy można napisać dowolny CSS, który spowoduje, że obrócony element wpłynie na wysokość swojego rodzica, tak że tekst nie będzie zachodził na inne elementy? Coś takiego:

Zakładając, że chcesz obrócić o 90 stopni, jest to możliwe, nawet w przypadku elementów nietekstowych - ale podobnie jak wiele interesujących rzeczy w CSS wymaga odrobiny sprytu. Moje rozwiązanie również technicznie wywołuje niezdefiniowane zachowanie zgodnie ze specyfikacją CSS 2 - więc chociaż przetestowałem i potwierdziłem, że działa w Chrome, Firefox, Safari i Edge, nie mogę obiecać, że nie zepsuje się w przyszłości wydanie przeglądarki.

Krótka odpowiedź

Biorąc pod uwagę taki kod HTML, w którym chcesz obrócić .element-to-rotate...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... wprowadź dwa elementy opakowujące wokół elementu, który chcesz obrócić:

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... a następnie użyj poniższego CSS, aby obrócić w lewo (lub zobacz komentarz w komentarzu, transformaby dowiedzieć się, jak zmienić go na obrót w prawo):

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

Demo fragmentu stosu

p {
  /* Tweak the visuals of the paragraphs for easier visualiation: */
  background: pink;
  margin: 1px 0;
  border: 1px solid black;
}
.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

<div id="container">
  <p>Some text</p>
  <p>More text</p>
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <p class="element-to-rotate">Some rotated text</p>
    </div>    
  </div>
  <p>Even more text</p>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">
    </div>
  </div>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
</div>

Jak to działa?

Zamieszanie w obliczu zaklęć, których użyłem powyżej, jest uzasadnione; dużo się dzieje, a ogólna strategia nie jest prosta i wymaga znajomości zagadnień CSS, aby ją zrozumieć. Przejdźmy przez to krok po kroku.

Sedno problemu polega na tym, że transformacje zastosowane do elementu za pomocą jego transformwłaściwości CSS następują po utworzeniu układu. Innymi słowy, użycie transformna elemencie w ogóle nie wpływa na rozmiar ani położenie jego rodzica ani żadnych innych elementów. Nie ma absolutnie żadnego sposobu, aby zmienić ten fakt, jak transformdziała. Tak więc, aby stworzyć efekt obracania elementu i uwzględnienia jego wysokości nadrzędnej względem obrotu, musimy wykonać następujące czynności:

1. W jakiś sposób skonstruuj inny element, którego wysokość jest równa szerokości.element-to-rotate
2. Napisz naszą transformację .element-to-rotatetak, aby nałożyć ją dokładnie na element z kroku 1.

Elementem z kroku 1 będzie .rotation-wrapper-outer. Ale jak możemy spowodować jego wysokość była równa .element-to-rotatejest szerokości ?

Kluczowym elementem naszej strategii jest tu padding: 50% 0na .rotation-wrapper-inner. Ten exploit jest ekscentrycznym szczegółem specyfikacjipadding : że procent wypełnienia, nawet dla padding-topi padding-bottom, jest zawsze definiowany jako procent szerokości kontenera elementu . Dzięki temu możemy wykonać następującą dwuetapową sztuczkę:

1. Stawiamy display: tablena .rotation-wrapper-outer. Powoduje to, że ma szerokość zmniejszania, aby dopasować , co oznacza, że ​​jego szerokość zostanie ustawiona na podstawie wewnętrznej szerokości jego zawartości - to znaczy na podstawie wewnętrznej szerokości .element-to-rotate. (Na wsparcie przeglądarek, możemy osiągnąć więcej z czysto width: max-content, ale w grudniu 2017 roku, max-contentjest nadal nie jest obsługiwana w Krawędzi ).
2. Ustawiamy heightof .rotation-wrapper-innerna 0, a następnie ustawiamy jego dopełnienie na 50% 0(czyli 50% na górze i 50% na dole). To powoduje, że zajmuje on w pionie przestrzeń równą 100% szerokości swojego rodzica - która, poprzez sztuczkę z kroku 1, jest równa szerokości .element-to-rotate.

Następnie pozostaje tylko wykonać faktyczny obrót i pozycjonowanie elementu potomnego. Oczywiście, transform: rotate(-90deg)czy rotacja; używamy transform-origin: top left;do wywoływania obrotu wokół lewego górnego rogu obracanego elementu, co sprawia, że ​​późniejsze tłumaczenie jest łatwiejsze do rozważenia, ponieważ pozostawia on obrócony element bezpośrednio nad miejscem, w którym zostałby narysowany. Następnie możemy translate(-100%)przeciągnąć element w dół o odległość równą szerokości przed obróceniem.

To wciąż nie do końca zapewnia prawidłowe pozycjonowanie, ponieważ nadal musimy przesunąć 50% górnego dopełnienia .rotation-wrapper-outer. Osiągamy to, upewniając się, że .element-to-rotatema display: block(aby marginesy działały poprawnie), a następnie stosując -50% margin-top- zwróć uwagę, że marginesy procentowe są również definiowane w stosunku do szerokości elementu nadrzędnego.

I to wszystko!

Dlaczego nie jest to w pełni zgodne ze specyfikacjami?

Ze względu na następującą uwagę z definicji procentowych wypełnień i marginesów w specyfikacji (moje pogrubienie):

Procent jest obliczany w odniesieniu do szerokości bloku zawierającego wygenerowane pole , nawet dla „padding-top” i „padding-bottom” . Jeśli szerokość zawierającego bloku zależy od tego elementu, to wynikowy układ jest niezdefiniowany w CSS 2.1.

Ponieważ cała sztuczka polegała na tym, aby wypełnienie wewnętrznego elementu opakowania było zależne od szerokości jego pojemnika, co z kolei zależało od szerokości jego elementu potomnego, trafiamy w ten warunek i wywołujemy niezdefiniowane zachowanie. Obecnie działa jednak we wszystkich 4 głównych przeglądarkach - w przeciwieństwie do niektórych pozornie zgodnych ze specyfikacją poprawek, które próbowałem, takich jak zmiana .rotation-wrapper-innerna rodzeństwo .element-to-rotatezamiast rodzica.

Jak słusznie zwraca uwagę G-Cyr , obecne poparcie writing-modejest więcej niż przyzwoite . W połączeniu z prostym obróceniem uzyskasz dokładnie taki wynik, jaki chcesz. Zobacz poniższy przykład.

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Niestety (?) Tak to ma działać, mimo że obrócisz element, który nadal ma określoną szerokość i wysokość, która nie zmienia się po obróceniu. Zmieniasz to wizualnie, ale nie ma niewidocznego pudełka do pakowania, które zmienia swój rozmiar, gdy obracasz rzeczy.

Wyobraź sobie, że obracasz go o mniej niż 90 ° (np. transform: rotate(45deg)): Musiałbyś wprowadzić takie niewidoczne pudełko, które ma teraz niejednoznaczne wymiary w oparciu o oryginalne wymiary obracanego obiektu i rzeczywistą wartość obrotu.

Nagle, nie masz tylko widthi heightobiektu zostały obrócone, ale mieć również widthi heightz „niewidzialnym polu” wokół niego. Wyobraź sobie, że żądasz zewnętrznej szerokości tego obiektu - co by to zwróciło? Szerokość obiektu czy nasze nowe pudełko? Jak rozróżnilibyśmy oba?

Dlatego nie istnieje CSS, który można by napisać, aby naprawić to zachowanie (a raczej „zautomatyzować” to). Oczywiście możesz ręcznie zwiększyć rozmiar swojego kontenera nadrzędnego lub napisać JavaScript, aby to obsłużyć.

(Dla jasności możesz spróbować użyć, element.getBoundingClientRectaby uzyskać wspomniany wcześniej prostokąt).

Jak opisano w specyfikacji :

W przestrzeni nazw HTML właściwość transform nie wpływa na przepływ treści otaczającej transformowany element.

Oznacza to, że nie zostaną wprowadzone żadne zmiany w zawartości otaczającej obiekt, który przekształcasz, chyba że zrobisz to ręcznie.

Jedyną rzeczą, która jest brana pod uwagę podczas przekształcania obiektu, jest obszar przepełnienia:

(...) rozległość obszaru przelewowego uwzględnia elementy przekształcone. To zachowanie jest podobne do tego, co dzieje się, gdy elementy są odsunięte poprzez pozycjonowanie względne .

Zobacz to jsfiddle, aby dowiedzieć się więcej.

Właściwie całkiem dobrze jest porównać tę sytuację z przesunięciem obiektu za pomocą: position: relative- otaczająca zawartość nie zmienia się, nawet jeśli poruszasz obiektem ( przykład ).

Jeśli chcesz sobie z tym poradzić za pomocą JavaScript, spójrz na to pytanie.

Użyj wartości procentowych dla paddingi pseudoelementu, aby przekazać zawartość. W JSFiddle zostawiłem pseudoelement czerwony, aby go pokazać i będziesz musiał skompensować przesunięcie tekstu, ale myślę, że to jest droga.

.statusColumn {
    position: relative;
    border: 1px solid #ccc;
    padding: 2px;
    margin: 2px;
    width: 200px;
}

.statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.statusColumn b:before{ content:''; padding:50% 0; display:block;  background:red; position:relative; top:20px
}

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

http://jsfiddle.net/MTyFP/7/

Opis tego rozwiązania można znaleźć tutaj: http://kizu.ru/en/fun/rotated-text/

Proszę zobaczyć zaktualizowaną wersję w mojej drugiej odpowiedzi . Ta odpowiedź jest już nieaktualna i po prostu nie działa. Zostawię to tutaj z powodów historycznych.

To pytanie jest dość stary, ale z bieżącego wsparcia dla .getBoundingClientRect()obiektu i jego widthand heightwartości, w połączeniu z możliwością wykorzystania tej metody wraz z schludny transform, myślę, że moje rozwiązanie należy wspomnieć również.

Zobacz to w akcji tutaj . (Testowane w Chrome 42, FF 33 i 37.)

getBoundingClientRectoblicza rzeczywistą szerokość i wysokość pudełka elementu. Po prostu możemy więc przejść przez wszystkie elementy i ustawić jego minimalną wysokość na rzeczywistą wysokość pudełka ich dzieci.

$(".statusColumn").each(function() {
    var $this = $(this),
        child = $this.children(":first");
    $this.css("minHeight", function() {
        return child[0].getBoundingClientRect().height;
    });
});

(Z pewnymi modyfikacjami możesz przeglądać dzieci i dowiedzieć się, który z nich jest najwyższy, i ustawić wzrost rodzica dla najwyższego dziecka. Postanowiłem jednak uczynić przykład prostszym. Możesz również dodać wypełnienie rodzica do wysokość, jeśli chcesz, lub możesz użyć odpowiedniej box-sizingwartości w CSS).

Zwróć jednak uwagę, że dodałem translatei transform-origindo twojego CSS, aby pozycjonowanie było bardziej elastyczne i dokładne.

transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;

Wiem, że to stary post, ale znalazłem go, borykając się z dokładnie tym samym problemem. Rozwiązanie, które mi odpowiada, to raczej prymitywna metoda „low-tech” polegająca na umieszczeniu znacznika div, który obracam o 90 stopni,

<br>

Znając przybliżoną szerokość (która staje się wysokością po obróceniu) elementu div, mogę skompensować różnicę, dodając br's wokół tego elementu div, dzięki czemu zawartość powyżej i poniżej zostanie odpowiednio przesunięta.