Чӣ тавр шумо метавонед ба таври барномавӣ ранги шрифтро дар заминаи замина иваз кунед? (Режими равшан/торик)
Агар шумо дидан карда бошед Martech Zone вақтҳои охир, шумо шояд пай бурдед, ки мо ҳоло қобилияти дидани сайтро дар ҳолати равшан ё торик пешниҳод мекунем. Танҳо ҷустуҷӯ кунед моҳ ё офтоб тасвири паҳлӯи сана дар сатри паймоиши чапи боло дар сайт.
Ин як хусусияти хеле аҷиб аст ва он дар ҳақиқат хуб кор мекунад. Вақте ки ман як воситаи нави табдили ба HEX ба RGB иваз кунед, Ман мехостам воқеан рангеро намоиш диҳам, ки корбар барои ҳисоб карданӣ буд. Ман на танҳо рангро намоиш медиҳам, балки як хусусияти хуберо илова кардам, ки номи рангро нишон медод. Аммо ин як масъаларо ба вуҷуд овард ...
Агар намунае, ки рангро нишон медод, заминаи равшане дошта бошад, шумо матнеро, ки ман барои намунаи динамикӣ тавлид мекунам, хонда наметавонед. Ҳамин тавр… Ман маҷбур будам, ки функсияе эҷод кунам, ки ранги шрифтро дар асоси ранги замина ва оё контрасти кофӣ барои дидани ҳуруф вуҷуд дорад ё не.
Функсияи JavaScript барои ҳолати равшан ё торик
Ба ман лозим буд, ки функсияе эҷод кунам, ки дар он ман метавонам рамзи шонздаҳгонаи рангро гузаронам ва пас баргардам, ки шрифт дар асоси контраст сафед ё сиёҳ бошад. Ин функсияи JavaScript ҳиллаеро иҷро кард…
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
, ки рамзи шонздаҳӣ барои сиёҳ аст. Агар равшанӣ аз ҳадди поёнтар бошад, функсия бармегардад #ffffff
, ки рамзи шонздаҳӣ барои сафед аст.
Мақсади ин ҳадди ниҳоӣ таъмини он аст, ки ранги матне, ки барои ранги пасзаминаи додашуда интихоб шудааст, контрасти кофӣ дошта бошад, то ба осонӣ хонда шавад. Қоидаи маъмул ин аст, ки матни равшан (масалан, сафед ё зард) бояд дар заминаи торик ва матни торик (масалан, сиёҳ ё кабуд) дар заминаи равшан истифода шавад. Бо истифода аз ҳадди барои муайян кардани равшанӣ ё торик будани ранг, функсия метавонад ба таври худкор ранги матни мувофиқро барои ранги пасзаминаи додашуда интихоб кунад.
Бо истифода аз функсияи дар боло зикршуда, ман метавонам ба таври барномавӣ CSS-ро дар асоси ранги замина истифода барам. Табдилдиҳандаро санҷед ва шумо хоҳед дид, ки он то чӣ андоза хуб кор мекунад!