Ensuring text stays within viewport in SVG while adjusting HTML font size

Encountering a problem with SVG text and feeling unsure about how to handle it

The SVG text I have fits perfectly when the browser or HTML font size is set to 16px. However, if a user increases their font size, the text gets cut off.

How can I ensure that the text stays within the viewport even when the HTML font size is increased?

Check out this fiddle with the default 16px setting - https://jsfiddle.net/f7zv60c5/4/

And here is the fiddle when the font size is increased to 18px - https://jsfiddle.net/f7zv60c5/5/

Below is the HTML code snippet:

<svg class="league_name" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%">
    <tspan class="league_name_text" style="fill:#080e25">Weapons of</tspan>
    <tspan class="league_name_text"></tspan>
    <tspan class="league_name_text" style="fill:#B82601">DMD</tspan>
    <tspan class="league_slogan_text" x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan class="establshed-svgtext" x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>
csssvg

Answer №1

According to @enxaneta:
rem units are based on the root font-size of your <html>.
Using px, em, or % will make them relative to your svg user units.

To ensure consistency, set a fixed font-size for your <text> element
and adjust the units in your font-size to em.

Modifying the global font-size won't impact the svg.

svg{
  width:100%;
  border:1px solid red;
  overflow:visible
}

.league_name-relative{
  height:2em;
  width:auto
}

.resize{
  resize:both;
  padding:0.5em;
  overflow:auto;
  border:1px solid #ccc;
  display:inline-block;
}

.league_name_text {
  font-size: 1.975em
}

.league_slogan_text {
  font-size: 1em;
}

.establshed-svgtext {
  font-size: 0.85em
}
<p style="font-size:10px">Font-size: <input type="range" id="fontSize" min="10" max="72" steps="1"></p>
<div class="resize">
  <p>resize me</p>
<svg class="league_name" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%" font-size="16px">
    <tspan class="league_name_text" style="fill:#080e25">Weapons of</tspan>
    <tspan class="league_name_text"></tspan>
    <tspan class="league_name_text" style="fill:#B82601">DMD</tspan>
    <tspan class="league_slogan_text" x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan class="establshed-svgtext" x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>
</div>

<svg class="league_name-relative" viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
  <text text-anchor="middle" x="50%" y="50%" font-size="16px">
    <tspan class="league_name_text" style="fill:#080e25">Weapons of</tspan>
    <tspan class="league_name_text"></tspan>
    <tspan class="league_name_text" style="fill:#B82601">DMD</tspan>
    <tspan class="league_slogan_text" x="50%" dy="20" style="font-style:italic;fill:#444;font-weight:300">Fantasy Football League</tspan>
    <tspan class="establshed-svgtext" x="50%" dy="20" style="fill:#777;font-weight:300;font-style:italic">B.O.T.H 2003</tspan>
  </text>
</svg>

<script>
fontSize.addEventListener('input',e=>{
  let size = e.currentTarget.value;
  document.body.style.fontSize = size+'px';
})

</script>

If you want your svg to scale with the current font-size:
Give it height and width that are proportional to the font-size like this:

.svg{
  height:2em;
  width:auto
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve the red, green, and blue components of a color in the RGB format

When I retrieve "rgb(18, 115, 224)" from a DOM element, I need to convert this color to hexadecimal in order to assign it to a span element. To get the hexadecimal equivalent of the color, I can use the following code snippet: "#" + componentToHex(r) + co ...

javascriptjqueryhtmlcsscolors

Text that is inside a grid item will not be cut off using an ellipsis

For some reason, the ellipsis isn't showing up as expected. Instead of truncating with an ellipsis, the text just goes to the next line. text { display: inline; overflow: hidden; text-align: center; text-overflow: ellipsis; } grid { ...

htmlcssoverflow

Apply Class According to Style Property

My current CMS does not seem to apply a class name when an element is floated left or right. Instead of delving into the TinyMCE code, I would prefer to use jQuery to solve this issue. Currently, when aligning an image to the left or right, inline styles ...

jqueryhtmlcss

Is it possible to use an input value to rotate an element?

I'm attempting to rotate a red circle with the ID of outer using Input[type=range]. I've tried selecting the circle's style, then transforming it based on the input value, but it needs to be within the parentheses of rotateZ(), which require ...

javascripthtmlcssdom

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units

Assigning random classes from a pool of just 3 variables to over 20 different div elements

I have a total of 20 divs and three different hover effect classes. I would like to randomly assign one of these three hover effects to each div. The JavaScript code I am using is: <script> $(document).ready(function () { viewClasses = 3; randomNum ...

javascriptjqueryhtmlcss

I'm having trouble making my jQuery banner responsive - which property should I be using in this situation?

I am experiencing an issue with my jQuery banner not shrinking properly. In my mobile.css file, I have set the class .banner width to 100%, but it is not shrinking to a width of 260px as expected. I would like to know which property I need to use in orde ...

jqueryhtmlcss

CSS - Positioning a rectangle between two squares

I need help creating a layout with 2 rows of 4 squares, each with a rectangle in the middle of two squares. https://i.sstatic.net/9pWBi.png This is the code I currently have: .main { width: 100%; height: auto; } .square { width: 25%; position: ...

htmlcss

Ensure the background image is optimized for viewing on screens of any size

I am facing an issue with an image on my website that serves as the background for some elements. The image is wider than it is tall, causing problems for users viewing the site on phones. Is there a way to cut off the sides of the image and ensure it fits ...

htmlcssbootstrap-5

Tips for aligning a rotated element with the right edge

My current challenge involves aligning an absolute element (an image) to the right edge of its container. Under normal circumstances, this alignment works seamlessly. However, when a transformation is applied, calculating the correct left property becomes ...

javascriptjquerycsscss-transforms

Inserting HTML code directly after a full-screen height responsive div while utilizing Bootstrap 4

So, I have three main components in my design: a navbar, a content div with sections, and a footer. I've managed to make the design responsive for the navbar and content div, but not for the footer yet. The issue lies with the content container, whi ...

htmlcssbootstrap-4

Differences between Next.js Image and regular img tag regarding image quality

I am currently using Next.js and have noticed that my images appear slightly blurry when utilizing Next/Image. Below is a snippet of my code: <img src={url} width={articleWidth} /> <Image className="text-center" src={url} ...

htmlcssimagenext.js

Is it possible to alter the color of the background image using jQuery?

My website currently has the css code below. I am looking for a way to allow users to change the color of an image by entering a #colorcode in a text field. Is this functionality possible to implement? .button{ background-image:url(../pattern/_img/b ...

javascriptjqueryhtmlcss

Divergent display of WordPress form input CSS between Firefox and Chrome

Trying to create an email opt-in box using Wordpress with a pre-installed theme. The box appears correctly in Firefox but is displaying incorrectly in Chrome. Issues include no padding in the text fields, different font colors, and extra padding above and ...

csswordpress

Tips for creating a dynamic CSS selector to automate text matching in Selenium using Java

I've been developing a new application that's packed with Shadow-roots. Before entering the shadow root, I could use Xpath to locate elements, but once inside the shadow root, I have to switch to CSS selectors. Check out the Root tree image below ...

cssselenium-webdrivercss-selectors

A method for enabling a stationary, fluctuating height object to occupy area

Initially, I am looking for a solution using only CSS. While JavaScript can accomplish this easily, I prefer to stick to CSS for now. On my webpage, I have three containers: two fixed and one static. The goal is to adjust the padding of the static contai ...

cssfixed

Is there a way to apply styles to a checkbox's child element depending on the checkbox's state without relying on ternary operators within Styled Components?

I am currently working on styling this component using Styled Components, but I feel like my current approach is a bit of a hack. What would be the best practice for incorporating Styled Components to style this component effectively? If I were to use Pla ...

javascriptcssreactjsstyled-components

Tips for concealing collapsible-header while collapsible-content is visible in Jquery Mobile

I am currently working with Jquery Mobile and utilizing a collapsible set. By default, when I click on h3, the collapsible content is shown. What I am trying to achieve is that when I click on h3 (Animals), the h3 element should disappear and only the ul c ...

javascriptjquerycssjquery-mobile

Is there a way to transfer CSS classes to React children and guarantee they take precedence over the child's own class styles?

I am trying to pass a CSS class from the parent component into the child component. Here is an example: <Parent> <Child /> </Parent> In order to apply a class from the parent to the <Child />, I have done this: <Parent> ...

javascriptcssreactjs

Tips on making sure the right sidebar utilizes the available screen space to its fullest potential

On the master page, you will find 2 columns: The left column is a JQuery UI accordion that can be resized using JQuery UI resizable. The right column (main div) should take up the remaining horizontal space on the screen. To achieve this layout, the fol ...

htmlcssjquery-ui