উপাদান আইকন গাইড

উপাদান আইকনগুলির একটি ওভারভিউ—এগুলি কোথায় পাবেন এবং কীভাবে সেগুলিকে আপনার প্রকল্পগুলির সাথে একীভূত করবেন৷

উপাদান আইকন কি?

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

ম্যাটেরিয়াল আইকন লাইব্রেরিতে ম্যাটেরিয়াল ডিজাইন আইকনগুলির সম্পূর্ণ সেট দেখুন।

আইকন লাইব্রেরি

আইকন পাচ্ছেন

আইকনগুলি বিভিন্ন ফর্ম্যাটে উপলব্ধ এবং বিভিন্ন ধরণের প্রকল্প এবং প্ল্যাটফর্মের জন্য, তাদের অ্যাপে বিকাশকারীদের জন্য এবং তাদের মকআপ বা প্রোটোটাইপের ডিজাইনারদের জন্য উপযুক্ত৷

লাইসেন্সিং

Apache লাইসেন্স সংস্করণ 2.0 এর অধীনে আপনার পণ্যগুলিতে অন্তর্ভুক্ত করার জন্য আমরা এই আইকনগুলিকে আপনার জন্য উপলব্ধ করেছি৷ আপনার পণ্যগুলিতে এই আইকনগুলি এবং ডকুমেন্টেশনগুলি রিমিক্স করতে এবং পুনরায় শেয়ার করতে নির্দ্বিধায়৷ আমরা আপনার অ্যাপের স্ক্রিনে অ্যাট্রিবিউশন পছন্দ করব, কিন্তু এটির প্রয়োজন নেই।

পৃথক আইকন ব্রাউজিং এবং ডাউনলোড করা

উপাদান আইকন সম্পূর্ণ সেট উপাদান আইকন লাইব্রেরিতে উপলব্ধ. আইকনগুলি এসভিজি বা পিএনজিতে ডাউনলোডের জন্য উপলব্ধ, ওয়েব, অ্যান্ড্রয়েড, এবং আইওএস প্রকল্পগুলির জন্য বা যেকোনো ডিজাইনার সরঞ্জামগুলিতে অন্তর্ভুক্তির জন্য উপযুক্ত ফর্ম্যাটগুলি।

সবকিছু ডাউনলোড হচ্ছে

সমস্ত আইকনের সর্বশেষ স্থিতিশীল জিপ সংরক্ষণাগার (~310MB) বা মাস্টার থেকে ব্লিডিং-এজ সংস্করণটি নিন।

গিট রিপোজিটরি

উপাদানের আইকনগুলি গিট রিপোজিটরি থেকে পাওয়া যায় যাতে আমরা যে সমস্ত বিভিন্ন ফর্ম্যাটগুলি উপলব্ধ করছি তা সহ আইকনের সম্পূর্ণ সেট রয়েছে।

$ git clone https://github.com/google/material-design-icons/

ওয়েবের জন্য আইকন ফন্ট

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

ফন্ট ব্যবহার করা শুধুমাত্র সবচেয়ে সুবিধাজনক পদ্ধতি নয়, তবে এটি দক্ষ এবং দুর্দান্ত দেখায়:

  • একক, ছোট ফাইল থেকে 900+ আইকন।
  • Google ওয়েব ফন্ট সার্ভার থেকে পরিবেশিত বা স্ব-হোস্ট করা যেতে পারে।
  • সমস্ত আধুনিক ওয়েব ব্রাউজার দ্বারা সমর্থিত।
  • রঙিন, আকারের এবং সম্পূর্ণভাবে সিএসএস সহ অবস্থান করা।
  • ভেক্টর-ভিত্তিক: যেকোনো স্কেল, রেটিনা ডিসপ্লে, লো-ডিপিআই ডিসপ্লে স্ক্রীনে দুর্দান্ত দেখায়।

আইকন ফন্টের ওজন তার সবচেয়ে ছোট woff2 ফরম্যাটে মাত্র 42KB এবং স্ট্যান্ডার্ড woff ফরম্যাটে 56KB। তুলনা করে, gzip-এর সাথে সংকুচিত SVG ফাইলগুলি সাধারণত প্রায় 62KB আকারের হবে, তবে প্রতীক স্প্রাইট সহ একটি একক SVG ফাইলে আপনার প্রয়োজনীয় আইকনগুলিকে কম্পাইল করে এটিকে উল্লেখযোগ্যভাবে হ্রাস করা যেতে পারে।

সেটআপ পদ্ধতি 1. গুগল ফন্টের মাধ্যমে ব্যবহার করা

যেকোনো ওয়েব পেজে ব্যবহারের জন্য আইকন ফন্ট সেট আপ করার সবচেয়ে সহজ উপায় হল Google Fonts এর মাধ্যমে। আপনাকে যা করতে হবে তা হল HTML এর একটি লাইন অন্তর্ভুক্ত করা:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

অন্যান্য Google ওয়েব ফন্টের মতো, ব্রাউজারে নির্দিষ্ট 'ম্যাটেরিয়াল আইকন' ফন্ট সক্রিয় করতে সঠিক CSS পরিবেশন করা হবে। .material-icons নামে একটি অতিরিক্ত CSS ক্লাস ঘোষণা করা হবে। এই ক্লাস ব্যবহার করে এমন যেকোনো উপাদানের কাছে ওয়েব ফন্ট থেকে এই আইকনগুলি রেন্ডার করার জন্য সঠিক CSS থাকবে।

সেটআপ পদ্ধতি 2. স্ব হোস্টিং

যারা নিজে ওয়েব ফন্ট হোস্ট করতে চান তাদের জন্য কিছু অতিরিক্ত সেটআপ প্রয়োজন। একটি অবস্থানে আইকন ফন্ট হোস্ট করুন, উদাহরণস্বরূপ https://example.com/material-icons.woff , এবং নিম্নলিখিত CSS নিয়ম যোগ করুন:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

উপরন্তু, আইকন রেন্ডার করার জন্য CSS নিয়মগুলি ফন্টটিকে সঠিকভাবে রেন্ডার করার জন্য ঘোষণা করতে হবে। এই নিয়মগুলি সাধারণত Google ওয়েব ফন্ট স্টাইলশীটের অংশ হিসাবে পরিবেশন করা হয়, তবে ফন্টটি স্ব-হোস্ট করার সময় আপনার প্রকল্পগুলিতে ম্যানুয়ালি অন্তর্ভুক্ত করা প্রয়োজন:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

HTML এ আইকন ব্যবহার করা

আপনার ওয়েব পৃষ্ঠায় আইকনগুলিকে একত্রিত করা সহজ৷ এখানে একটি ছোট উদাহরণ:

মুখ

<span class="material-icons">face</span>

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

এই বৈশিষ্ট্যটি ডেস্কটপ এবং মোবাইল উভয় ডিভাইসেই বেশিরভাগ আধুনিক ব্রাউজারে সমর্থিত।

ব্রাউজার সংস্করণ সমর্থনকারী ligatures
গুগল ক্রম 11
মোজিলা ফায়ারফক্স 3.5
আপেল সাফারি 5
মাইক্রোসফট IE 10
মাইক্রোসফট এজ 18
অপেরা 15
অ্যাপল মোবাইল সাফারি iOS 4.2
অ্যান্ড্রয়েড ব্রাউজার 3.0

যে ব্রাউজারগুলি লিগ্যাচার সমর্থন করে না তাদের জন্য, নীচের উদাহরণের মতো সংখ্যাসূচক অক্ষর উল্লেখ ব্যবহার করে আইকনগুলি নির্দিষ্ট করতে ফিরে যান:

স্বাভাবিক
<span class="material-icons">&#xE87C;</span>

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

উপাদান নকশা স্টাইলিং আইকন

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

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

সাইজিং

যদিও ফন্টের আইকনগুলি যে কোনও আকারে স্কেল করা যেতে পারে, উপাদান ডিজাইনের আইকন নির্দেশিকা অনুসারে, আমরা সেগুলিকে 18, 24, 36 বা 48px এ দেখানোর পরামর্শ দিই৷ ডিফল্ট হচ্ছে 24px।

স্ট্যান্ডার্ড উপাদান ডিজাইন সাইজিং নির্দেশিকা জন্য CSS নিয়ম:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

ম্যাটেরিয়াল আইকনগুলি 24px-এ সবচেয়ে ভাল দেখায়, কিন্তু যদি একটি আইকনকে একটি বিকল্প আকারে প্রদর্শনের প্রয়োজন হয়, উপরের CSS নিয়মগুলি ব্যবহার করে সাহায্য করতে পারে:

18px
<span class="material-icons md-18">face</span>
24px
<span class="material-icons md-24">face</span>
36px
<span class="material-icons md-36">face</span>
48px
<span class="material-icons md-48">face</span>

রং করা

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

উপরে বর্ণিত উপাদান CSS শৈলী ব্যবহার করে এখানে কিছু উদাহরণ রয়েছে:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

একটি গাঢ় ফোরগ্রাউন্ড রঙ সহ একটি হালকা পটভূমিতে একটি আইকন আঁকার উদাহরণ:

স্বাভাবিক
<span class="material-icons md-dark">face</span>
অক্ষম
<span class="material-icons md-dark md-inactive">face</span>

একটি হালকা ফোরগ্রাউন্ড রঙের সাথে একটি অন্ধকার পটভূমিতে একটি আইকন আঁকার উদাহরণ:

স্বাভাবিক
<span class="material-icons md-light">face</span>
অক্ষম
<span class="material-icons md-light md-inactive">face</span>

একটি কাস্টম আইকন রঙ সেট করতে, ফন্টের জন্য পছন্দসই রঙ নির্দিষ্ট করে একটি CSS নিয়ম সংজ্ঞায়িত করুন:

.material-icons.orange600 { color: #FB8C00; }

এবং তারপর আইকন উল্লেখ করার সময় ক্লাস ব্যবহার করুন:

স্বাভাবিক
<span class="material-icons orange600">face</span>

ওয়েবের জন্য আইকন ছবি

ম্যাটেরিয়াল আইকনগুলি PNG এবং SVG ফর্ম্যাটে নিয়মিত ছবি হিসাবেও পাওয়া যায়।

এসভিজি

ম্যাটেরিয়াল আইকনগুলি SVG হিসাবে দেওয়া হয় যা ওয়েব প্রকল্পগুলির জন্য উপযুক্ত৷ উপাদান আইকন লাইব্রেরি থেকে পৃথক আইকন ডাউনলোড করা যায়। SVG গুলি পথের নীচে উপাদান ডিজাইন আইকন গিট সংগ্রহস্থল থেকেও পাওয়া যায়:

material-design-icons/src/

উদাহরণস্বরূপ, মানচিত্রের আইকনগুলি src/maps- এ রয়েছে:

material-design-icons/src/maps/

যদি একটি ওয়েব সাইটে একাধিক আইকন ব্যবহার করা হয়, তাহলে ছবিগুলির বাইরে স্প্রিটশিট তৈরি করার পরামর্শ দেওয়া হয়৷ আরও তথ্যের জন্য, git সংগ্রহস্থলের sprites ডিরেক্টরির ডকুমেন্টেশন পড়ুন।

পিএনজি

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

material-design-icons/png/

যদি একটি ওয়েব সাইটে একাধিক আইকন ব্যবহার করা হয়, তাহলে ছবিগুলির বাইরে স্প্রিটশিট তৈরি করার পরামর্শ দেওয়া হয়৷ আরও তথ্যের জন্য, git সংগ্রহস্থলে sprites ডিরেক্টরিতে সুপারিশগুলি পড়ুন।

অ্যান্ড্রয়েডের জন্য আইকন

অ্যান্ড্রয়েডের জন্য উপযুক্ত পিএনজিগুলি উপাদান আইকন লাইব্রেরি থেকে পাওয়া যায়। এগুলি সমস্ত সমর্থিত স্ক্রীন ঘনত্বে আসে তাই সেগুলি যে কোনও ডিভাইসে ভাল দেখায়৷

আইকনগুলি উপাদান ডিজাইন আইকন গিট রিপোজিটরিতেও পাওয়া যায় একই রঙ এবং আকারের সংমিশ্রণে নিম্নরূপ:

ভেক্টর অঙ্কনযোগ্য বর্তমানে শুধুমাত্র একটি কালো 24dp আইকন হিসাবে উপলব্ধ। এটি আমাদের সবচেয়ে আদর্শ আইকন আকারের সাথে সামঞ্জস্যের জন্য। আইকনটিকে একটি ভিন্ন রঙে রেন্ডার করতে, অ্যান্ড্রয়েড ললিপপে উপলব্ধ আঁকাযোগ্য টিন্টিং ব্যবহার করুন৷

ভেক্টর ড্রয়েবল ব্যবহার করার সময়, xxxhdpi ঘনত্ব PNG অন্তর্ভুক্ত করার প্রয়োজন নাও হতে পারে কারণ এটি অসম্ভাব্য একটি ডিভাইস যা সমর্থন করে যে পর্দার ঘনত্ব ভেক্টর ড্রয়েবল সমর্থন করে না।

iOS এর জন্য আইকন

ম্যাটেরিয়াল আইকনগুলিও iOS অ্যাপের মধ্যে ভাল কাজ করে। ম্যাটেরিয়াল আইকন লাইব্রেরি এবং গিট রিপোজিটরি উভয় ক্ষেত্রেই, এই আইকনগুলি Xcode ইমেজসেটে প্যাকেজ করা হয় যা Xcode অ্যাসেট ক্যাটালগ (xcassets) এর সাথে সহজেই কাজ করবে। এই ইমেজসেটগুলিকে Xcode অ্যাসেট ক্যাটালগে Xcode-এ টেনে এনে অথবা xcasset ফোল্ডারে ফোল্ডার কপি করে যেকোন Xcode সম্পদ ক্যাটালগে যোগ করা যেতে পারে।

iOS ইমেজসেট

ইমেজসেটে একক, ডবল এবং ট্রিপল ডেনসিটি ইমেজ (1x, 2x, 3x) থাকে তাই তারা সকল পরিচিত iOS স্ক্রীনের ঘনত্বে কাজ করে। কালো এবং সাদা উভয় আইকন সরবরাহ করা হয়েছে, তবে আমরা UIImage এর imageWithRenderingMode UIImageRenderingModeAlwaysTemplate- এর সাথে ব্যবহার করার পরামর্শ দিই যা চিত্রটিকে একটি আলফা মাস্ক হিসাবে ব্যবহার করার অনুমতি দেবে যা যেকোনো সম্ভাব্য রঙে রঙ করা যেতে পারে।

উদ্দেশ্য-সি উদাহরণ:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

সুইফট উদাহরণ:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

RTL-এ আইকন

আরবি এবং হিব্রু ভাষাগুলি ডান-থেকে-বামে (RTL) পড়া হয়। RTL ভাষার জন্য, RTL-এ বেশিরভাগ উপাদান প্রদর্শনের জন্য UIs মিরর করা উচিত। যখন একটি ইউজার ইন্টারফেস RTL-এর জন্য মিরর করা হয়, তখন কিছু আইকনও মিরর করা উচিত। যখন টেক্সট, লেআউট এবং আইকনোগ্রাফি ডান-থেকে-বাম UI সমর্থন করার জন্য মিরর করা হয়, তখন সময়ের সাথে সম্পর্কিত যেকোন কিছুকে ডান থেকে বামে সরানো হিসাবে চিত্রিত করা উচিত। উদাহরণস্বরূপ, বাম দিকে ফরোয়ার্ড পয়েন্ট এবং ডানদিকে পিছনের পয়েন্ট। যাইহোক, মনে রাখবেন যে আইকনটি যে প্রেক্ষাপটে স্থাপন করা হয়েছে সেটিও একটি আইকনকে মিরর করা উচিত কিনা তা প্রভাবিত করে।

আইকনগুলি শুধুমাত্র মিরর করা উচিত যদি তাদের দিকনির্দেশ RTL মোডে অন্যান্য UI উপাদানগুলির সাথে মেলে৷ যখন একটি আইকন আপনার ওয়েবসাইটের ভিজ্যুয়াল বৈশিষ্ট্যগুলিকে উপস্থাপন করে যা RTL-এ ভিন্ন, তখন আইকনটি RTL-এও মিরর করা উচিত। উদাহরণস্বরূপ, যদি একটি সংখ্যাযুক্ত তালিকার সংখ্যাগুলি RTL ভাষায় ডানদিকে থাকে, তাহলে সংখ্যাগুলি মিরর করা আইকনের ডানদিকে থাকা উচিত।

অ্যান্ড্রয়েডে RTL আইকন

এই অ্যান্ড্রয়েড বিকাশকারী নিবন্ধটি কীভাবে RTL ব্যবহারকারী ইন্টারফেসগুলি প্রয়োগ করতে হয় তা গভীরভাবে বর্ণনা করে। অ্যান্ড্রয়েডে ডিফল্টরূপে, লেআউটের দিকটি মিরর করা হলে আইকনগুলি মিরর করা হয় না। প্রয়োজনের সময় আপনাকে বিশেষভাবে উপযুক্ত আইকনগুলিকে মিরর করতে হবে, হয় RTL ভাষার জন্য বিশেষ সম্পদ প্রদান করে, অথবা সম্পদগুলিকে মিরর করার জন্য কাঠামো কার্যকারিতা ব্যবহার করে৷

RTL ভাষার জন্য বিশেষ সম্পদ প্রদান করতে, আপনি রিসোর্স ডিরেক্টরিতে ldrtl কোয়ালিফায়ার ব্যবহার করতে পারেন, যেমন res/drawable-ldrtl/ । এই ধরনের ডিরেক্টরির মধ্যে থাকা সংস্থানগুলি শুধুমাত্র RTL ভাষার জন্য ব্যবহার করা হবে। অ্যান্ড্রয়েড এপিআই 19 বা তার নতুন চলমান ডিভাইসগুলির জন্য, ফ্রেমওয়ার্ক ড্রয়েবলের জন্য অটো মিররড বৈশিষ্ট্যও প্রদান করে। যখন এই বৈশিষ্ট্যটি সত্য হিসাবে সেট করা হয়, অঙ্কনযোগ্যটি স্বয়ংক্রিয়ভাবে RTL ভাষায় মিরর করা হবে।

অটো মিররড ব্যবহার করে:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

যদি autoMirrored ব্যবহার করা বা বিকল্প অঙ্কনযোগ্য সংস্থান সরবরাহ করা একটি বিকল্প না হয়, তবে ImageView স্কেলএক্স বৈশিষ্ট্যটি অঙ্কনযোগ্য মিরর করতেও ব্যবহার করা যেতে পারে (উদাহরণস্বরূপ, একটি res/layout-ldrtl ডিরেক্টরিতে একটি RTL-নির্দিষ্ট লেআউট প্রদান করে)।

লেআউট ফাইলের মধ্যে মিররিং:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

শেষ অবধি, অঙ্কনযোগ্যগুলিকে প্রোগ্রামগতভাবে মিরর করা যেতে পারে।

GetLayoutDirection ব্যবহার করে লেআউটের দিকনির্দেশের জন্য ম্যানুয়ালি পরীক্ষা করুন:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

মিররিং ইমেজভিউ বিষয়বস্তু প্রোগ্রামগতভাবে:

imageView.setScaleX(-1);

iOS-এ RTL আইকন

iOS-এর একটি UISemanticContentAttribute ধারণা রয়েছে যা প্রতিটি ভিউয়ের সাথে সংযুক্ত থাকে। এটি unspecified হতে পারে, forceLeftToRight , forceRightToLeft , playback বা spatial । iOS এই মান এবং (বাম-থেকে-ডান (LTR)/RTL সেটিং ব্যবহার করে ইন্টারফেস উপস্থাপন করে ভিউটির কার্যকরী লেআউট দিকনির্দেশ নির্ধারণ করতে। এই কার্যকরী লেআউট দিকনির্দেশনা নির্ধারণ করে যে কোনও ছবি প্রদর্শিত হলে মিরর করা হবে কি না।

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

উদ্দেশ্য-সি উদাহরণ:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

দ্রুত উদাহরণ:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

iOS এবং macOS-এ RTL কীভাবে প্রয়োগ করতে হয় সে সম্পর্কে আরও গভীরতার ডকুমেন্টেশনের জন্য, অনুগ্রহ করে Apple এর RTL ডকুমেন্টেশন পর্যালোচনা করুন।

iOS 9-এ শব্দার্থিক বিষয়বস্তু যোগ করা হয়েছে। আপনি যদি iOS-এর আগের সংস্করণগুলিকে সমর্থন করেন, তাহলে উপাদান আন্তর্জাতিকীকরণ কাঠামো iOS 8-এ কিছু কার্যকারিতা ব্যাকপোর্ট করে।

ওয়েবে RTL আইকন

আমরা ওয়েবে RTL-এর প্রাইমার হিসাবে নিম্নলিখিত নিবন্ধটি সুপারিশ করি: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks .mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

ওয়েবে ডিফল্টরূপে, যখন লেআউটের দিকটি মিরর করা হয় তখন আইকনগুলি মিরর করা হয় না৷ প্রয়োজনে আপনাকে বিশেষভাবে উপযুক্ত আইকনগুলিকে মিরর করতে হবে।

নীচের উদাহরণটি দেখায় কিভাবে একটি সাধারণ RTL CSS নিয়ম বাস্তবায়ন করতে হয়। আপনি এটি কোডপেনেও দেখতে পারেন।

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

ImageMagick ব্যবহার করে আপনার নিজস্ব RTL আইকন তৈরি করুন

কোডে আইকনগুলিকে মিরর করার বিকল্প না হলে আপনি ইমেজটিকে অনুভূমিকভাবে মিরর করতে ImageMagick ব্যবহার করতে পারেন।

convert -flop my_icon.png my_icon_rtl.png

আরটিএল-এর জন্য কোন আইকনগুলিকে মিরর করা উচিত?

এখানে আইকনগুলির একটি তালিকা রয়েছে যা প্রোগ্রামগতভাবে RTL এ মিরর করা যেতে পারে:

তীর পিছনে তীর ব্যাক ios তীর এগিয়ে
তীর এগিয়ে ios তীর বাম তীর ডান
অ্যাসাইনমেন্ট অ্যাসাইনমেন্ট রিটার্ন ব্যাকস্পেস
ব্যাটারি অজানা কল করা হয়েছে কল মার্জ
কল মিস হয়েছে কল মিস আউটগোয়িং কল গৃহীত
কল বিভক্ত শেভরন বাম শেভরন ডান
ক্রোম রিডার মোড ডিভাইস অজানা ডিভিআর
ইভেন্ট নোট ফিচারড প্লে লিস্ট বৈশিষ্ট্যযুক্ত ভিডিও
পৃষ্ঠা প্রথম পাতা ফ্লাইট ল্যান্ড ফ্লাইট টেকঅফ
বিন্যাস ইন্ডেন্ট হ্রাস বিন্যাস ইন্ডেন্ট বৃদ্ধি ফরম্যাট তালিকা বুলেটেড
এগিয়ে ফাংশন ইনপুট
কীবোর্ড ট্যাব লেবেল লেবেল গুরুত্বপূর্ণ
লেবেল রূপরেখা শেষ পাতা লঞ্চ
তালিকা লাইভ সাহায্য মোবাইল স্ক্রীন শেয়ার
মাল্টিলাইন চার্ট আগে নেভিগেট করুন পরবর্তী নেভিগেট করুন
পরের সপ্তাহে নোট নতুন খুলুন
playlist add সারি সঙ্গীত করা
উত্তর উত্তর দিন স্ক্রিন শেয়ার
পাঠান সংক্ষিপ্ত পাঠ্য শো চার্ট
সাজানোর তারা অর্ধেক বিষয়
ট্রেন্ডিং ফ্ল্যাট toc ট্রেন্ডিং ডাউন
ট্রেন্ডিং আপ ফিরিয়ে আনুন দেখুন তালিকা
দেখুন quilt wrap text