নেস্টেড তালিকায় একটি পাঠকের প্রশ্ন

কয়েক দিন আগে, কয়েক দশক ক্রিপ্টো-স্ক্যামের মধ্যে যা আমাদের যোগাযোগের ইনবক্সে প্লাবিত হয়, আমরা আমাদের পাঠকদের একজনের নেস্টেড তালিকায় একটি আকর্ষণীয় প্রশ্ন পেয়েছি।

আমার একটি সমস্যা আছে (তালিকা-সংখ্যা সম্পর্কিত সম্পর্কিত) যা সাধারণ বলে মনে হয় তবে আমি এটি সমাধান করতে বা এর জন্য কোনও সমাধান খুঁজে পাচ্ছি না বলে মনে হয়। যদি আপনার কোনও প্রতিভা এর উত্তর দিতে পারে তবে আমি নিশ্চিত যে অনেক লোক আগ্রহী হতে চলেছে।

স্টাইলিং তালিকা? আমার দৃষ্টি আকর্ষণ করার জন্য যথেষ্ট। সর্বোপরি, আমি সবে শেষ করেছি সিএসএস কাউন্টার সম্পর্কে একটি সম্পূর্ণ গাইড। বার্তাটি অবিরত:

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

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

8 The strata corporation must repair and maintain all of the following:
    (a) common assets of the strata corporation;
    (b) common property that has not been designated as limited common property;
    (c) limited common property, but the duty to repair and maintain it is restricted to
        (i) repair and maintenance that in the ordinary course of events occurs less often than once a year, and
        (ii) the following, no matter how often the repair or maintenance ordinarily occurs:
            (A) the structure of a building;
            (B) the exterior of a building;
            (C) chimneys, stairs, balconies and other things attached to the exterior of a building;
            (D) doors, windows and skylights on the exterior of a building or that front on the common property;

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

কুৎসিত উপায়

এই সমস্যার বিষয়ে আমার প্রথম দৃষ্টিভঙ্গি মোটেই কোনও পদ্ধতির ছিল না; আমি সবেমাত্র কোডেপেন খুলেছি, এইচটিএমএল লিখেছি এবং আমার সিএসএসকে চূড়ান্ত ফলাফলের দিকে কাজ করার চেষ্টা করেছি। মার্কডাউন অনুবাদ করার পরে ol এবং li উপাদানগুলি এবং প্রতিটি তালিকায় কোনও বিশেষ স্টাইলিং ছাড়াই, বেস তালিকাটি নিম্নলিখিতগুলির মতো দেখায়:

সেখানে একবার, আমার প্রথম প্রবৃত্তি ছিল প্রতিটি নির্বাচন করা ol উপাদান এবং তারপরে এটি পরিবর্তন করুন list-style-type কাঙ্ক্ষিত একটি। প্রতিটি স্তরকে লক্ষ্য করতে, আমি প্রতিটি নির্বাচন করেছি ol এর সংখ্যার উপর নির্ভর করে ol পূর্বপুরুষ, তারপরে নির্দিষ্টতাটি বাকী অংশগুলি পরিচালনা করতে দিন:

ol {
  list-style-type: decimal; /* Unnecessary; just for demo */
}

ol ol {
  list-style-type: lower-alpha;
}

ol ol ol {
  list-style-type: lower-roman;
}

ol ol ol ol {
  list-style-type: upper-alpha;
}

এবং যেমন আপনি দেখতে পাচ্ছেন, এটি কাজ করে … তবে আমরা এটি সম্পর্কে এক কুৎসিত উপায় একমত হতে পারি।

উদ্ধার করতে বাসা

ভাগ্যক্রমে, সিএসএস নেস্টিং এখন কয়েক বছর ধরে বেসলাইন হয়েছে, তাই আমরা নিজেকে অনেক কিছু বাঁচাতে পারি ol পরের একের ভিতরে প্রতিটি উপাদানকে বাসা বাঁধার মাধ্যমে নির্বাচকরা।

ol {
  list-style-type: decimal;
  
  ol {
    list-style-type: lower-alpha;
     
    ol {
      list-style-type: lower-roman;
          
       ol {
        list-style-type: upper-alpha;
      }
    }
  }
}

যদিও খুব বেশি বাসা বেঁধে রাখা হয়, তবে আমি মনে করি যে, বিশেষত এই ক্ষেত্রে এটি সিএসএসকে কী করতে চায় তা আরও পরিষ্কার করে তোলে – বিশেষত যেহেতু সিএসএস কাঠামো এইচটিএমএল নিজেই মেলে, এবং এটি সমস্ত তালিকার স্টাইলকেও এক জায়গায় রাখে। সমস্ত একই ফলাফল:

এটা আইনী

আমি আইনী নথি সম্পর্কে কিছুই জানি না, বা সেগুলি সম্পর্কে আমি শিখতে চাই না। যাইহোক, আমি আইনটি জানি এবং সম্প্রসারণের মাধ্যমে আইনজীবীরা আইনী প্রযুক্তিগত এবং কী কারণে নয় সে সম্পর্কে কীভাবে তারা ফর্ম্যাট করা হয় সে সম্পর্কে চূড়ান্ত। মুল বক্তব্যটি হ’ল আইনী নথির জন্য, প্রতিটি তালিকার চিহ্নিতকারীকে ঘিরে এই প্রথম বন্ধনীগুলি – যেমন (A) বা (ii) – নিছক সাজসজ্জার চেয়ে বেশি এবং আমাদের তালিকায় অন্তর্ভুক্ত থাকতে হবে, যা আমাদের বর্তমান সমাধানটি তা করে না।

কয়েক বছর আগে, আমাদের প্রতিটি তালিকার জন্য একটি কাউন্টার সেট করতে হবে এবং তারপরে প্রথম বন্ধনগুলি অন্তর্ভুক্ত করা উচিত ছিল counter() আউটপুট; পুনরাবৃত্ত এবং কুরুচিপূর্ণ। আজকাল, আমরা ব্যবহার করতে পারি @counter-style বিধি অনুসারে, যা এর নামটি বোঝায়, আমাদের কাস্টম কাউন্টার স্টাইলগুলি তৈরি করতে দেয় যা (অন্যান্য জায়গাগুলির মধ্যে) ব্যবহার করা যেতে পারে list-style-type সম্পত্তি।

যদি আপনি এর সাথে অপরিচিত @counter-style সিনট্যাক্স, আমাদের যা জানা দরকার তা হ’ল এটি পূর্বনির্ধারিত কাউন্টার শৈলীগুলি প্রসারিত করতে ব্যবহার করা যেতে পারে (যেমন) decimal বা upper-alpha), এবং তাদের সাথে আলাদা সংযুক্ত করুন suffix বা prefix। উদাহরণস্বরূপ, নিম্নলিখিত কাউন্টার স্টাইলটি সাধারণভাবে প্রসারিত করে decimal স্টাইল এবং একটি ড্যাশ যোগ (-) হিসাবে a prefix এবং একটি কোলন (:) প্রত্যয় হিসাবে।

@counter-style my-counter-style {
  system: extends decimal;
  prefix: "- ";
  suffix: ": ";
}

ol {
  list-style-type: my-counter-style;
}

আমাদের ক্ষেত্রে, আমাদের চারটি কাউন্টার স্টাইলের প্রয়োজন:

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

এই সমস্ত নিম্নলিখিত অনুবাদ হবে @counter-style বিধি:

@counter-style trimmed-decimal {
  system: extends decimal;
  suffix: " ";
}

@counter-style enclosed-lower-alpha {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

@counter-style enclosed-lower-roman {
  system: extends lower-roman;
  prefix: "(";
  suffix: ") ";
}

@counter-style enclosed-upper-alpha {
  system: extends upper-alpha;
  prefix: "(";
  suffix: ") ";
}

এবং তারপরে, আমরা কেবল আমাদের প্রাথমিকের সমতুল্যতার সাথে প্রত্যেককে প্রতিস্থাপন করব ol ঘোষণা:

ol {
  list-style-type: trimmed-decimal;

  ol {
    list-style-type: enclosed-lower-alpha;

    ol {
      list-style-type: enclosed-lower-roman;

      ol {
        list-style-type: enclosed-upper-alpha;
      }
    }
  }
}

এটি সিএসএস ছাড়া কাজ করা উচিত!

মনে রাখবেন, এটি একটি আইনী দল @counter-style?

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

কাজের জন্য, আমরা এইচটিএমএল ব্যবহার করতে পারি type বৈশিষ্ট্য। এটি সিএসএসের মতো list-style-type তবে তার নিজস্ব সীমিত ব্যবহার সহ। প্রথমত, এর সাথে এর ব্যবহার ul উপাদানগুলি হ্রাস করা হয়, যখন এটি ব্যবহার করা যেতে পারে ol আমাদের মতো আইনী বা প্রযুক্তিগত নথির মতো সিএসএস ছাড়াই তালিকাগুলি সঠিকভাবে নম্বরযুক্ত রাখার উপাদানগুলি। এটি নিম্নলিখিত মান আছে:

• "1" দশমিক সংখ্যার জন্য (ডিফল্ট)
• "a" ছোট বর্ণের বর্ণমালার জন্য
• "A" বড় হাতের বর্ণমালার জন্য
• "i" ছোট রোমান সংখ্যার জন্য
• "I" বড় হাতের রোমান সংখ্যার জন্য

আমাদের এইচটিএমএল তালিকার অভ্যন্তরে, আমরা প্রতিটিটির জন্য সঠিক নম্বর নির্ধারণ করব ol স্তর:

দস্তাবেজটি কত দিন তার উপর নির্ভর করে এটি বেনিফিটের চেয়ে ঝামেলা হতে পারে তবে এটি এখনও জেনে রাখা ভাল। যদিও এই ধরণের দস্তাবেজ ক্রমাগত পরিবর্তন হয় না, সুতরাং এই অতিরিক্ত সুরক্ষা জাল যুক্ত করতে ক্ষতি হবে না।

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

তালিকায় আরও!