1

Here is a box containing two SVGs. one for the text and one for the background rectangle.

I want to fit the text inside the background rectangle. so that there is no text stretching out of the background rectangle. (Note that I don't want to line break the text I want to decrease the dimensions of the text or something to fit the text inside the rectangle in a single line);

I have tried a lot of solutions with no luck and I think maybe there are no pure CSS solutions, So even Javascript to fix this wired issue is accepted.

Note: I really need the text and the background rectangle to be SVGs.

Here is the CodePen.

And Here is the code:

@font-face {
  font-family: "Heebo-Light";
  src: url(Heebo-Light.ttf) format("truetype");
}

svg {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
}

body {
  background-color: #FDFDFD;
  overflow: hidden;
}

.box svg:nth-of-type(1) {
  position: absolute;
  z-index: 3;
}

.box svg:nth-of-type(2) {
  position: absolute;
  z-index: 2;
}

.box, svg {
  max-width: 100%;
  max-height: 2.59vw;
}

.box {
  position: relative;
  height: 2.59vw;
}
<div id="box-13" class="box" style="width: 35.0663246486498vw;">
   <svg height="100%" width="100%" viewBox="0 0 100 45">
      <text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
         <tspan id="span-15">This is a long text that should be fit This is a long text that should be fit This is a long text that should be fit</tspan>
      </text>
   </svg>
   <svg height="100%" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
      <defs>
         <linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomIdA-4">
            <stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
            <stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
            <stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
         </linearGradient>
         <filter id="uniqueDomIdB-4" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
            <feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
            <feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
            </feGaussianBlur>
            <feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
         </filter>
      </defs>
      <use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomIdC-4" filter="url(#uniqueDomIdB-4)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use>
      <g id="uniqueDomIdC-4">
         <g>
            <path d="M0,0L272,0 272,45 0,45z" fill="url(#uniqueDomIdA-4)"></path>
         </g>
      </g>
   </svg>
</div>

Edit: Changing veiwBox seems promising But I have no idea how to calculate it! I can calculate box width but I don't know how to find viewBox...?

4
  • No it doesn't work for me...
    – Sara Ree
    Aug 19, 2020 at 11:17
  • You can use <tspan textLength="100%" but since your svg is stretched ` height="100%" width="100%"` you'll need to remove the viewBox to make it work (I wouldn't do it). The text will apear jammed together. Another solution would be using a proper viewBox without streatching the svg and recalculating the font size
    – enxaneta
    Aug 19, 2020 at 11:35
  • How can I calculate a proper veiwBox using Javascript?
    – Sara Ree
    Aug 19, 2020 at 11:36
  • Changing veiwBox seems promising But I have no idea how to calculate it! I can calculate box width but I don't know how to find viewBox...?
    – Sara Ree
    Aug 19, 2020 at 11:39

2 Answers 2

2

Since the box is very small and the text is very long the text will be bearly visible.

In javascript I'm getting the length of the text: span15.getComputedTextLength() and I'm using this value for the viewBox attribute

let text_length = span15.getComputedTextLength();

document.querySelector("#first").setAttribute("viewBox",`0 0 ${text_length} 45`)
@font-face {
  font-family: "Heebo-Light";
  src: url(Heebo-Light.ttf) format("truetype");
}

svg {
    position: relative;
    display: block;
    overflow: visible;
    pointer-events: none;
    outline:solid red;
}

body {
  background-color: #FDFDFD;
  overflow: hidden;
}
.box {
  position: relative;
  height: 2.59vw;
  outline:solid;
}
<div id="box-13" class="box" style="width: 35.0663246486498vw;">
   <svg id="first" viewBox="0 0 100 45">
      <text font-family="Heebo-Light" font-size="24px" fill="#595959" fill-opacity="1" x="50%" y="53%" dominant-baseline="middle" text-anchor="middle">
         <tspan id="span15">This is a long text that should be fit This is a long text that should be fit This is a long text that should be fit</tspan>
      </text>
   </svg>
  </div>

2
  • I sum an extra 70 to the text length to add some paddings to the text ... is that a proper solution or you may suggest a better one?
    – Sara Ree
    Aug 19, 2020 at 12:16
  • I would do the same. 70 would give you a "padding" of 35
    – enxaneta
    Aug 19, 2020 at 12:37
1

<div id="box-13" class="box" style="width: 35.0663246486498vw;">
  <svg height="100%" width="100%" viewBox="0 0 272 45" preserveAspectRatio="none">
      <defs>
         <linearGradient gradientTransform="rotate(90, 0.5, 0.5)" id="uniqueDomIdA-4">
            <stop offset="0%" stop-color="#AFAFAF" stop-opacity="1"></stop>
            <stop offset="0%" stop-color="#F5F3F8" stop-opacity="1"></stop>
            <stop offset="69.804%" stop-color="#F9F9F9" stop-opacity="1"></stop>
            <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"></stop>
         </linearGradient>
         <filter id="uniqueDomIdB-4" filterUnits="userSpaceOnUse" x="-15.75" y="-15.75" width="303.5" height="76.5">
            <feFlood result="floodOut" flood-color="#CCC1DA" flood-opacity="0.29"></feFlood>
            <feGaussianBlur result="gaussOut" in="SourceAlpha" stdDeviation="2.450000047683716,2.450000047683716">
            </feGaussianBlur>
            <feComposite in="floodOut" in2="gaussOut" operator="in"></feComposite>
         </filter>
      </defs>
      <use transform="translate(-2.72, -0.45) scale(1.0199999809265137, 1.0199999809265137) translate(0, 0)" xlink:href="#uniqueDomIdC-4" filter="url(#uniqueDomIdB-4)" data-angle="0" data-distance="0" data-height="45" data-scale="1.02" data-adornment-type="drop-shadow" data-width="272" data-transform="[{&quot;type&quot;:&quot;translate&quot;,&quot;args&quot;:[-2.72,-0.45]},{&quot;type&quot;:&quot;scale&quot;,&quot;args&quot;:[1.0199999809265137,1.0199999809265137]}]"></use>
      <g id="uniqueDomIdC-4">
         <g>
            <path d="M0,0L272,0 272,45 0,45z" fill="url(#uniqueDomIdA-4)"></path>
      <foreignObject
        x="0" y="0" width="100%" height="100%"
      >
          <p style="font-size: 1.8vw;line-height:1.2;text-align:center;">This is a long text that should be fit This is a long text that should be fit This is a long text that should be fit</p>
       
      </foreignObject>
         </g>
      </g>
   </svg>
</div>

1
  • (Note that I don't want to line break the text I want to decrease the dimensions of the text or something to fit the text inside the rectangle in a single line);
    – Sara Ree
    Aug 19, 2020 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.