Vertically Flowing Text with CSS

HTML/CSS : How to write a text vertically, keeping the characters horizontally

You may use the writing-mode CSS property in conjunction with the text-orientation CSS property.

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

To quote, writing-mode property..

[..]specifies the block flow direction, which is the direction in
which block-level containers are stacked, and the direction in which
inline-level content flows within a block container. Content flows
vertically from top to bottom, horizontally from right to left. The
next vertical line is positioned to the left of the previous line.

In effect, this defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

text-orientation property defines the orientation of the text characters in a line. This property only has an effect in vertical mode.

Example:

p:first-of-type {  writing-mode: vertical-lr;}p:last-of-type {  writing-mode: vertical-lr;  text-orientation: upright;}

<h4>With writing mode "vertical-lr"</h4><p>Start</p><hr><h4>With writing mode "vertical-lr" and text-orientation "upright"</h4><p>Start</p>

CSS vertically align and break text

Remove the no-wrapping code

text-overflow: ellipsis;
white-space: nowrap;

from the span and use flexbox

body {  background-color: #f7f7f7;}
#coll_container .coll_item {  display: inline-block;  color: #333;  list-style: none;  border-radius: 50%;  transition: 0.3s;  width: 105px;  height: 105px;  text-align: center;  border: solid 3px #333;}
#coll_container .coll_item a:hover {  margin: 0;  padding: 0;  color: #fff;}
#coll_container .coll_item a span {  overflow: hidden;  /*    text-overflow: ellipsis;    white-space: nowrap;    */  word-wrap: normal;  display: block;  font-weight: 600;  border-radius: 50%;  width: 95px;  height: 95px;  padding: 2px;  border: solid 3px #fff;  display: flex;  align-items: center;}
#coll_container .coll_item:hover {  background-color: #333;  color: #fff;}
#coll_container .active {  background-color: #333;  border-radius: 50%;}
#coll_container .active a span {  color: #fff;  border: solid 3px #333;}

<div id="coll_container">  <ul class="coll_list">    <li class="coll_item">      <a title="title" class="collections"><span>Classic Collection</span></a>    </li>    <li class="coll_item active">      <a title="title" class="collections"><span>Ultimate Collection</span></a>    </li>    <li class="coll_item">      <a title="title" class="collections"><span>Luxurious Collection</span></a>    </li>  </ul></div>

How to vertically align all text in CSS?

Here is my solution using JS. The idea is to transform the element into an image in order to get its data as pixel then loop through them to find the top and bottom of each character and apply a translation to fix the alignment. This will work with dynamic font properties.

The code is not optimized but it highlight the main idea:

var elems = document.querySelectorAll(".avatar");
var fixes = [];

for (var i = 0; i < elems.length; i++) {  var current = elems[i];  domtoimage.toPixelData(current)    .then(function(im) {      /* Search for the top limit */      var t = 0;      for (var y = 0; y < current.scrollHeight; ++y) {        for (var x = 0; x < current.scrollWidth; ++x) {          var j = (4 * y * current.scrollHeight) + (4 * x);          if (im[j] == 255 && im[j + 1] == 255 && im[j + 2] == 255) {            t = y;            break;          }        }      }      /* Search the bottom limit*/      var b = 0;      for (var y = (current.scrollHeight - 1); y >= 0; --y) {        for (var x = (current.scrollWidth - 1); x >= 0; --x) {          var j = (4 * y * current.scrollHeight) + (4 * x);          if (im[j] == 255 && im[j + 1] == 255 && im[j + 2] == 255) {            b = current.scrollHeight - y;            break;          }        }      }      /* get the difference and apply a translation*/      var diff = (b - t)/2;      fixes.push(diff);      /* we apply the translation when all are calculated*/      if(fixes.length == elems.length) {        for (var k = 0; k < elems.length; k++) {          elems[k].querySelector('.character').style.transform = "translateY(" + fixes[k] + "px)";        }      }    });}

.avatar {  border-radius: 50%;  display: inline-flex;  vertical-align:top;  justify-content: center;  align-items: center;  width: 125px;  height: 125px;  font-size: 60px;  background:     linear-gradient(red,red) center/100% 1px no-repeat,    rgb(81, 75, 93);  font-family: "Segoe UI";  margin-bottom: 10px;}
.character {  color: #fff;}

<script type="text/javascript" src="https://css-challenges.com/wp-content/themes/ronneby_child/js/dom-to-image.js"></script><div class="avatar">  <div class="character">W</div></div>
<div class="avatar">  <div class="character">y</div></div>
<div class="avatar">  <div class="character" style="font-size:35px">a</div></div>
<div class="avatar">  <div class="character" style="font-size:25px">2</div></div><div class="avatar">  <div class="character">o</div></div><div class="avatar">  <div class="character">|</div></div><div class="avatar">  <div class="character">@</div></div><div class="avatar">  <div class="character">Â</div></div>
<div class="avatar">  <div class="character" style="font-family:arial">Q</div></div><div class="avatar">  <div class="character">~</div></div><div class="avatar">  <div class="character">8</div></div>
<div class="avatar">  <div class="character">ä</div></div><div class="avatar">  <div class="character">ç</div></div>
<div class="avatar">  <div class="character">$</div></div>
<div class="avatar">  <div class="character">></div></div><div class="avatar">  <div class="character">%</div></div>

How to centre text vertically AND horizontally in a div whilst also flowing around an image who's size can vary

You can avoid the need for hacky workarounds by using flexbox. It's capable of the sort of centering you're trying to do with some simple properties.

Set the container to flex and use align-items: center to vertically center your content. Then center align the text.

The text is wrapped in a div which is set to fill all the available space (flex: 1 1 auto) while the logo isn't allowed to grow or shrink (flex: none).

.lbo_header_title {
    align-items: center;
    display: flex;
    text-align: center;

    /** various existing styles */
    padding: 5px;
    background-color: #ddeeff;
    border: 1px solid #31639C;
    min-width: 550px;
    width: 50%;
}

.lbo_header_name {
    flex: 1 1 auto; 
}

.lbo_header_logo {
    flex: none;
    margin-left: 20px;
}

<div class="lbo_header_title">
    <div class="lbo_header_name">League 1</div>
    <img class="lbo_header_logo" src="https://placehold.it/70x30" width="70" height="30" />
</div>

<div class="lbo_header_title">
    <div class="lbo_header_name">League 2</div>
    <img class="lbo_header_logo" src="https://placehold.it/30x70" width="30" height="70" />
</div>

Vertical orientation text in css

Here is an article that details several ways to accomplish this with both CSS and javascript along with the pros and cons of each.

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

Hope you find it useful.

Vertically align text within a div

Create a container for your text content, a span perhaps.

#column-content {  display: inline-block;}img {  vertical-align: middle;}span {  display: inline-block;  vertical-align: middle;}
/* for visual purposes */#column-content {  border: 1px solid red;  position: relative;}

<div id="column-content">
  <img src="http://i.imgur.com/WxW4B.png">  <span><strong>1234</strong>    yet another text content that should be centered vertically</span></div>

How to vertically center text in viewport that's wrapping around floating elements

It seems that this is impossible in general to do with only CSS, this may be possible in future levels of CSS shapes if it allows us to use shape-outside on non-floated elements. In the mean time we have to use JavaScript.