seo Question posted in
Some basic information to get you started with this can be found here.

HTML/CSS Text Around a Corner of a DIV – SEO

So, I’m looking to do a single H1 tag to go around a container. If I use CSS rotate, I can rotate the text, but obviously only the 90 degrees, not around a div. I’m looking to keep the text in ONE H1 tag since the designer would like this to be the headline of the page and for SEO purposes.

I’m not sure if this is possible from all the research I’ve done. I’m a bit stumped. I figured you guys/gals would know if this would be even possible.

FOR EXAMPLE:
enter image description here

<h1>Latest News</h1>
<div>Blue Square</div>
Tags:

4

Answers


  1. 0

    What you are looking for are svg elements. This is an entire different world of coding, but works as HTML. I would suggest to follow some documentation about svg. CSS is not meant for these types of manipulation.

    I have create an example: svg fiddle

    HTML

    <svg width="500" height="500">
  <path id="curve" d="M25,25   l125,0  0,125  -125,0  0,-125"
      style="stroke: #0D454A; fill: #0D454A;" />
  <text width="500px">
    <textPath alignment-baseline="top" xlink:href="#curve">
      This is a text example that's floating around this square
    </textPath>
  </text>
</svg>

    To follow text around a rectangular you need to use <path> and <textPath>.

    Login or Signup to reply.
  2. 0
    • Position your box relative (with some margin room for the offset heading text)
    • Position your heading absolute with negative top -1.1em
    • Create a <span> (inside the heading) for the rotated vertical text
    • Position your SPAN absolute at right 100% + 1.1em
    • transform rotate you SPAN on the origin right top by -90deg
    /*QuickReset*/*{margin:0;box-sizing:border-box;}html,body{min-height:100%;font:14px/1.4 sans-serif;}

.box {
  position: relative;
  margin: 3em;
  width: 140px;
  height: 100px;
  background: #0bf;
}
.box h1 {
  position: absolute;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: 2em; /* play only with this value. don't touch the rest! */
  top: -1.1em;
}
.box h1 span{
  position: absolute;
  top: 0.35em;
  right: calc(100% + 1.1em);
  transform-origin: right top;
  transform: rotate(-90deg);
}
    <div class="box">
  <h1><span>Latest</span> News</h1>
</div>

<div class="box">
  <h1><span>Special</span> Offers!</h1>
</div>

<div class="box">
  <h1><span>Edge case with</span> some long text</h1>
</div>

    Wrap into <span> automatically (server-side)

    If you’re pulling unknown length titles i.e. from a CMS, I suggest you split your string in half- word-aware! in order to determine the first-half word/s that need to be wrapped in span

    Example using PHP:

    <?php

/**
 * Wrap first half of a sentence into <span>, word-aware! 
 */

function span_first_half($s) {
  $n = floor(strlen($s)/2);
  preg_match(("/.{{$n}}\S*/"), $s, $a);
  $b = substr($s, strlen($a[0]));
  return "<span>$a[0]</span>$b";
}

    PHP – use like:

    <h1><?= span_first_half("Edge case with some long text") ?></h1>
<h1><?= span_first_half("This is cool!") ?></h1>

    Will result in:

    <h1><span>Edge case with</span> some long text</h1>
    <h1><span>This is</span> cool!</h1>

    JavaScript – Use like

    function span_first_half(s) {
  const n = Math.floor(s.length/2),
    a = s.match(RegExp(".{"+n+"}\S*"))[0],
    b = s.substr(a.length);
  return `<span>${a}</span>${b}`;
}

console.log( span_first_half("Edge case with some long text") );
console.log( span_first_half("This is cool!") );

    The above demos are adapted from this JavaScript example

    Login or Signup to reply.
  3. 0

    It can be done by simple CSS transforms:

    <style>
    * { margin: 0; padding: 0; }
    div.square { margin-left: 8em; width: 20em;
                 height: 20em; background-color: #08F; }
    h1 { margin-left: 2em; transform: translate(-3em);
         font-size: 400%;}
    h1 div { display: inline-block;
           transform: translate(1em,1em) rotate(-90deg); }
</style>
...
<h1><div>HEAD</div>ONE</h1>
<div class="square">Square</div>

    The h1 will be treated as “HEAD ONE” text by search engines.

    Login or Signup to reply.
  4. 0

    i think this way can help you

    <div>
<h1>Latest News</h1>
Blue Square
</div>

    but your uploaded image not loaded, please try again upload it , and reply to me to I help you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search