CODEWITHSUNDEEP
javascripthtmlcsswebkitstroke
Frak
Frak

Reputation: 865

How to add stroke for html styling in javascript?

I have a lock-screen widget that uses a .js file to do the styling of a clock element. The problem is that depending on the wallpaper, that clock's color is hard to read sometimes (black on dark background). I found the element that changes the clock text's color but that's not enough. I want to be able to add a stroke to it so that it has a thickness and dual colors. That way it will be clear to read whatever the background.

The actual element is this:

var elements = {
    "zclock": {
        "z-index": 2,
        "color": "gray",    <--- This changes color of clock text
        "webkit-text-stroke-width": "3px",
        "font-family": "sanfranlight",
        "position": "absolute",
        "font-size": "51px",
        "top": 0,
        "left": 1,
        "width": "119px",
        "text-align": "right",
        "font-weight": "100"
    },
    <omitted rest>
    };

I've tried using something called -webkit-text-stroke-width but that didn't work. Maybe I entered it wrong because it's only ever referenced in css files in online examples.

I want to get this kind of effect (or similar) enter image description here

This is for an iPhone/iOS so it would be whatever webkit Safari uses.

Upvotes: 1

Views: 2649

Answers (2)

DekiGk
DekiGk

Reputation: 23

Maybe you are using IE 11 and the -webkit-text-stroke is not working as it is not supported: see here

What you can try using instead is text-shadow. See supported browsers here

It is really nicely explained here

Upvotes: 0

SamBrishes
SamBrishes

Reputation: 127

Hellow,

you can try to add a "-webkit-text-stroke-color" property to this object too and may increase the "font-weight". The "webkit-text-stroke-width" property in your code may needs also a leading "-" to work.

Example in pure CSS / HTML

.element{
    color: #fff;
    font-weight: 700;
    font-size: 51px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
}

See also -webkit-text-stroke-width and -webkit-text-stroke on MDN.

Sincerely, Sam.

Upvotes: 1

Related Questions