স্থির আকারের ধারকটি পূরণ করতে স্বয়ং-আকারের গতিশীল পাঠ্য

Question

আমাকে ব্যবহারকারী প্রবেশ করা পাঠ্যকে একটি নির্দিষ্ট আকারের ডিভের মধ্যে প্রদর্শন করতে হবে। আমি যা চাই তা হ'ল ফন্টের আকারটি স্বয়ংক্রিয়ভাবে সামঞ্জস্য করা যাতে পাঠ্যটি যতটা সম্ভব বক্সটি পূরণ করে।

সুতরাং - ডিভটি 400px x 300px হলে। যদি কেউ এবিসিতে প্রবেশ করে তবে এটি সত্যই বড় ফন্ট। যদি তারা কোনও অনুচ্ছেদে প্রবেশ করে তবে এটি একটি ক্ষুদ্র ফন্ট হবে।

আমি সম্ভবত একটি সর্বাধিক ফন্টের আকার দিয়ে শুরু করতে চাই - সম্ভবত 32px, এবং টেক্সটটি পাত্রে ফিট করার জন্য খুব বড় হলেও ফন্টের আকারটি এটি ফিট না হওয়া পর্যন্ত সঙ্কুচিত করুন।

Comments

সম্ভবত একটি সবচেয়ে আশ্চর্যজনক বৈশিষ্ট্য যা জেএসের প্রয়োজন ছাড়াই এইচটিএমএল 5 / সিএসএস 3 এ যুক্ত করা উচিত।

— জন ম্যাগনোলিয়া

আমি কিছু পরিমাপ করেছি যেখানে আমি গতিশীল পাঠ্যের দৈর্ঘ্য পরিবর্তন করেছি এবং কোন ফন্টের আকারটি পাঠ্যটিকে পুরোপুরি ফিট করবে তা নির্ধারণের জন্য ধারকটির আকার। কিছু রিগ্রেশন বিশ্লেষণ করার পরে, আমি একটি সাধারণ গাণিতিক ফাংশন নিয়ে এসেছি যা স্বয়ংক্রিয়ভাবে সেরা ফন্টের আকার তৈরি করবে।

— কিমের বন্ধু

এটি আসলে দেখা যাচ্ছে যে গ্রাফটি আপনাকে সেরা ফন্টের আকার দেয় তা f (x) = g (অক্ষর) * (x / 1000) দ্বারা দেওয়া হয়েছে by n, যেখানে জি (এক্স) একটি সাধারণ ফাংশন, n এর উপর নির্ভর করে ভিন্ন হয় আপনি যে ফন্টটি ব্যবহার করছেন তা। (যদিও এটির সকল ফন্টের মানক মান থাকতে পারে, আপনি একে একে একে একে নিখুঁত করার জন্য যদি এটি টুইট করতে না চান ...)। এক্স ধারকটির বর্গক্ষেত্রের পিক্সেলের আকার।

— কিমের বন্ধু

আপনি যদি এখনও আগ্রহী হন তবে আমি একটি উত্তর যুক্ত করতে পারি। ব্যক্তিগতভাবে আমি মনে করি স্ক্রিপ্টটি "এটি সঠিকভাবে না পাওয়া" না হওয়া পর্যন্ত চেষ্টা করে ব্যর্থ হওয়ার পরিবর্তে প্রথম স্থানে সঠিক ফন্টের আকার তৈরি করা একটি আরও ভাল পদ্ধতি।

— কিমের বন্ধু

এটি করার আরও ভাল উপায়ের জন্য আমার উত্তরটি পরীক্ষা করুন

— হফম্যান

Answer 1

ধন্যবাদ আক্রমণ । আমি jQuery ব্যবহার করতে চেয়েছিলেন।

আপনি আমাকে সঠিক দিকে নির্দেশ করেছেন এবং আমি এখানেই শেষ করেছি:

এখানে প্লাগইনটির লিঙ্ক রয়েছে: https://plugins.jquery.com/textfill/
এবং উত্সের একটি লিঙ্ক: http://jquery-textfill.github.io/

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});

এবং আমার এইচটিএমএল এর মত

<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>

এটি আমার প্রথম jquery প্লাগইন, তাই এটি সম্ভবত যতটা ভাল হওয়া উচিত তা সম্ভবত নেই। পয়েন্টার অবশ্যই স্বাগত।

Comments

আমি আসলে এটি সবেমাত্র পরিষ্কার করেছি এবং এটি jquery.com থেকে প্লাগইনস.জেকোয়ারি

— প্রোজেক্ট /

@ জিকিমোনকি, আপনি কি প্লাগইনটি টানলেন? এই পৃষ্ঠায় একটি ডুপ লিঙ্কটি স্রেফ অনুসরণ করেছে, এবং ভেবেছি আমার একটি চেহারা আছে তবে jQuery.com আপনার সাইটে ফিরে আসার লিঙ্কগুলি 404।

— ডেভিড বলেছেন মনিকা

দ্রষ্টব্য: আমি দেখতে পেয়েছি যে কোনও কারণে এই প্লাগইনটি কেবল তখনই কাজ করে যখন উপরের উদাহরণে div ('('। Jtextfill ')) মূল ডকুমেন্টের অংশ হয়। দেখে মনে হচ্ছে। ডিভিটি অন্যান্য ডিভের মধ্যে এমবেড করা অবস্থায় শূন্যটি ফিরে আসে।

— জয়েশ

সেই লুপটিতে থাকা "সময়" রেখাটি আমার কাছে ভুল দেখাচ্ছে - "||" এর চারপাশে বন্ধনী থাকা উচিত subexpression। এটি এখন যেভাবে লেখা হয়েছে, ফন্টের আকারের ন্যূনতমটি কেবল তখন প্রস্থের উচ্চতা না হলেও চেক করা হয়।

— পয়েন্টি

এই পদ্ধতিরটি খুব ধীর, প্রতিবার ফন্টের আকার পরিবর্তন করলে এর জন্য উপাদানটি পুনরায় রেন্ডার করা প্রয়োজন। এটি করার আরও ভাল উপায়ের জন্য আমার উত্তরটি পরীক্ষা করুন।

— হাফম্যান

Answer 2

খারাপ পারফরম্যান্সের কারণে পর্যাপ্ত পর্যাপ্ত হওয়ার জন্য আগের কোনও সমাধান আমি পাইনি, তাই আমি নিজের তৈরি করেছি যা লুপিংয়ের পরিবর্তে সহজ গণিত ব্যবহার করে। সমস্ত ব্রাউজারে পাশাপাশি কাজ করা উচিত।

এই পারফরম্যান্স পরীক্ষার কেস অনুসারে এটি এখানে আরও দ্রুত সমাধান পাওয়া গেলে আরও দ্রুত।

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier-0.1));
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && newSize > maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
        });
    };
})(jQuery);

আপনি যদি অবদান রাখতে চান তবে আমি এটিকে জিস্টে যুক্ত করেছি ।

Comments

@ জন, ধন্যবাদ! আপনি ঠিক বলেছেন যে আমার স্ক্রিপ্ট একাধিক লাইন করে না, তবে আবারও ওপি বিশেষভাবে সেটির জন্য অনুরোধ করে নি যাতে আপনার অনুমানটি ভুল হতে পারে। এছাড়াও, এই জাতীয় আচরণটি ইমো তৈরি করে না। আমি অনুমান করি যে মাল্টি-লাইন সমর্থন যুক্ত করার সর্বোত্তম উপায়টি হ'ল শব্দের পরিমাণের উপর ভিত্তি করে স্ট্রিংটি বিভক্ত করা এবং তারপরে উপরের স্ক্রিপ্টের সাথে প্রতিটি অংশ গণনা করা এবং এটি সম্ভবত যাইহোক দ্রুততর হবে।

— mekwall

@ জন, আমি মাল্টলাইন পাঠ্যফিল দিয়ে কিছুটা প্রায় খেললাম এবং এই সমাধানটি শেষ করেছি । বালির ঝড়ের পদ্ধতি সম্ভবত আরও নির্ভুল তবে এটি দ্রুততর;)

— মেকওয়াল

এখানে ন্যূনতম ফন্টের আকারের পাশাপাশি একটি সর্বাধিক সংস্করণ রয়েছে: gist.github.com/1714284

— জেস টেলফোর্ড

নিবন্ধন করুন আমার সমাধানটি .css("font-size")লুপে ডাকে না। আপনি কোথা থেকে পেতে পারেন? আমার সলিউশনটি সম্ভবত দ্রুততর কারণ এটি আপনার প্লাগিনে যোগ করা কোনও অভিনব জিনিস নেই। আপনি আপনার প্লাগইনটি জেএসপিআইপি-এ যুক্ত করতে স্বাগতম এবং আমরা দেখতে পাবো কোনটি দ্রুততম;)

— মেকওয়াল

@ মার্কাসএকওয়াল ওহ দুঃখিত, কোনও কারণে আমি সেখানে কিছুক্ষণ লুপ দেখতে পেলাম। আপনার দৃষ্টিভঙ্গিটি আমার নিজের মতো এবং আসলে আমার প্লাগইনটি কিছুটা ধীরে ধীরে হবে কারণ আমার প্লাগইন কিছু অন্যান্য স্টাফও করে (যেমন উচ্চতা এবং প্রস্থ উভয়ই ফিট করার জন্য সামঞ্জস্য করা, পাঠ্য এবং কিছু অন্যান্য বিকল্পকে কেন্দ্রীভূত করে), এটি গুরুত্বপূর্ণ নয়, সত্যই ধীর অংশ একটি লুপের ভিতরে .css ফাংশন কল করছে।

— হফম্যান

Answer 3

আমি এই উত্তরটির জন্য মাঝে মধ্যে যতটা আনন্দ পেয়েছি তা যতটা ভালবাসি (ধন্যবাদ!), এটি সত্যিই এই সমস্যার সবচেয়ে বড় পন্থা নয়। দয়া করে এখানে অন্য কিছু দুর্দান্ত উত্তরগুলি দেখুন, বিশেষত যেগুলি লুপ ছাড়াই সমাধান পেয়েছে।

---

তবুও, রেফারেন্সের জন্য, এখানে আমার মূল উত্তরটি দেওয়া হয়েছে :

<html>
<head>
<style type="text/css">
    #dynamicDiv
    {
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
    }
</style>

<script type="text/javascript">
    function shrink()
    {
        var textSpan = document.getElementById("dynamicSpan");
        var textDiv = document.getElementById("dynamicDiv");

        textSpan.style.fontSize = 64;

        while(textSpan.offsetHeight > textDiv.offsetHeight)
        {
            textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
        }
    }
</script>

</head>
<body onload="shrink()">
    <div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>

---

এবং এখানে ক্লাস সহ একটি সংস্করণ রয়েছে :

<html>
<head>
<style type="text/css">
.dynamicDiv
{
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
}
</style>

<script type="text/javascript">
    function shrink()
    {
        var textDivs = document.getElementsByClassName("dynamicDiv");
        var textDivsLength = textDivs.length;

        // Loop through all of the dynamic divs on the page
        for(var i=0; i<textDivsLength; i++) {

            var textDiv = textDivs[i];

            // Loop through all of the dynamic spans within the div
            var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];

            // Use the same looping logic as before
            textSpan.style.fontSize = 64;

            while(textSpan.offsetHeight > textDiv.offsetHeight)
            {
                textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
            }

        }

    }
</script>

</head>
<body onload="shrink()">
    <div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>

Comments

আমি offsetWidthtextSpan.style.fontSize = size+"px";

— এটির

অবশ্যই '+ "px"' প্রয়োজনীয়।

— সানুন ধম্মিক

@ ইডানশেচার দীর্ঘ, দীর্ঘ অপেক্ষার জন্য দুঃখিত! একটি উদাহরণ যুক্ত!

— আক্রমণ করুন

ধন্যবাদ, জীবন রক্ষাকারী! আমি jQuery সম্পর্কে অবগত নই, তাই আমি আপনার সমাধানটি

— দিয়েছি

Answer 4

অন্যান্য উত্তরগুলির বেশিরভাগ ফন্টের আকার হ্রাস করতে লুপ ব্যবহার করে যতক্ষণ না এটি ডিভের সাথে ফিট করে, এটি পৃষ্ঠার জন্য প্রতিটি ধরণের ফন্টের আকার পরিবর্তন করার সাথে সাথে উপাদানটিকে পুনরায় রেন্ডার করা দরকার slow শেষ পর্যন্ত আমাকে এটিকে এমনভাবে সঞ্চালন করতে আমার নিজস্ব অ্যালগরিদম লিখতে হয়েছিল যা আমাকে ব্যবহারকারী ব্রাউজারকে হিমায়িত না করে সময়ে সময়ে এর বিষয়বস্তু আপডেট করতে দেয়। আমি আরও কিছু কার্যকারিতা যুক্ত করেছি (টেক্সট ঘোরানো, প্যাডিং যোগ করা) এবং এটি একটি jQuery প্লাগইন হিসাবে প্যাকেজ করেছি, আপনি এটি এখানে পেতে পারেন:

https://github.com/DanielHoffmann/jquery-bigtext

সহজভাবে কল করুন

$("#text").bigText();

এবং এটি আপনার ধারকটিতে পুরোপুরি ফিট হবে।

এটি এখানে কর্মে দেখুন:

http://danielhoffmann.github.io/jquery-bigtext/

আপাতত এর কিছু সীমাবদ্ধতা রয়েছে, ডিভের অবশ্যই একটি নির্দিষ্ট উচ্চতা এবং প্রস্থ থাকতে হবে এবং এটি একাধিক লাইনে পাঠ্য মোড়কে সমর্থন করে না।

আমি সর্বাধিক ফন্ট-আকার সেট করার জন্য একটি বিকল্প পেয়ে কাজ করব।

সম্পাদনা: আমি প্লাগইনটিতে আরও কিছু সমস্যা পেয়েছি, এটি স্ট্যান্ডার্ড একের পাশাপাশি অন্য বাক্স-মডেলটি পরিচালনা করে না এবং ডিভের মার্জিন বা সীমানা থাকতে পারে না। আমি এটিতে কাজ করব।

সম্পাদনা 2: আমি এখন সেই সমস্যাগুলি এবং সীমাবদ্ধতাগুলি ঠিক করেছি এবং আরও বিকল্প যুক্ত করেছি। আপনি সর্বাধিক ফন্ট-আকার সেট করতে পারেন এবং আপনি প্রস্থ, উচ্চতা বা উভয়ই ব্যবহার করে হরফ-আকার সীমাবদ্ধ করতে বেছে নিতে পারেন। আমি মোড়কের উপাদানটিতে সর্বোচ্চ-প্রস্থ এবং সর্বাধিক-উচ্চতার মানগুলি গ্রহণ করার জন্য কাজ করব।

সম্পাদনা 3: আমি প্লাগইনটি 1.2.0 সংস্করণে আপডেট করেছি। কোড এবং নতুন বিকল্পগুলিতে প্রধান পরিচ্ছন্নতা (উল্লম্বআলাইন, অনুভূমিকএলাইন, টেক্সটআলাইন) এবং স্প্যান ট্যাগের অভ্যন্তরীণ উপাদানগুলির জন্য সমর্থন (যেমন লাইন-ব্রেক বা ফন্ট-দুর্দান্ত আইকন))

Comments

আমি ভাবছি কেন একাধিক লাইনে পাঠ্য মোড়কে সমর্থন করা যায় না?

— মনীষ সাপারিয়া

@ মনিষ্প সাপরিয়া এটি সমর্থিত, তবে আপনাকে নিজেরাই লাইন ব্রেক (বিআর ট্যাগ) যুক্ত করতে হবে। আমি স্বয়ংক্রিয় পাঠ্য মোড়কে সমর্থন না করার কারণ হ'ল এটি দ্রুত করা (একাধিকবারের পরিবর্তে কেবলমাত্র দু'বার ফন্টের আকার পরিবর্তন করা) আমাকে এই ধারণাটি তৈরি করা দরকার যে পাঠ্যটি শব্দের মধ্যে আবৃত হবে না। আমার প্লাগইনটি যেভাবে কাজ করে তা হ'ল ফন্ট-আকারকে 1000px এ সেট করে তারপরে পাঠ্যের সাথে টেক্সটটির তুলনা করা আকারের ফ্যাক্টরটি দেখুন, আমি তারপরে একই ফ্যাক্টরের সাহায্যে ফন্টের আকারকে হ্রাস করব। সাধারণ পাঠ্য মোড়কে সমর্থন করার জন্য আমাকে ধীর পদ্ধতির ব্যবহার করতে হবে (ফন্টের আকার একাধিক বার হ্রাস করতে হবে) যা খুব ধীর slow

— হফম্যান

হে! স্ট্যাকওভারফ্লোতে যেহেতু এখানে কোনও ব্যক্তিগত বার্তা নেই, তাই আপনার উত্তর সম্পর্কে মন্তব্য করে আপনাকে জিজ্ঞাসা করতে হবে। আমি আপনার jQuery প্লাগইনটি পছন্দ করি তবে এটি আমার জন্য কাজ করতে পারি না। আমি সঠিক jQuery লাইব্রেরি অন্তর্ভুক্ত করেছি, আপনার প্লাগইন ডাউনলোড করেছি এবং এটি অন্তর্ভুক্ত করেছি। এখন যখন আমি চেষ্টা করে এটি ব্যবহার করি তখন কনসোলটি বলে যে 'আনক্যাক্ট টাইপ এরির: অপরিজ্ঞাত কোনও ফাংশন নয়'। এটি কি এমন কিছু যা আপনার সাথে পরিচিত? আপনি এই স্থির করা কি জানেন কিভাবে? ধন্যবাদ

— গস্ট ভ্যান ডি ওয়াল

@ গুস্তভান্ডেওয়াল জ্যাকেই লাইব্রেরি অন্তর্ভুক্ত করার পরে আপনাকে প্লাগইনটি অন্তর্ভুক্ত করতে হবে

— হফম্যান

আমি করেছিলাম. আমি <স্ক্রিপ্ট টাইপ = "পাঠ্য / জাভাস্ক্রিপ্ট" src = "কোড. jquery.com/jquery-2.1.1.min.js"></… src" js / jquery-bigtext.js "> </ স্ক্রিপ্ট পেয়েছি > ব্রাউজারটি আমাকে জানায় না যে এটি jQuery লাইব্রেরি বা প্লাগইন লোড করতে পারে না।

— গুস্ট ভ্যান ডি ওয়াল

Answer 5

এটি গিকিমনকি উপরে কিছু পোস্টিমিডেন্ট সহ পোস্ট করেছে তার উপর ভিত্তি করে।

; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter ([e-mail])
* @version 0.2
*/
$.fn.textfill = function(options) {

    options = jQuery.extend({
        maxFontSize: null,
        minFontSize: 8,
        step: 1
    }, options);

    return this.each(function() {

        var innerElements = $(this).children(':visible'),
            fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
            maxHeight = $(this).height(),
            maxWidth = $(this).width(),
            innerHeight,
            innerWidth;

        do {

            innerElements.css('font-size', fontSize);

            // use the combined height of all children, eg. multiple <p> elements.
            innerHeight = $.map(innerElements, function(e) {
                return $(e).outerHeight();
            }).reduce(function(p, c) {
                return p + c;
            }, 0);

            innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
            fontSize = fontSize - options.step;

        } while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);

    });

};

})(jQuery);

Comments

পার্থক্যটি হ'ল এটি একাধিক শিশু উপাদান গ্রহণ করতে পারে এবং এটি অ্যাকাউন্টে প্যাডিং লাগে। জাভাস্ক্রিপ্ট এবং সিএসএসের মিশ্রণ এড়াতে, ফন্ট-আকারকে ডিফল্ট সর্বাধিক আকার হিসাবে ব্যবহার করে।

— বালুচর

এটি দুর্দান্ত, তবে আমি কীভাবে এটি ব্যবহার করব? আমি $ ('। বহিরাগত') করি। পাঠ্যপুস্তক (); এবং আমি কোনও পরিবর্তন পাই না।

— ড্রু বেকার 21

ধন্যবাদ, এটি একটি খুব সুন্দর বাস্তবায়ন। একটি জিনিস আমি লক্ষ্য করেছিলাম: আপনি যদি খুব দীর্ঘ পাঠ্য স্ট্রিং এবং খুব সংকীর্ণ ধারকগুলির সাথে কাজ করে থাকেন তবে পাঠ্যের স্ট্রিংটি ধারকটির বাইরে চলে যাবে, তবে বাইরের প্রশস্ততা এখনও এমনভাবে গণনা করা হবে যেন তা হয় না। টস "শব্দ-মোড়ানো: বিরতি-শব্দ;" আপনার ধারকটির জন্য সিএসএসে এটি সমস্যার সমাধান করবে।

— জন

Answer 6

এখানে একটি উন্নত লুপিং পদ্ধতি যা বাইনারি অনুসন্ধান ব্যবহার করে সর্বাধিক সম্ভাব্য আকার খুঁজে বের করতে পারে যা সম্ভব কয়েকটি পদক্ষেপে পিতামাতার সাথে ফিট করে (এটি একটি স্থির ফন্টের আকারের ধাপের চেয়ে আরও দ্রুত এবং আরও সঠিক)। কার্য সম্পাদনের জন্য কোডটিও বেশ কয়েকটি উপায়ে অনুকূলিত হয়েছে।

ডিফল্টরূপে, 10 বাইনারি অনুসন্ধান পদক্ষেপগুলি সম্পাদন করা হবে, যা সর্বোত্তম আকারের 0.1% এর মধ্যে পাবেন। আপনি পরিবর্তে সর্বোত্তম আকারের 1/2 ^ N এর মধ্যে কিছু মান N এর জন্য numIter সেট করতে পারেন।

এটি একটি সিএসএস নির্বাচকের সাথে কল করুন, যেমন: fitToParent('.title-span');

/**
 * Fit all elements matching a given CSS selector to their parent elements'
 * width and height, by adjusting the font-size attribute to be as large as
 * possible. Uses binary search.
 */
var fitToParent = function(selector) {
    var numIter = 10;  // Number of binary search iterations
    var regexp = /\d+(\.\d+)?/;
    var fontSize = function(elem) {
        var match = elem.css('font-size').match(regexp);
        var size = match == null ? 16 : parseFloat(match[0]);
        return isNaN(size) ? 16 : size;
    }
    $(selector).each(function() {
        var elem = $(this);
        var parentWidth = elem.parent().width();
        var parentHeight = elem.parent().height();
        if (elem.width() > parentWidth || elem.height() > parentHeight) {
            var maxSize = fontSize(elem), minSize = 0.1;
            for (var i = 0; i < numIter; i++) {
                var currSize = (minSize + maxSize) / 2;
                elem.css('font-size', currSize);
                if (elem.width() > parentWidth || elem.height() > parentHeight) {
                    maxSize = currSize;
                } else {
                    minSize = currSize;
                }
            }
            elem.css('font-size', minSize);
        }
    });
};

Comments

এই বিকল্পটি ভালবাসুন। আমি পরামিতি যোগ করার জন্য পরিবর্তিত vAlignএবং padding। vAlign == trueনির্বাচিত উপাদানটির পিতা-মাতার উচ্চতার লাইন-উচ্চতা নির্ধারণ করে। প্যাডিং উত্তীর্ণ হওয়া মান দ্বারা চূড়ান্ত আকার হ্রাস করে। এটি 5 এ ডিফল্ট হয়েছে I আমি মনে করি এটি দেখতে খুব সুন্দর দেখাচ্ছে।

— ডেভিলের অ্যাডভোকেট

Answer 7

আমি AngularJS এর ​​জন্য একটি নির্দেশিকা তৈরি করেছি - GeekyMonkey এর উত্তর দ্বারা প্রচুরভাবে অনুপ্রাণিত হয়েছিল তবে jQuery নির্ভরতা ছাড়াই।

ডেমো: http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p= পূর্বরূপ

মার্কআপ

<div class="fittext" max-font-size="50" text="Your text goes here..."></div>

নির্দেশিকা

app.directive('fittext', function() {

  return {
    scope: {
      minFontSize: '@',
      maxFontSize: '@',
      text: '='
    },
    restrict: 'C',
    transclude: true,
    template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
    controller: function($scope, $element, $attrs) {
      var fontSize = $scope.maxFontSize || 50;
      var minFontSize = $scope.minFontSize || 8;

      // text container
      var textContainer = $element[0].querySelector('.textContainer');

      angular.element(textContainer).css('word-wrap', 'break-word');

      // max dimensions for text container
      var maxHeight = $element[0].offsetHeight;
      var maxWidth = $element[0].offsetWidth;

      var textContainerHeight;
      var textContainerWidth;      

      var resizeText = function(){
        do {
          // set new font size and determine resulting dimensions
          textContainer.style.fontSize = fontSize + 'px';
          textContainerHeight = textContainer.offsetHeight;
          textContainerWidth = textContainer.offsetWidth;

          // shrink font size
          var ratioHeight = Math.floor(textContainerHeight / maxHeight);
          var ratioWidth = Math.floor(textContainerWidth / maxWidth);
          var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
          fontSize -= shrinkFactor;

        } while ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize);        
      };

      // watch for changes to text
      $scope.$watch('text', function(newText, oldText){
        if(newText === undefined) return;

        // text was deleted
        if(oldText !== undefined && newText.length < oldText.length){
          fontSize = $scope.maxFontSize;
        }
        resizeText();
      });
    }
  };
});

Comments

একটি সমস্যা যা আমি এটির সাথে করছি তা হ'ল এটি পাঠ্যটিকে আসলে উপাদানটিকে নির্ধারিত করার resizeTextআগেই কল করা হয়েছিল ng-bind, ফলস্বরূপ এটি বর্তমান পাঠ্যের পরিবর্তে পূর্ববর্তী পাঠ্যের উপর ভিত্তি করে আকার পরিবর্তন করে। এটি উপরের ডেমোতে খুব খারাপ নয় যেখানে এটি ব্যবহারকারীদের টাইপের হিসাবে বারবার বলা হয়, তবে যদি এটি একবারে নাল থেকে আসল মান (একমুখী বাঁধাইয়ের মতো) দিকে যায় তবে এটি সর্বোচ্চ আকারে থেকে যায়।

— মিরাল

Answer 8

আমি উপরের স্ক্রিপ্টটি মার্কাস একওয়াল থেকে কাঁটাচামচ করেছি: https://gist.github.com/3945316 এবং এটি আমার পছন্দগুলিতে টুইট করেছি, উইন্ডোটি পুনরায় আকার দেওয়ার সময় এটি এখন আগুন ধরিয়ে দেয়, যাতে শিশুটি সর্বদা তার ধারকটিকে ফিট করে। আমি নীচের স্ক্রিপ্ট রেফারেন্স জন্য পেস্ট করেছি।

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this);
            function resizefont(){
                var parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier));
                ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
            }
            $(window).resize(function(){
                resizefont();
            });
            resizefont();
        });
    };
})(jQuery);

Comments

এটি দুর্দান্ত যে আপনি প্রশ্নকারীকে সাহায্য করার চেষ্টা করছেন। তবে, শুধুমাত্র একটি লিঙ্ক দিয়ে উত্তর রেখে দেওয়া কিছু ক্ষেত্রে ক্ষতিকারক হতে পারে। আপনার উত্তরটি এখন ভাল, লিঙ্কটি যদি কখনও মারা যায় তবে আপনার উত্তরটির মান হারাবে। সুতরাং আপনি যদি আপনার উত্তরের নিবন্ধ থেকে সামগ্রীর সংক্ষিপ্তসারটি করেন তবে এটি সহায়ক হবে। স্পষ্টতার জন্য এই প্রশ্নটি দেখুন ।

— কোডি গুলডনার

Answer 9

এখানে আমার ওপি-র উত্তরের পরিবর্তন।

সংক্ষেপে, অনেক লোক যারা এইটিকে অনুকূল করার চেষ্টা করেছিল তারা অভিযোগ করেছিল যে একটি লুপ ব্যবহৃত হচ্ছে was হ্যাঁ, লুপগুলি ধীর হতে পারে তবে অন্যান্য পন্থাগুলি ভুল হতে পারে।

অতএব, আমার পন্থা সেরা ফন্টের আকারটি সন্ধান করতে বাইনারি অনুসন্ধান ব্যবহার করে :

$.fn.textfill = function()
{
    var self = $(this);
    var parent = self.parent();

    var attr = self.attr('max-font-size');
    var maxFontSize = parseInt(attr, 10);
    var unit = attr.replace(maxFontSize, "");

    var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
    var fontSize = (maxFontSize + minFontSize) / 2;

    var maxHeight = parent.height();
    var maxWidth = parent.width();

    var textHeight;
    var textWidth;

    do
    {
        self.css('font-size', fontSize + unit);

        textHeight = self.height();
        textWidth = self.width();

        if(textHeight > maxHeight || textWidth > maxWidth)
        {
            maxFontSize = fontSize;
            fontSize = Math.floor((fontSize + minFontSize) / 2);
        }
        else if(textHeight < maxHeight || textWidth < maxWidth)
        {
            minFontSize = fontSize;
            fontSize = Math.floor((fontSize + maxFontSize) / 2);
        }
        else
            break;

    }
    while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);

    self.css('font-size', fontSize + unit);

    return this;
}

function resizeText()
{
  $(".textfill").textfill();
}

$(document).ready(resizeText);
$(window).resize(resizeText);

এটি উপাদানকে ন্যূনতম এবং সর্বাধিক ফন্ট নির্দিষ্ট করার অনুমতি দেয়:

<div class="container">
    <div class="textfill" min-font-size="10px" max-font-size="72px">
        Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
    </div>
</div>

তদুপরি, এই অ্যালগরিদম এককবিহীন। আপনি উল্লেখ করতে পারেন em, rem,% , ইত্যাদি এবং তার চূড়ান্ত ফলাফল জন্য ব্যবহার করবে।

এখানে ফিডল: https://jsfiddle.net/fkhqhnqe/1/

Answer 10

আমার ওয়েবসাইটটিতে আমার ঠিক একই সমস্যা ছিল। আমার একটি পৃষ্ঠা রয়েছে যা একটি প্রজেক্টরে, দেয়াল, বড় পর্দায় প্রদর্শিত হয় ..

যেহেতু আমি আমার ফন্টের সর্বাধিক আকারটি জানি না, আমি @ গিকমনকি উপরের প্লাগইনটি পুনরায় ব্যবহার করেছি তবে ফন্টসাইজ বাড়িয়েছি:

$.fn.textfill = function(options) {
        var defaults = { innerTag: 'span', padding: '10' };
        var Opts = jQuery.extend(defaults, options);

        return this.each(function() {
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var fontSize = parseFloat(ourText.css('font-size'),10);
            var doNotTrepass = $(this).height()-2*Opts.padding ;
            var textHeight;

            do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                fontSize = fontSize + 2;
            } while (textHeight < doNotTrepass );
        });
    };

Comments

এই পৃষ্ঠায় একমাত্র প্লাগইন হওয়ার জন্য +1 যা আসলে আমার পক্ষে কাজ করেছিল!

— স্কাইবন্ডসর

এই প্লাগইনটি আমার জন্য পৃষ্ঠাটি ক্র্যাশ করে।

— জেজেন টমাস

Answer 11

এখানে স্বীকৃত উত্তরের একটি সংস্করণ যা একটি মিনিফন্টসাইজ প্যারামিটারও নিতে পারে।

(function($) {
    /**
    * Resizes an inner element's font so that the inner element completely fills the outer element.
    * @author Russ Painter [e-mail]
    * @author Blake Robertson 
    * @version 0.2 -- Modified it so a min font parameter can be specified.
    *    
    * @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
    * @return All outer elements processed
    * @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
    */
    $.fn.textfill = function(options) {
        var defaults = {
            maxFontPixels: 40,
            minFontPixels: 10,
            innerTag: 'span'
        };
        var Opts = jQuery.extend(defaults, options);
        return this.each(function() {
            var fontSize = Opts.maxFontPixels;
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var maxHeight = $(this).height();
            var maxWidth = $(this).width();
            var textHeight;
            var textWidth;
            do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                textWidth = ourText.width();
                fontSize = fontSize - 1;
            } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > Opts.minFontPixels);
        });
    };
})(jQuery);

Comments

ধন্যবাদ, যদিও আমি মনে করি আপনি কোডের শীর্ষে একটি সেমিকোলন পেয়েছেন যা সেখানে হওয়া উচিত নয়

— প্যাট্রিক মুর

Answer 12

আপনি FitText.js ( github পৃষ্ঠা) ব্যবহার করতে পারেনএই সমস্যাটি সমাধান করার ) । টেক্সটফিলের তুলনায় সত্যিই ছোট এবং দক্ষ। লুপ এবং ফিট টেক্সট না করে টেক্সটফিল একটি ব্যয়বহুল ব্যবহার করে।

এছাড়াও ফিটটেক্সট আরও নমনীয় (আমি এটিকে খুব বিশেষ প্রয়োজনীয়তা সহ প্রাইকেটিতে ব্যবহার করি এবং চ্যাম্পের মতো কাজ করি!)।

এইচটিএমএল:

<div class="container">
  <h1 id="responsive_headline">Your fancy title</h1>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

আপনি এটিতে বিকল্পগুলি সেট করতে পারেন:

<script>
  jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>

সিএসএস:

#responsive_headline {
   width: 100%;
   display: block;
}

এবং আপনার যদি এটির প্রয়োজন হয় তবে ফিটটেক্সটে একটি নো- জিক্যুরি সংস্করণও রয়েছে ।

Comments

Fittext অ্যাকাউন্টে উচ্চতা গ্রহণ করে?

— মনীষ সাপরিয়া

পছন্দ করেছেন এটি কেবল ধারক প্রস্থটি 10 ​​দ্বারা বিভক্ত করে এবং এটি হরফ-আকার হিসাবে ব্যবহার করে।

— ড্যান এইচ

Answer 13

সম্পাদনা: এই কোডটি এইচটিএমএল 5 ভিডিওর শীর্ষে নোটগুলি দেখানোর জন্য ব্যবহৃত হয়েছিল। ভিডিওটি পুনরায় আকার দেওয়ার সময় এটি ফ্লাইতে হরফের আকার পরিবর্তন করে (যখন ব্রাউজার উইন্ডোটি পুনরায় আকার দেওয়া হয়) সরাসরি।

অনুরোধ অনুসারে আমি এমন কিছু কোড নিক্ষেপ করব যা আমি এটি অর্জন করতে ব্যবহার করেছিলাম। (এইচটিএমএল 5 ভিডিওর মাধ্যমে পাঠ্য বাক্সগুলি)) কোডটি অনেক আগে লেখা হয়েছিল এবং আমি খুব স্পষ্টভাবে মনে করি এটি বেশ অগোছালো। যেহেতু প্রশ্নের উত্তর ইতিমধ্যে উত্তর পেয়েছে এবং একটি উত্তর ইতিমধ্যে স্বীকৃত হয়েছে অনেক দিন আগে আমি এটি পুনরায় লেখার জন্য বিরক্ত করি না। তবে যদি কেউ এটিকে কিছুটা সহজ করতে চায় তবে আপনি স্বাগত অপেক্ষা আরও বেশি!

// Figure out the text size:
var text = val['text'];
var letters = text.length;
var findMultiplier = function(x) { // g(x)
    /* By analysing some functions with regression, the resulting function that
     gives the best font size with respect to the number of letters and the size
     of the note is:
     g(x) = 8.3 - 2.75x^0.15 [1 < x < 255]
     f(x) = g(letters) * (x / 1000)^0.5
     Font size = f(size)
     */
    return 8.3 - 2.75 * Math.pow(x, 0.15);
};

var findFontSize = function(x) { // f(x)
    return findMultiplier(letters) * Math.pow(x / 1000, 0.5);
};

val.setFontSizeListener = function() {
    p.style.fontSize = '1px'; // So the text should not overflow the box when measuring.
    var noteStyle = window.getComputedStyle(table);
    var width = noteStyle.getPropertyValue('width');
    var height = noteStyle.getPropertyValue('height');
    var size = width.substring(0, width.length - 2) * height.substring(0, height.length - 2);
    p.style.fontSize = findFontSize(size) + 'px';
};
window.addEventListener('resize', val.setFontSizeListener);

আপনার এই নম্বরগুলি সম্ভবত ফন্ট-পরিবার থেকে ফন্ট-পরিবারে টিক করতে হবে। এটি করার একটি ভাল উপায় হ'ল জিওজেব্রা নামে একটি নিখরচায় গ্রাফ ভিজ্যুয়ালাইজার ডাউনলোড করা। পাঠ্যের দৈর্ঘ্য এবং বাক্সের আকার পরিবর্তন করুন। তারপরে আপনি ম্যানুয়ালি আকার সেট করুন। স্থায়ী সিস্টেমে ম্যানুয়াল ফলাফলগুলি প্লট করুন। তারপরে আপনি যে দুটি সমীকরণ আমি এখানে পোস্ট করেছি তা লিখুন এবং আপনি "আমার" গ্রাফটি নিজের ম্যানুয়ালি প্লট করা পয়েন্টগুলিতে ফিট না হওয়া পর্যন্ত আপনি সংখ্যাগুলি টুইট করেন ak

Answer 14

প্রস্তাবিত পুনরাবৃত্তি সমাধান দুটি ফ্রন্টে নাটকীয়ভাবে বাড়ানো যেতে পারে:

1) 1 যোগ বা বিয়োগের চেয়ে কিছু ধ্রুবক দ্বারা ফন্টের আকারকে গুণ করুন।

2) প্রথমে কোর্স ধ্রুবক ব্যবহারে শূন্য, বলুন, প্রতিটি লুপের আকার দ্বিগুণ করুন। তারপরে, কোথা থেকে শুরু করতে হবে তার মোটামুটি ধারণা দিয়ে, একই জিনিসটিকে আরও সূক্ষ্ম সমন্বয় করে বলুন, 1.1 দিয়ে গুণ করুন। পারফেকশনিস্ট যদিও আদর্শ হরফের সঠিক পূর্ণসংখ্যার পিক্সেল আকার চান তবে বেশিরভাগ পর্যবেক্ষক 100 এবং 110 পিক্সেলের মধ্যে পার্থক্যটি লক্ষ্য করেন না। আপনি যদি পারফেকশনিস্ট হন তবে তৃতীয় বারের মতো আরও সূক্ষ্ম সমন্বয় করে পুনরাবৃত্তি করুন।

একটি নির্দিষ্ট রুটিন বা প্লাগ-ইন লেখার পরিবর্তে যা সঠিক প্রশ্নের উত্তর দেয়, আমি কেবল ফিটিং ডিভিডস, স্প্যানস, চিত্রগুলি সহ টেক্সট নয়, সমস্ত ধরণের লেআউট ইস্যুগুলি পরিচালনা করার জন্য কোডের বিভিন্ন প্রকারের ধারণার উপর নির্ভর করি এবং কোডের বিভিন্নতা লিখি ,. .. প্রস্থ দ্বারা, উচ্চতা, এলাকা, ... একটি ধারক মধ্যে, অন্য উপাদান মেলে ....

এখানে একটি উদাহরণ:

  var                           nWindowH_px             = jQuery(window).height();
  var                           nWas                    = 0;
  var                           nTry                    = 5;

  do{
   nWas = nTry;
   nTry *= 2;
   jQuery('#divTitle').css('font-size' ,nTry +'px');
  }while( jQuery('#divTitle').height() < nWindowH_px );

  nTry = nWas;

  do{
   nWas = nTry;
   nTry = Math.floor( nTry * 1.1 );
   jQuery('#divTitle').css('font-size' ,nTry +'px');
  }while( nWas != nTry   &&   jQuery('#divTitle').height() < nWindowH_px );

  jQuery('#divTitle').css('font-size' ,nWas +'px');

Answer 15

এটি আমি তৈরি করেছি সবচেয়ে মার্জিত সমাধান। এটি 10 ​​টি পুনরাবৃত্তি করে বাইনারি অনুসন্ধান ব্যবহার করে। নিষ্পাপ উপায়টি ছিল কিছুক্ষণ লুপ করা এবং ফন্টের আকার 1 দ্বারা বাড়ানো যতক্ষণ না উপাদানটি ওভারফ্লো হতে শুরু করে। আপনি নির্ধারণ করতে পারেন একটি উপাদান ব্যবহার ওভারফ্লো শুরু যখন element.offsetHeight এবং element.scrollHeight । যদি স্ক্রোলহাইটটি অফসেটহাইটের চেয়ে বড় হয় তবে আপনার ফন্টের আকার খুব বড়।

বাইনারি অনুসন্ধান এর জন্য আরও ভাল অ্যালগরিদম। এটি আপনি সম্পাদনা করতে চান এমন পুনরাবৃত্তির সংখ্যা দ্বারাও সীমাবদ্ধ। কেবলমাত্র flexFont কল এবং DIV আইডি ঢুকিয়ে এটা মধ্যবর্তী ফন্টের আকার সামঞ্জস্য হবে 8px এবং 96px ।

আমি এই বিষয়টি গবেষণা এবং বিভিন্ন গ্রন্থাগার চেষ্টা করে কিছু সময় ব্যয় করেছি, তবে শেষ পর্যন্ত আমি মনে করি এটিই সবচেয়ে সহজ এবং সর্বাধিক সহজ সমাধান যা আসলে কাজ করবে।

আপনি চাইলে আপনি ব্যবহার করতে offsetWidthএবং scrollWidthএই ফাংশনটিতে উভয়ই যুক্ত করতে পারেন তা নোট করুন।

// Set the font size using overflow property and div height
function flexFont(divId) {
    var content = document.getElementById(divId);
    content.style.fontSize = determineMaxFontSize(content, 8, 96, 10, 0) + "px";
};

// Use binary search to determine font size
function determineMaxFontSize(content, min, max, iterations, lastSizeNotTooBig) {
    if (iterations === 0) {
        return lastSizeNotTooBig;
    }
    var obj = fontSizeTooBig(content, min, lastSizeNotTooBig);

    // if `min` too big {....min.....max.....}
    // search between (avg(min, lastSizeTooSmall)), min)
    // if `min` too small, search between (avg(min,max), max)
    // keep track of iterations, and the last font size that was not too big
    if (obj.tooBig) {
        (lastSizeTooSmall === -1) ?
            determineMaxFontSize(content, min / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall) :
                determineMaxFontSize(content, (min + lastSizeTooSmall) / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall);

    } else {
        determineMaxFontSize(content, (min + max) / 2, max, iterations - 1, obj.lastSizeNotTooBig, min);
    }
}

// determine if fontSize is too big based on scrollHeight and offsetHeight, 
// keep track of last value that did not overflow
function fontSizeTooBig(content, fontSize, lastSizeNotTooBig) {
    content.style.fontSize = fontSize + "px";
    var tooBig = content.scrollHeight > content.offsetHeight;
    return {
        tooBig: tooBig,
        lastSizeNotTooBig: tooBig ? lastSizeNotTooBig : fontSize
    };
}

Comments

ধন্যবাদ, এটি দুর্দান্ত দেখাচ্ছে! আমি ঠিক পাচ্ছি ReferenceError: lastSizeTooSmall is not defined। কোথাও এর সংজ্ঞা দেওয়া দরকার?

— ndbroadbent

Answer 16

আমি একই সমস্যা পেয়েছি এবং সমাধানটি মূলত ফন্ট-আকার নিয়ন্ত্রণ করতে জাভাস্ক্রিপ্ট ব্যবহার করে। কোডেপেনে এই উদাহরণটি দেখুন:

https://codepen.io/ThePostModernPlatonic/pen/BZKzVR

এটি উদাহরণস্বরূপ কেবল উচ্চতার জন্য, সম্ভবত আপনাকে প্রস্থের প্রায় কিছু লাগাতে হবে।

এটি আকার পরিবর্তন করার চেষ্টা করুন

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: tomato;" id="wrap">        
  <h1 class="quote" id="quotee" style="padding-top: 56px">Because too much "light" doesn't <em>illuminate</em> our paths and warm us, it only blinds and burns us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var multiplexador = 3;
  initial_div_height = document.getElementById ("wrap").scrollHeight;
  setInterval(function(){ 
    var div = document.getElementById ("wrap");
    var frase = document.getElementById ("quotee");
    var message = "WIDTH div " + div.scrollWidth + "px. "+ frase.scrollWidth+"px. frase \n";
    message += "HEIGHT div " + initial_div_height + "px. "+ frase.scrollHeight+"px. frase \n";           
    if (frase.scrollHeight < initial_div_height - 30){
      multiplexador += 1;
      $("#quotee").css("font-size", multiplexador); 
    }
    console.log(message);          
  }, 10);
</script>
</html>

Answer 17

আমার ভালো লেগেছে

let name = "Making statements based on opinion; back them up with references or personal experience."
let originFontSize = 15;
let maxDisplayCharInLine = 50; 
let fontSize = Math.min(originFontSize, originFontSize / (name.length / maxDisplayCharInLine));

Answer 18

কনটেন্টেবলের জন্য কেবল আমার সংস্করণটি যুক্ত করতে চেয়েছি।

$.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 50; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}

$('#inner').fitInText();

#outer {
  display: table;
  width: 100%;
}

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner" contenteditable=true>
    TEST
  </div>
</div>

Answer 19

আমি পাঠ্য সঙ্কুচিত করার জন্য লুপের ব্যবহার রোধ করার একটি উপায় খুঁজে পেয়েছি। এটি ফন্টের আকারটিকে ধারককারীর প্রস্থ এবং সামগ্রীর প্রস্থের মধ্যে হারের জন্য গুণিত করে সামঞ্জস্য করে। সুতরাং ধারকের প্রস্থটি যদি সামগ্রীর 1/3 হয় তবে ফন্টের আকারটি 1/3 হ্রাস হবে এবং ধারকটির প্রস্থ হবে will আকার বাড়ানোর জন্য, আমি কনটেন্টের চেয়ে বড় না হওয়া অবধি লুপটি ব্যবহার করেছি।

function fitText(outputSelector){
    // max font size in pixels
    const maxFontSize = 50;
    // get the DOM output element by its selector
    let outputDiv = document.getElementById(outputSelector);
    // get element's width
    let width = outputDiv.clientWidth;
    // get content's width
    let contentWidth = outputDiv.scrollWidth;
    // get fontSize
    let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
    // if content's width is bigger than elements width - overflow
    if (contentWidth > width){
        fontSize = Math.ceil(fontSize * width/contentWidth,10);
        fontSize =  fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize - 1;
        outputDiv.style.fontSize = fontSize+'px';   
    }else{
        // content is smaller than width... let's resize in 1 px until it fits 
        while (contentWidth === width && fontSize < maxFontSize){
            fontSize = Math.ceil(fontSize) + 1;
            fontSize = fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize;
            outputDiv.style.fontSize = fontSize+'px';   
            // update widths
            width = outputDiv.clientWidth;
            contentWidth = outputDiv.scrollWidth;
            if (contentWidth > width){
                outputDiv.style.fontSize = fontSize-1+'px'; 
            }
        }
    }
}

এই কোডটি আমি গিথুব https://github.com/ricardobrg/fitText/ এ আপলোড করেছি এমন একটি পরীক্ষার অংশ is

Answer 20

আমি গিকমনকি সমাধান দিয়েছিলাম তবে এটি খুব ধীর। তিনি যা করেন তা হ'ল তিনি হ'ল ফন্টের আকারকে সর্বাধিক (ম্যাক্সফন্টপিক্সেল) এবং তারপরে এটি ধারকটির ভিতরে ফিট করে কিনা তা পরীক্ষা করে fits অন্যথায় এটি 1px দ্বারা ফন্টের আকার হ্রাস করে এবং আবার চেক করে। কেবল উচ্চতার জন্য পূর্ববর্তী ধারকটি কেন পরীক্ষা করে সেই মানটি জমা দেবেন না? (হ্যাঁ, আমি জানি কেন, তবে আমি এখন একটি সমাধান করেছি, যা কেবলমাত্র উচ্চতায় কাজ করে এবং একটি মিনিট / সর্বোচ্চ বিকল্পও রয়েছে)

এখানে একটি আরও দ্রুত সমাধান:

var index_letters_resize;
(index_letters_resize = function() {
  $(".textfill").each(function() {
    var
      $this = $(this),
      height = Math.min( Math.max( parseInt( $this.height() ), 40 ), 150 );
    $this.find(".size-adjust").css({
      fontSize: height
    });
  });
}).call();

$(window).on('resize', function() {
  index_letters_resize();
);

এবং এটি এইচটিএমএল হবে:

<div class="textfill">
  <span class="size-adjust">adjusted element</span>
  other variable stuff that defines the container size
</div>

আবার: এই সমাধানটি কেবল ধারকটির উচ্চতা পরীক্ষা করে। এই কারণে এই ফাংশনটি পরীক্ষা করতে হবে না, যদি উপাদানটি ভিতরে ফিট করে। তবে আমি একটি ন্যূনতম / সর্বোচ্চ মান (40 মিনিট, 150 ম্যাক্স) প্রয়োগও করেছি তাই আমার জন্য এটি পুরোপুরি সূক্ষ্মভাবে কাজ করে (এবং উইন্ডো আকার পরিবর্তন করতেও কাজ করে)।

Answer 21

এই সমাধানটির আরও একটি সংস্করণ এখানে:

shrinkTextInElement : function(el, minFontSizePx) {
    if(!minFontSizePx) {
        minFontSizePx = 5;
    }
    while(el.offsetWidth > el.parentNode.offsetWidth || el.offsetHeight > el.parentNode.offsetHeight) {

        var newFontSize = (parseInt(el.style.fontSize, 10) - 3);
        if(newFontSize <= minFontSizePx) {
            break;
        }

        el.style.fontSize = newFontSize + "px";
    }
}