Check mark for selecting from U+02714 to U+02713

JLegault

Description of problem:
When using the Select extension the select checkbox default font does not render the check mark properly. It is outside the box that is supposed to contain it. This is because by default all browsers on Windows render the box with Segoe UI Emoji and not Segoe UI Symbol as show in the example.

One fix would be to change the font family for the select boxes, but personally I think an easier change is to modify line 115 in select.dataTables.scss from
content: '\2714';
to
content: '\2713';

2713 is the regular check mark instead of the heavy check mark, and renders the same across all browsers and operating systems without needing to modify font families.

Example: http://live.datatables.net/sasopola/1/

allan

Hi,

Thanks for your post and also PR to address this. My concern with using \2713 rather than \2714 is mainly about legibility. felt that the regular check wasn't as easy to see.

Is the concern here just about the positioning of the tick in the tick box? If so, would a margin-left: -5px on the ::after element used for the check work for you?

Allan

JLegault

Well with the heavy check mark the positioning would need to change based on the font of the page. The regular check mark displays much more consistently across OS and browsers. Also, the tick that is shown in your examples is styled specifically using font-family in order to appear as the regular check mark as the font chosen is Segoe UI Symbol while the default for Windows is Segoe UI Emoji. Take a look at this vs this, the regular check mark is much more consistent looking than the heavy check mark. You could even give the regular check mark a larger font weight so it is more visible if needed, but I think the major differences in how heavy check mark is rendered means we should steer clear. Take a look at this stack overflow response as to why exactly the render is different.

allan

Thanks for the discussion on this. I've merged it in based on the SO thread.

The one thing I don't get is why I'm not seeing what you are on Windows. Perhaps just a version thing, but the tick as it was looked right to me. It looks fine with the non-strong version as well.

Unfortunately font-weight appears to have no difference - I've committed a small change to increase the font-size instead.

Regards,
Allan