Reines CSS für die Anpassung der Schriftgröße an die dynamische Zeichenanzahl

Question

Ich weiß, dass dies ziemlich einfach mit Javascript gelöst werden könnte, aber ich bin nur an einer reinen CSS-Lösung interessiert.

Ich möchte einen Weg, um dynamisch die Größe von Text, so dass es immer in einem festen div passt. Hier ist das Beispiel Markup:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

Ich dachte, dass vielleicht dies möglich sein könnte, indem Sie die Breite des Containers in ems, und immer die Schriftgröße, um diesen Wert zu erben?

Answer 1

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

diese Gleichung verwenden.

Für alles, was größer oder kleiner als 1440 und 768 ist, können Sie entweder einen statischen Wert angeben oder denselben Ansatz anwenden.

Der Nachteil mit vw Lösung ist, dass Sie nicht ein Skalierungsverhältnis, sagen wir eine 5vw bei Bildschirmauflösung 1440 Mai endete als 60px Schriftgröße, Ihre Idee Schriftgröße, aber wenn Sie schrumpfen die Fensterbreite auf 768, kann es endete als 12px, nicht die minimale Sie wollen. Mit diesem Ansatz können Sie Ihre obere und untere Grenze setzen, und die Schrift wird sich dazwischen skalieren.

Answer 2

Wie viele in den Kommentaren zu @DMTinters Beitrag erwähnten, fragte der Auftraggeber nach der Anzahl ("Menge") der sich ändernden Zeichen. Er fragte auch nach CSS, aber wie @Alexander andeutete, "ist es mit CSS allein nicht möglich". Soweit ich das beurteilen kann, scheint das derzeit der Fall zu sein, also scheint es auch logisch, dass die Leute wissen wollen, was das Nächstbeste ist.

Ich bin nicht besonders stolz darauf, aber es funktioniert. Scheint eine übermäßige Menge an Code zu sein, um das zu erreichen. Dies ist der Kern:

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css('font-size'));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css('font-size', --fsize + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css('font-size', ++fsize + 'px');
      }
      else{
        break;
      }
    }
  }
}

Hier ist ein JS Bin: http://jsbin.com/pidavon/edit?html,css,js,console,output
Bitte schlagen Sie mögliche Verbesserungen vor (ich bin nicht wirklich daran interessiert, Canvas zum Messen des Textes zu verwenden... scheint mir zu viel Overhead zu sein(?)).

Dank an @Pete für die measureText-Funktion: https://stackoverflow.com/a/4032497/442665

Answer 3

Ich habe diese dynamische Schriftgröße calc() von BootStrap irgendwo und zwickte es zu passen. Basierend auf 4pt System und rem https://www.finsweet.com/client-first/docs/sizes für ein Webflow-Projekt:

html {font-size: 16px;}

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {font-family: 'Poppins', sans-serif;}

/*---SETUP BASE SIZE ---*/
html {font-size: 16px;}

/*---LINE-HEIGHTS + MARGINS---*/
[class^="display"], h1, h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.display-1, .display-2, .display-3, .display-4 {
    line-height: 1.2;

}

h1, h2, h3, h4 {
    line-height: 1.4;
}

p, ul, ol {
    margin-bottom: 0.7rem;
    line-height: 1.45;
}

.lead {
    margin-bottom: 1rem;
    line-height: 1.4;
}

/*---FONT SIZES 1279px DOWN---*/
@media (max-width: 1279px) {
    .display-1 {
        font-size: calc(1.625rem + 4.5vw);
    }

    .display-2 {
        font-size: calc(1.575rem + 3.9vw);
    }

    .display-3 {
        font-size: calc(1.525rem + 3.3vw);
    }

    .display-4 {
        font-size: calc(1.475rem + 2.7vw);
    }

    /*---HEADINGS---*/
    h1 {
        font-size: calc(1.375rem + 1.5vw);
    }

    h2 {
        font-size: calc(1.325rem + 0.9vw);
    }

    h3 {
        font-size: calc(1.3rem + 0.6vw);
    }

    h4 {
        font-size: calc(1.275rem + 0.3vw);
    }

    /*---PARAGRAPHS/UL/OL---*/
    p, ul, ol  {
        font-size: calc(0.823rem + 0.3vw);
    }

    .lead {
        font-size: calc(1.01rem + 0.3vw);
    }
}

/*---FONT SIZES ABOVE 1279px---*/
@media screen and (min-width: 1280px) {
    .display-1 {
        font-size: 5.22rem;
    }

    .display-2 {
        font-size: 4.7rem;
    }

    .display-3 {
        font-size: 4.16rem;
    }

    .display-4 {
        font-size: 3.63rem;
    }
    /*---HEADINGS---*/
    h1 {
        font-size: 2.58rem;
    }

    h2 {
        font-size: 2.05rem;
    }

    h3 {
        font-size: 1.78rem;
    }

    h4 {
        font-size: 1.52rem;
    }

    p, ul, ol {
        font-size: 1.0625rem;
    }

    .lead {
        font-size: 1.25rem;
    }
}

<section>
    <div class="container">
        <p style="color:#8C8C8C;"><i>Note: Resize window too see text grow/shrink in browser window <= 1279px</i></p>
        <br>
        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <br>
        <br>
        <br>
        <br>
        <h1>h1. The quick brown fox jumps over the lazy dog</h1>
        <h2>h2. The quick brown fox jumps over the lazy dog</h2>
        <h3>h3. The quick brown fox jumps over the lazy dog</h3>
        <h4>h4. The quick brown fox jumps over the lazy dog</h4>
        <p>The earliest known appearance of the phrase was in The Boston Journal. In an article titled "Current Notes" in the February 9, 1885, edition, the phrase is mentioned as a good practice sentence for writing students: "A favorite copy set by writing teachers for their pupils is the following, because it contains every letter of the alphabet: 'A quick brown fox jumps over the lazy dog.'"[2] Dozens of other newspapers published the phrase over the next few months, all using the version of the sentence starting with "A" rather than "The"</p>
        <p>The earliest known use of the phrase starting with "The" is from the 1888 book Illustrative Shorthand by Linda Bronson.[4] The modern form (starting with "The") became more common even though it is slightly longer than the original (starting with "A").</p>
        <p>A 1908 edition of the Los Angeles Herald Sunday Magazine records that when the New York Herald was equipping an office with typewriters "a few years ago", staff found that the common practice sentence of "now is the time for all good men to come to the aid of the party" did not familiarize typists with the entire alphabet, and ran onto two lines in a newspaper column. They write that a staff member named Arthur F. Curtis invented the "quick brown fox" pangram to address this.</p>
        <br>
        <br>
        <br>
        <br>
        <p class="lead">Lead paragraph: As the use of typewriters grew in the late 19th century.</p>
        <p>The phrase began appearing in typing lesson books as a practice sentence. Early examples include How to Become Expert in Typewriting: A Complete Instructor Designed Especially for the Remington Typewriter (1890),[6] and Typewriting Instructor and Stenographer's Hand-book (1892). By the turn of the 20th century, the phrase had become widely known. In the January 10, 1903, issue of Pitman's Phonetic Journal, it is referred to as "the well known memorized typing line embracing all the letters of the alphabet".</p>
        <p>Robert Baden-Powell's book Scouting for Boys (1908) uses the phrase as a practice sentence for signaling.</p>
        <p>The first message sent on the Moscow–Washington hotline on August 30, 1963, was the test phrase "THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG'S BACK 1234567890".</p>
        <br>
        <br>
        <br>
        <br>
        <ul class="list-unordered">
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
        </ul>
        <br>
        <br>
        <br>
        <br>
        <ol class="list-ordered">
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
            <li>During the 20th century, technicians tested typewriters and teleprinters by typing the sentence.</li>
        </ol>
        <br>
        <br>
        <br>
        <br>
    </div>
</section>

Genießen Sie

Answer 4

Diese Lösung könnte ebenfalls hilfreich sein:

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

Das hat bei mir gut funktioniert!

Answer 5

OK, Ihr dynamischer Text muss von irgendwoher stammen. In meinem Fall sieht das so aus:

<div class="large" :data-contentlength="Math.floor(item.name.length/7)">[[ item.name ]]</div>

und meine css-Klassen:

.large[data-contentlength="1"]{ font-size: 1.2em; }
.large[data-contentlength="2"]{ font-size: 1.1em; }
.large[data-contentlength="3"]{ font-size: 1.0em; }
.large[data-contentlength="4"]{ font-size: 0.9em; }
.large[data-contentlength="5"]{ font-size: 0.8em; }
.large[data-contentlength="6"]{ font-size: 0.7em; }
.large[data-contentlength="7"]{ font-size: 0.6em; }

Ich habe auch Klassen für "nicht-großen" Text:

[data-length="1"]{ font-size: 1.00em; }
...

bearbeiten: Dies wird ein wenig einfacher, wenn attr() in allen Browsern verfügbar ist: https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility

Außerdem könnte dies dynamischer sein, wenn css 2 Einheiten-Werte (z.B. px und ch) teilen könnte, im Moment muss dies manuell gemacht werden.

siehe hier:

https://jsfiddle.net/qns0pov2/3/

Erstellen Sie einen 1-Kanal-Würfel und sehen Sie, wie groß er in Ihrer Zieleinheit ist (im Fiddle ist es px), berechnen Sie die Anzahl der Zeichen pro Zeile und verwenden Sie diesen Wert, um die perfekte Schriftgröße für jede Inhaltslänge zu erhalten.

Der Fiddle zeigt auch die Probleme dieses Ansatzes: Die durchschnittliche Zeichenbreite ist geringer als 1ch (die sich auf 0 ), aber es gibt Zeichen wie M die größer sind (ca. 70 %).

Wenn Sie also sicherstellen wollen, dass die Zeichen in den Raum passen, passen Sie den Fiddle so an, dass: --ch-width: calc(8.109 * 1.7);

wenn Sie eher an einem durchschnittlichen Fall interessiert sind: --ch-width: calc(8.109 * 0.92);