প্রতিক্রিয়াশীল ওয়েব ডিজাইনে কাঙ্ক্ষিত লাইন বিরতি মোকাবেলার জন্য সেরা অনুশীলনগুলি কী কী?

Question

আমি বিক্রয় বা ইমেলের জন্য সাধারণ একক পৃষ্ঠার ওয়েব আইটেমগুলির একটি দুর্দান্ত ব্যবসায়ের নকশা করি। আমি প্রায়শই দেখতে পাই যে আমি বিভিন্ন শিরোনাম এবং আমার পছন্দসই লাইনটি বিভিন্ন মিডিয়া প্রস্থে বিভক্ত হয়ে পড়েছি issues

উদাহরণস্বরূপ, আমার যেমন শিরোনাম থাকতে পারে:

কাটা রুটি থেকে আমাদের নতুন জিনিসামাবব সেরা জিনিস!

লাইন বিরতি একেবারে মনোযোগ না দিয়ে লাইন এইভাবে বিরতি:

কাটা রুটি থেকে আমাদের নতুন জিনিসামাবব সেরা জিনিস !

পুরো ওয়েব আকারে, আমি "" এর পরে লাইনটি ভাঙ্গতে চাই। দুটি লাইন তৈরি করা হচ্ছে।

কাটা রুটি থেকে আমাদের নতুন জিনিসামাবব সেরা জিনিস!

মাঝারি প্রস্থের স্ক্রিনের জন্য, আমি দু'বার বিরতি করতাম:

কাটা রুটি থেকে আমাদের নতুন জিনিসামাবব
সেরা জিনিস
!

এমনকি সংকীর্ণ পর্দার জন্য, আমি "নতুন" পরে, "জিনিসামাবব" পরে এবং "জিনিস" এর পরে ব্রেক করব। চারটি লাইন তৈরি করা হচ্ছে।

কাটা রুটি থেকে আমাদের নতুন
জিনিসামাবব
সেরা জিনিস
!

আমি সত্যিই ব্রেক ট্যাগগুলি ব্যবহার করতে চাই না ( <br>) কারণ এটি হার্ড আকারকে সব আকারে সেট করে। এখনও অবধি আমি বিভিন্ন h1- h5ট্যাগগুলির জন্য মিডিয়া ক্যোয়ারী এবং প্রস্থ শতাংশের ব্যবহার করেছি যাতে ট্যাগের প্রস্থ বিরতিতে বাধ্য হয়। তবে এটি আমার কাছে "হ্যাকি" বলে মনে হয় (এটি প্রকৃত পাঠ্যের উপর ভিত্তি করে কখনও কখনও খুব স্বভাবগতও হয় )।

এইচটিএমএল এ হার্ড কোডিং না করে লাইন ব্রেকগুলি নিয়ন্ত্রণ করার সর্বোত্তম উপায় কী?

Answer 1

আমি কেবল এই ভিত্তিতে এটি পরামর্শ দিচ্ছি যে এটি অনুচ্ছেদের পরিবর্তে পাঠ্যের সংক্ষিপ্ত স্নিপেটগুলির জন্য ব্যবহৃত হয়।

শিরোনামগুলির বিন্যাসটি যথাযথ সীমাবদ্ধতার মধ্যে যথাসম্ভব নিয়ন্ত্রণ করা উচিত । জাভাস্ক্রিপ্ট বা অতিরিক্ত অপ্রয়োজনীয় উপাদানগুলি বেশ "যুক্তিসঙ্গত সীমা" নয় ।

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

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

আপনার নিজস্ব শব্দের নির্দিষ্ট সেটে কিছু দ্রুত পরীক্ষার মাধ্যমে লিঙ্ক দেওয়ার জন্য সেরা শব্দ প্রকাশ করা উচিত to

এই প্রশ্নের উদাহরণের জন্য এইচটিএমএল দেখতে পারে:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

এখানে আসলে কোনও সিএসএসের প্রয়োজন নেই। আমি যে উদাহরণটি তৈরি করেছি তাতে সিএসএস কেবল মজাদার জন্য।

---

সংক্ষেপে, এই পদ্ধতির কীটি যেখানে পাঠ্যকে ভাঙ্গার অনুমতি দেয় সেখানে সীমাবদ্ধ করে দিচ্ছে।

---

প্রশ্নটি পুনরায় পড়ার পরে, আমি বুঝতে পারি যে প্রয়োজনীয়তাগুলি আমি যথেষ্টভাবে পূরণ করি নি। এই সুনির্দিষ্ট ক্ষেত্রে এবং এই ধারণাটি নিয়ে যে অন্য পৃষ্ঠাগুলি একই মনোযোগের প্রয়োজন রয়েছে, আমি <br>সম্পূর্ণ প্রস্থের ব্রেকআপপয়েন্টের জন্য একটি একক সংজ্ঞায়িত করব । আমি তখন শিরোনামের সবচেয়ে আদর্শ জায়গায় প্রতিটি পৃষ্ঠায় একই বর্গ পুনরায় ব্যবহার করব।

<br>মিডিয়া প্রশ্নের ব্যবহারের সাথে এই শ্রেণিটি পুরো প্রস্থের অভিনয়ের চেয়ে ছোট কিছুতেই ধসে পড়বে it ভিউপোর্টের আকারগুলি সম্পূর্ণ প্রস্থের চেয়েও কম, আমরা  একাই এর উপর নির্ভর করি ।

<br>চিহ্নটির কাছাকাছি থাকা একটি সিঙ্গেল সহ আরও একটি উদাহরণ ।

এইচটিএমএল:

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

সিএসএস:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

Comments

প্রশ্নের উদাহরণ হিসাবে নির্দিষ্ট কিছু হিসাবে, এটি যাওয়ার উপায়

— Zach Sauceer

এটি সবচেয়ে সহজ, সবচেয়ে সোজা-এগিয়ে পদ্ধতি বলে মনে হবে। ধন্যবাদ।

— স্কট

Answer 2

ওয়েবে লাইন বিরতিতে আপনার কোনও সত্যিকারের নিয়ন্ত্রণ নেই এবং এটি বিবেচনা করে ডিজাইন করা ভাল The

বিপরীতে যে কোনও সমাধান অলসভাবে হ্যাকি হতে হবে। যেহেতু এটি হ্যাক হবে তাই এইচটিএমএল হার্ড কোডিংয়ের বাইরে ব্যবহারকারীর সংজ্ঞায়িত লাইন ব্রেকগুলিকে মানায় না। আপনি মোটামুটি সহজেই জেএসের সাথে এটি করতে পারেন। অনন্য ক্লাসগুলির সাথে খালি স্প্যানগুলির সাথে আপনার ব্রেক পয়েন্টগুলি সেটআপ করুন তারপরে ভিউপোর্টের আকারের উপর ভিত্তি করে আপনি প্রতিটি স্প্যানের মধ্যে বিআর ট্যাগ ইনজেক্ট করতে পারেন।

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

অন্যদিকে, যদি আপনার লক্ষ্যটি নির্দিষ্ট লাইন ব্রেকগুলি নিয়ন্ত্রণ করতে এত বেশি না হয় তবে আপনার পাঠ্যটি তুলনামূলকভাবে এমনকি সারিগুলিতে 'স্ট্যাকগুলি' ব্লক করে রাখে, আমি প্রতিটি ভিউপোর্টের জন্য ডিআইভির প্রস্থকে আলাদাভাবে সেট করেছিলাম। এটি নিখুঁত হবে না, তবে সম্ভবত বেশ কাছাকাছি এবং সেরা আপস হতে পারে।

Comments

এই. এছাড়াও, যদি আপনি এটি ইতিমধ্যে না দেখে থাকেন তবে দয়া করে জন অলস্প্পের

— bemdesign

Answer 3

এটির জন্য একটি jquery প্লাগইন আছে , ভারসাম্য পাঠ্য ।

এটি একটি অ্যাডোব তৈরি প্লাগইন যা অ্যাডোবের প্রস্তাবেরtext-wrap: balance; পাশাপাশি একটি সিএসএস বিকল্প পাওয়ার জন্য তৈরি করা হয়েছিল যা ঠিক এইভাবে অ্যাডোব ইনডিজাইনের ব্যালেন্স র‌্যাগড লাইনের বৈশিষ্ট্যটি করবে (দুর্দান্ত লাগছে, তবে এটি যদি স্বীকৃত হয় তবে এটি ব্রাউজারগুলি সমর্থন করার আগে কয়েক বছর হবে)।

প্লাগইন, এখনই কাজ করে। এটি ক্লাসে থাকা যে কোনও উপাদানগুলিতে balance-textবা jQuery এর মতো ব্যবহারের ক্ষেত্রে ভারসাম্য বজায় রাখে$('.some-elements').balanceText();

• ন্যায়সঙ্গত পাঠ্য ব্যবহার করে এখানে একটি অফিসিয়াল অ্যাডোব ডেমো রয়েছে ।

• কোডটি দেখতে বাম-সারিবদ্ধ এস - হিট সম্পাদনা ব্যবহার করে আমি<h1> এখানে একটি ডেমো তৈরি করেছি । এটি লেখার সময় কিছু সীমাবদ্ধতা দেখায়:

সীমাবদ্ধতা

এই কোডটি বর্তমানে কোনও ইনলাইন উপাদান ছাড়াই ব্লক-স্তরের ট্যাগগুলিতে পাঠ্যে কাজ করে।

ডেমো 4 আপনি কিভাবে একটি ভালো কিছু সুষম লেখার স্রেফ আপনার ব্লকের মধ্যে দেখতে পাবেন <a>লিঙ্ক, <span>মত s অথবা জোর <em>, <strong>, <b>, <i>ইত্যাদি সেটি সরানো হবে।

এছাড়াও, 1, 2 এবং 5 টি ডেমোজের তুলনা করে, আপনি দেখতে পাবেন যে আপনাকে সিএসএস ক্লাস এবং জিকুয়েরি কল উভয়ই ব্যবহার করতে হবে ।

---

এটিকে মাঝারিভাবে নির্ভরযোগ্য মনে হয় তবে কখনও কখনও আড়ম্বরপূর্ণ - লেখার সময়, একা এতিমকে ছেড়ে একপাশের কলামে এগুলি মাঝে মাঝে পিছলে যায় (তবে এটি সময়ের 95% + কাজ করে বলে মনে হয় এবং আমি এখনও এটিকে পিছলে যেতে দেখিনি) যখন সাইড কলামে থাকে) এবং অব্যক্ত কারণে আমার ডেমোগুলি ফায়ারফক্সে কাজ করে না তবে অ্যাডোবের ডেমোগুলি (আই 9 9 + এ জরিমানা, এখনই আইই 8 তে পরীক্ষা করতে পারে না)। আপনি যদি এটি ব্যবহার করেন তবে কিছু পরীক্ষার সময় ফ্যাক্টর করুন।

Comments

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

— প্রচুর

আমি কল্পনা করব যে এটি "অ্যালগরিদম" রিডমি ফাইলের শুরুতে বর্ণিত। মূলত, তারা কেবল বলছে যে তারা সহজ ক্রস ব্রাউজারের সামঞ্জস্যের জন্য jQuery ব্যবহার করেছে।

— user56reinstatemonica8

@ ডাম্বনিক আপনি যদি jQuery আকার সম্পর্কে উদ্বিগ্ন হন তবে আপনি Zepto.js ব্যবহার করার চেষ্টা করতে পারেন তবে আমি 100% নিশ্চিত নই যে এটি স্থানীয়ভাবে এই প্লাগইনটিতে কাজ করে। আমি ভ্যানিলা জেএস সংস্করণ উপলব্ধ আছে বলে মনে করি না (যদিও এটি তৈরি করা সম্ভব)

— জ্যাচ সাউশিয়ার

রহস্য ডাউনভোট ... আমি অনুমান করি যে কেউ সত্যিই jQuery পছন্দ করেন না

— user56reinstatemonica8

Answer 4

ডিজাইনারদের ইনপুট দিয়ে কোনও নির্দিষ্ট উপায়ে কিছু ভাঙতে চায় এমন নিয়মিত আমাকে এটিকে কিছুটা নিয়মিতভাবে মোকাবেলা করতে হবে। আমি এটির সর্বাধিক সোজা উপায় খুঁজে পেয়েছি টেক্সটের ভিতরে একটি শ্রেণি সহ একটি স্প্যান স্থাপন করা, এবং তারপরে display: block;মিডিয়া প্রশ্নের জন্য সেই স্প্যানটি থাকা উচিত ।

সুতরাং এটি কিছু দেখতে হবে:

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

তারপরে আমার এমন কিছু সহ CSS থাকবে:

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

আপনার সমস্ত প্রস্থের জন্য যেভাবে জিনিস চান তা ভঙ্গ করে তা নিশ্চিত করার জন্য আপনাকে এখনও এটিকে জরিমানা করতে হবে।

যদি এটি ঘন ঘন সমস্যা হয় তবে আপনি নিজের লাইন-ব্রেক ক্লাসের একটি সেট তৈরি করতে পারেন একটি লা টুইটার বুটস্ট্র্যাপ বা আপনি যে কোনও গ্রিড সিস্টেম ব্যবহার করছেন, ক্লাসের নামগুলি মডেলিং করে আপনি যে নামকরণ কনভেনশন ব্যবহার করছেন তার নাম অনুসারে।

Answer 5

আপনি জাভাস্ক্রিপ্ট স্ক্রিনের প্রস্থ সনাক্ত করতে ব্যবহার করতে পারেন এবং সঠিক সংস্করণটি (<br> এর সাথে আপনার পোস্টে যেমন রয়েছে) খালি ডিভিতে অন্তর্নিহিতের মাধ্যমে লিখতে পারেন via

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

Comments

এটি প্রতিক্রিয়াশীলভাবে করা খুব কঠিন এবং অনেক গণনার প্রয়োজন। আমি এই পদ্ধতির ব্যবহার করার পরামর্শ দিচ্ছি না

— Zach Sauceer

প্রশ্নটি বদলে গেছে বলে মনে হচ্ছে। আমি সে সময় যে প্রশ্নের উত্তর দিয়েছিলাম সেটির উত্তর দিয়েছিলাম, যা ছিল যেখানে সেগুলি চায় যেখানে লাইন ব্রেকগুলি প্রদর্শন করা।

— স্টিভ

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

— স্টিভ

Answer 6

আমার বর্তমান পদ্ধতি ...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

এবং সিএসএস:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

প্রকৃত পাঠ্য ব্যবহারের ভিত্তিতে প্রস্থকে কখনও কখনও কিছু সামঞ্জস্যের প্রয়োজন হয় তবে এটি আমি ব্যবহার করি এমন সাধারণ স্কিম। মূলত h1ট্যাগটির প্রস্থ হ্রাস করা যাতে লাইনটি যেখানেই ভাঙতে চাই সেখানে ব্রেক হয়।

এটি কাজ করে, এটি যেখানে প্রয়োজন সেখানে বিরতি ঘটছে তা নিশ্চিত করার জন্য পুরোপুরি পরীক্ষা করা দরকার। তবে, তবে যে কোনও ইভেন্টে পুরোপুরি পরীক্ষার প্রয়োজন। সুতরাং, অগত্যা এই বিষয়ে আরও কাজ করা উচিত নয় ।

Comments

দ্রষ্টব্য: আপনি margin: 0 auto; text-align: center;কেবল একবার মিডিয়া ক্যোয়ারির বাইরে আবেদন করতে পারেন এবং এটি তাদের সকলের জন্য প্রযোজ্য হবে

— Zach Sauceer

এছাড়াও, বিষয়বস্তুর সাথে সুনির্দিষ্ট এমন কিছু দিয়ে কেবল অভ্যন্তরীণ স্প্যানগুলি ব্যবহার করা আরও ভাল this

— Zach Sauceer

একমত। হরফ আকারগুলি সমস্ত মিডিয়া আকারের জন্য আরও বিশ্বব্যাপী নিয়ন্ত্রণ করা হয়। এটি ছিল মার্কআপের মাত্র একটি নমুনা।

— স্কট

Answer 7

আপনি যোগ করতে পারিনি white-space: nowrapএবং স্থান <wbr>স্থান যেখানে আপনি লাইন ব্রেক অনুমতি দিতে চান এ। যদি এটি পর্যাপ্ত না হয় এবং আপনি মিডিয়া প্রশ্নের সাথে সূক্ষ্ম নিয়ন্ত্রণ চান তবে আপনি এখনও ক্লাস যুক্ত করতে পারেন<wbr class="mobileOnly">

<wbr>ডক: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr