How do I use Text Stroke, so the text can "disappear" off the screen?

[simona6]

.custom-stroke-text-effect-1 {
    -webkit-text-fill-color: #FFF;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #2a2a2a;
    white-space: nowrap;
    font-size: 7rem;
    opacity: 0.1;
    font-family: "Geomanist";
    margin-top: 41px;
}

@media only screen and (max-width: 950px) {
 .custom-stroke-text-effect-1 {
    font-size: 4rem;
}   
}

I am trying to create an effect so the outline text is above and slightly behind the text below it (layered).

Trouble is, on some screens the text goes off the page, causing the sidebars.

I tried overflow:hidden, but that oddly, crops the top and bottom of the text... no idea why.

I could do it with a background image, but prefer it as text if poss.  So it's easier to tweak.

Any ideas?

Bit like the attached, but so the outline text can be bigger.

[Barand]

Does this SVG version fit the bill?

    <div>
        <svg width='100%' viewBox='0 0 1400 200'>
            <defs>
                <style type='text/css'>
                    .text1 {
                        font-family: arial, sans-serif;
                        font-size: 140pt;
                        font-weight: 600;
                        stroke: #DDD;
                        fill: #FFF;
                    }
                    .text2 {
                        font-family: arial, sans-serif;
                        font-size: 70pt;
                        font-weight: 600;
                        fill: #4e1d8f;
                    }
                    .period {
                        fill: #96bd0b;
                    }
                </style>
            </defs>
            <text class='text1' x='50' y='150'>
               UK SUPPORT
            </text>
            <text class='text2' x='50' y='180'>
               Local & UK Website Design
            </text>
            <circle class='period' cx='1280' cy='170' r='10' />
        </svg>
    </div>

[simona6]

Sorry I'm puzzled.

Does this SVG method take on the font used on the site?

I've read you can use a vw font size, but I don't really understand it. I assumed you could set a font to be say, 90% width of the viewpoint of the screen, or the container.  So it will stretch to fit.  So rather than one version for that media size,and another for multiple - you can just use a VW version that "fits all".

 

but it doesn't work.

[Barand]

8 minutes ago, simona6 said:

Does this SVG method take on the font used on the site?

At present, the font to be used is defined in the two text styles within the SVG. If you remove those two font-family attributes it will default to the font used by the parent (page body). If a different font is used you will have to adjust the font sizes and text positions, or adjust the "canvas"size (viewBox)

Currently <svg width='100%' ... > fits the image to the width of the container. The whole image will scale proportionately as the container size changes so it alway fills the width.

[simona6]

<div>
        <svg width='100%' viewBox='0 0 1400 200'>
            <defs>
                <style type='text/css'>
.text1 {
padding-top: 50px;
    font-family: Geomanist-Bold;
    font-size: 193pt;
    font-weight: 600;
    stroke: #d3cdcd;
    stroke-width: 2px;
    fill: transparent;
}
                </style>
            </defs>
            <text class='text1' x='50' y='150'>
               WordPress
            </text>
        </svg>
    </div>

This Crops top and bottom for some reason.

I also assuemd the Font size would be a percentage, so that's a bit confusing to me.  I assume SEO does pick this up, as it is "text"?  (tho the words in this case are not vital).

Just assumed you could haev text that is a percentage of it's containing DIV.

[Barand]

Your text baseline is 150px from the top of the drawing area but your font size is 193pt - that will crop the top off the text

6 minutes ago, simona6 said:

I assume SEO does pick this up, as it is "text"? 

Should do, it's part of the page HTML DOM

[simona6]

<div>
        <svg width='100%' viewBox='0 0 1400 200'>
            <defs>
                <style type='text/css'>
.text1 {
padding-top: 50px;
    font-family: Geomanist-Bold;
    font-size: 193pt;
    font-weight: 600;
    stroke: #d3cdcd;
    stroke-width: 2px;
    fill: transparent;
}
                </style>
            </defs>
            <text class='text1' x='50' y='193'>
               WordPress
            </text>
        </svg>
    </div>

So this should work?  And shouldnt' crop it?

I take it there is no way to use the VW font-size method, as I don't understand it.

[simona6]

I couldn't get it to work.

I want really to have a CSS that can set the text to be 100% the width of the containing DIV (ie, if it is in a 50% column...

And then one that I can tweak (ie. i fit is  in a full width column, I could set it to say 2/3s width.

Possible?

[Barand]

Both are possible - SVG images are scalable without distortion.

• Relative positions and proportions are more important than actual sizes.
• Determine the width and height of the two text strings - use imagettfbbox() function to get dimensions. (Text1 is going to be about twice the fontsize of text2).
• Determine the size of the viewBox required to hold them (It helps to set a background color to the whole SVG if experimenting with its size so you can check the fit.) EG...

Setting svg width to either 100% or 66% will give your width requirements above.

[simona6]

Why does it crop the top off tho?

Some pages will need it bigger than others, so I assumed there was a way to just make it "full the box", or at times, control it more.

[Barand]

9 minutes ago, simona6 said:

Why does it crop the top off tho?

I don't know, can't test under your conditions.

I tried getting the geomanist font. It seems to be a con!

The Altpo site gives you a "Free download" button then immediately asks you if you will be paying via Twitter or Facebook to continue.

As this is a one-off, I exited.

[simona6]

Geomanist is a paid for Font, so you won't be able to get it free, tho there maybe some non-commercial versions.

I just assumed the vm version of font=size would do it, rather than converting to SVG.

[Barand]

The example image with the grey background above used 8.2rem and 4rem for the two font sizes. The whole image was scaled was scaled at 100% inside 480px container width