SVG: Text in Text (oder mit CSS)

Question

Ich suche nach Möglichkeit, Text im Text zu positionieren (siehe Beispielbild).

Grundsätzlich wie Sie sehen auf Beispiel char 'T' mit Text nach innen. Der einfachste Weg wäre, eine Textmaske auf einem Rechteck zu implementieren. In meinem Fall wird das nicht funktionieren, da innerer Text eine Reihe von Phrasen ist und ich sie alle sehen muss.

Ich bin offen für jede Art von Lösung. Im Moment versuche ich es mit SVG + snapsvg Bibliothek zu tun. Ich bin auch für CSS-Lösungen geöffnet.

UPDATE:

(in Text meinem Fall Verpackung ein Wort oder einen Satz wäre) kann

Answer 1

Sie text-align:justify verwenden und so etwas wie dies sein wird:

div { 
 
    text-align: justify; 
 
    border:1px dashed red; 
 
    margin:auto 
 
} 
 
.w600 { 
 
    width: 600px; 
 

 
} 
 
.w200 { 
 
    width: 200px; 
 
}

<div class="w600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat turpis ut lectus semper sollicitudin. Nullam turpis metus, eleifend ut mattis nec, vehicula a justo. In ac rhoncus urna. Praesent sodales et felis non pretium. Vestibulum eros augue, 
 
    venenatis in cursus at, tincidunt ac sapien. Nullam quis purus luctus ex ullamcorper fringilla vel a odio. Phasellus ligula enim, placerat id tortor nec, maximus maximus tortor. Maecenas accumsan placerat elementum. Maecenas accumsan</div> 
 
<div class="w200">Phasellus vel velit vel mauris facilisis sagittis id eget elit. Nulla sit amet ornare arcu, sed aliquam sem. Sed molestie tempor nibh et pretium. Cras non dui gravida, tincidunt arcu condimentum, dictum dui. Proin iaculis diam lacus, at consequat erat 
 
    lobortis ornare. Donec in ante sed nibh tempus commodo. Vivamus id justo vitae lacus varius imperdiet. Proin porttitor velit enim, ut molestie sem fermentum ut. Integer vitae est non diam dictum sodales. Mauris lobortis lectus a ligula fringilla, semper 
 
    ullamcorper lacus condimentum. Fusce nisl lectus, pharetra sed augue pulvinar, volutpat mollis justo. Phasellus a iaculis turpis, ut placerat magna. Integer et mollis metus, a lacinia arcu. Sed at erat eget lacus dapibus malesuada id eu tortor. Nullam 
 
    et ullamcorper ante, eu venenatis eros. Pellentesque tempor quis risus dignissim vulputate. Nulla facilisi. Aliquam dapibus pharetra risus in consectetur. Sed pretium mollis imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, 
 
    per inceptos himenaeos. Fusce eu felis diam. Donec sit amet quam eget lorem posuere porta. Integer porttitor condimentum neque ut volutpat. Nam iaculis feugiat libero et convallis. Nullam sed orci ac ante pellentesque pretium. Donec tincidunt massa 
 
    quis est fringilla, nec porttitor purus varius. Duis id consectetur nunc. Curabitur interdum feugiat lorem a sollicitudin. Duis tempus orci scelerisque elit facilisis tempus. Nulla nec maximus eros.</div>

Answer 2

Der richtigste Weg, den ich finden könnte, dies zu tun Wenn Sie nur reines CSS verwenden, verwenden Sie die Eigenschaft shape-inside mit Polygonen oder eine URL für eine transparente PNG-Maske als Wert. Gegenwärtig scheint shape-outside jedoch mehr unterstützt zu werden, was Ihren spezifischen Bedürfnissen nicht helfen wird (möglicherweise könnten Sie mit diesem Ansatz negative Leerzeichen machen). Dies ist aufgrund shape-outside Chaos mit dem gesamten HTML-Layout weniger als Shape-Inside-- Nun zumindest auf dem Chrom-Projekt im Jahr 2014 (https://bugs.chromium.org/p/chromium/issues/detail?id=356778). Auschecken caniuse.com zeigt Unterstützung für Shape-Inside zeigt einige Unterstützung (meist Chrome, Safari und Opera-- mit einigen erfordern Präfix: http://caniuse.com/#search=shape-inside), aber ich konnte es nicht funktioniert sowohl in meiner Chrome und Chromium-Installationen, aktuelle Versionen Unter Windows ist es schwierig, eine Demo zu erstellen - es scheint, als hätte es 2014 funktioniert, da es eine Menge Demos aus diesem Zeitraum gibt.

Theoretisch könnten Sie die shape-inside Eigenschaft mit einem Wert von verwenden: polygon(40.42% 28.25%,42.33% 99.37%,62.17% 99.37%,61.83% 27.50%,99.10% 26.72%,99.63% 0.69%,99.40% 0.41%,61.92% 0.88%,40.83% 1.13%,1.04% 1.47%,1.25% 28.32%); /*a t-shape letter mask-- defined in percentage values*/ und es auf Blockebene Elementselektoreinrichtung. Wenn Sie es vorziehen, die t-Form oben mit festen Einheiten arbeiten könnte stattdessen sein polygon(161.67px 113.00px,169.33px 397.47px,248.67px 397.47px,247.33px 110.00px,396.42px 106.88px,398.50px 2.76px,397.58px 1.65px,247.67px 3.53px,163.33px 4.53px,4.17px 5.90px,5.00px 113.26px)

mit den verschiedenen Buchstabenformen Coming up wird sehr mühsam, wenn Sie ein Tool verwenden, um Polygone zu zeichnen, wie zum Beispiel: http://betravis.github.io/shape-tools/polygon-drawing/ und tun Innere Regionen Buchstaben wie die negativen Leerzeichen in Buchstaben wie A und B können auch die Verwendung eines anderen shape-inside oder shape-outside im Tandem erfordern. Wenn du faul sein wolltest, könntest du den inneren Leerraum in den Buchstaben ignorieren und es wäre wahrscheinlich immer noch lesbar. Sie benötigen mindestens 52 (26 * 2) Klassen, um Groß- und Kleinbuchstaben ohne Interpunktion zu unterstützen. Ich kann diese Antwort alle Polygonformen für Briefe später abhängig von meinen Zeitbeschränkungen aktualisieren.