අන්තර්ගත අලෙවි

පසුබිම මත පදනම්ව ඔබට ක්‍රමලේඛනගතව අකුරු වර්ණය වෙනස් කරන්නේ කෙසේද? (ආලෝකය/අඳුරු මාදිලිය)

ඔබ සංචාරය කර ඇත්නම් Martech Zone මෑතකදී, අපි දැන් වෙබ් අඩවිය ආලෝකය හෝ අඳුරු ආකාරයෙන් බැලීමේ හැකියාව ලබා දෙන බව ඔබ දැක ඇති. යන්තම් සොයන්න සඳ හෝ හිරු අඩවියේ ඉහළ වම් සංචාලන තීරුවේ දිනය අසල ඇති අයිකනය.

එය ඉතා සිසිල් විශේෂාංගයක් වන අතර එය ඉතා හොඳින් ක්‍රියා කරයි. මම නව පරිවර්තන මෙවලමක් දියත් කළ විට HEX RGB ලෙස වෙනස් කරන්න, මට ඇත්තටම පරිශීලකයා ගණනය කිරීමට උත්සාහ කරන වර්ණය පෙන්වීමට අවශ්‍ය විය. මම වර්ණය ප්‍රදර්ශනය කරනවා පමණක් නොව, වර්ණයේ නම පෙන්වන ලස්සන අංගයක් ද මම එකතු කළෙමි. නමුත් එය ගැටළුවක් ඇති කළේය ...

වර්ණය ප්‍රදර්ශනය කරන ලද swach එකට සැහැල්ලු පසුබිමක් තිබුනේ නම්, මා විසින් swach සඳහා ගතිකව උත්පාදනය කරන පෙළ ඔබට කියවීමට නොහැකි වනු ඇත. ඉතින්... මට පසුබිම් වර්ණය මත පදනම්ව සහ අකුරු බැලීම සඳහා ප්‍රමාණවත් ප්‍රතිවිරෝධයක් තිබේද නැද්ද යන්න මත පදනම්ව අකුරු වර්ණය සකසන ශ්‍රිතයක් නිර්මාණය කිරීමට සිදු විය.

ආලෝකය හෝ අඳුරු මාදිලිය සඳහා JavaScript කාර්යය

මට වර්ණය සඳහා hex කේතය ලබා දිය හැකි ශ්‍රිතයක් සෑදීමට අවශ්‍ය විය, පසුව ප්‍රතිවිරෝධය මත පදනම්ව අකුරු සුදු හෝ කළු විය යුතුද යන්න ආපසු ලබා දෙන්න. මෙම ජාවාස්ක්‍රිප්ට් කාර්යය උපක්‍රමය කළේය…

function contrast(hex) {
  var threshold = 149;
  let r = 0, g = 0, b = 0;

  // 3 digits
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6 digits
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }
  return ((r*0.299 + g*0.587 + b*0.114) > threshold) ? '#000000' : '#ffffff';
}

මෙම ශ්‍රිතයේ එළිපත්ත යම් වර්ණයක් ආලෝකය ද අඳුරු ද යන්න තීරණය කිරීමට භාවිතා කරයි. ශ්‍රිතය ලබා දී ඇති ෂඩ් දශම වර්ණ කේතය එහි රතු, කොළ සහ නිල් බවට පරිවර්තනය කරයි (RGB) සංරචක, පසුව වර්ණයේ දීප්තිය ගණනය කිරීමට සූත්‍රයක් භාවිතා කරයි. දීප්තිය එළිපත්තට ඉහළින් තිබේ නම්, ශ්‍රිතය නැවත පැමිණේ #000000, කළු සඳහා hex කේතය වන. දීප්තිය එළිපත්තට වඩා අඩු නම්, ශ්‍රිතය නැවත පැමිණේ #ffffff, එය සුදු සඳහා hex කේතය වේ.

මෙම එළිපත්තෙහි පරමාර්ථය වන්නේ ලබා දී ඇති පසුබිම් වර්ණය සඳහා තෝරාගත් පෙළ වර්ණයට පහසුවෙන් කියවිය හැකි තරම් ප්‍රතිවිරෝධතාවක් ඇති බව සහතික කිරීමයි. සාමාන්‍ය රීතියක් නම්, අඳුරු පසුබිමක සැහැල්ලු අකුරු (උදා: සුදු හෝ කහ) භාවිත කළ යුතු අතර, සැහැල්ලු පසුබිමක අඳුරු පෙළ (උදා: කළු හෝ නිල්) භාවිත කළ යුතු බව ය. වර්ණයක් ආලෝකය ද අඳුරු ද යන්න තීරණය කිරීමට එළිපත්ත භාවිතා කිරීමෙන්, ශ්‍රිතයට ලබා දී ඇති පසුබිම් වර්ණය සඳහා සුදුසු පෙළ වර්ණය ස්වයංක්‍රීයව තෝරා ගත හැකිය.

ඉහත ශ්‍රිතය භාවිතා කරමින්, මට පසුබිම් වර්ණය මත පදනම්ව අකුරු-වර්ණ CSS ක්‍රමලේඛනගතව යෙදිය හැක. පරිවර්තකය පරීක්ෂා කරන්න, එය කෙතරම් හොඳින් ක්‍රියාත්මක වේද යන්න ඔබට පෙනෙනු ඇත!

Douglas Karr

Douglas Karr හි CMO වේ විවෘත INSIGHTS සහ නිර්මාතෘ Martech Zone. ඩග්ලස් සාර්ථක MarTech ආරම්භක දුසිම් ගණනකට උදව් කර ඇත, මාර්ටෙක් අත්පත් කර ගැනීම් සහ ආයෝජන සඳහා ඩොලර් 5 කට වඩා වැඩි කඩිසරකමකට සහාය වී ඇත, සහ ඔවුන්ගේ විකුණුම් සහ අලෙවිකරණ උපාය මාර්ග ක්‍රියාත්මක කිරීමට සහ ස්වයංක්‍රීය කිරීමට සමාගම්වලට දිගටම සහාය වේ. ඩග්ලස් යනු ජාත්‍යන්තරව පිළිගත් ඩිජිටල් පරිවර්තනයක් වන අතර MarTech විශේෂඥයෙකු සහ කථිකයෙකි. ඩග්ලස් ඩමිගේ මාර්ගෝපදේශකයෙකු සහ ව්‍යාපාර නායකත්ව පොතක ප්‍රකාශිත කතුවරයෙකි.

සබැඳි පුවත්

ඉහළට බොත්තම
සමීප

Adblock අනාවරණය විය

Martech Zone වෙළඳ දැන්වීම් ආදායම, අනුබද්ධ සබැඳි සහ අනුග්‍රාහකත්ව හරහා අපි අපගේ වෙබ් අඩවියෙන් මුදල් උපයන නිසා කිසිදු වියදමකින් තොරව ඔබට මෙම අන්තර්ගතය ලබා දීමට හැකි වේ. ඔබ අපගේ වෙබ් අඩවිය නරඹන විට ඔබේ දැන්වීම් අවහිර කරන්නා ඉවත් කරන්නේ නම් අපි අගය කරන්නෙමු.