1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • text inside radius

    From Andrew Poulos@21:1/5 to All on Mon Jun 29 15:51:39 2020
    With a DIV, containing a P, that has a border-radius of 50% is there a
    way to make sure the text doesn't go over the radius (ie. look like it
    extends beyond the sides of the DIV) without having to set up a
    shape-outside polygon (or multi little DIVs)?

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Evertjan.@21:1/5 to Andrew Poulos on Mon Jun 29 13:53:23 2020
    Andrew Poulos <ap_prog@hotmail.com> wrote on 29 Jun 2020 in comp.infosystems.www.authoring.stylesheets:

    With a DIV, containing a P, that has a border-radius of 50% is there a
    way to make sure the text doesn't go over the radius (ie. look like it extends beyond the sides of the DIV) without having to set up a
    shape-outside polygon (or multi little DIVs)?

    overflow: hidden;

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Evertjan. on Tue Jun 30 08:59:42 2020
    On 29/06/2020 9:53 pm, Evertjan. wrote:
    Andrew Poulos <ap_prog@hotmail.com> wrote on 29 Jun 2020 in comp.infosystems.www.authoring.stylesheets:

    With a DIV, containing a P, that has a border-radius of 50% is there a
    way to make sure the text doesn't go over the radius (ie. look like it
    extends beyond the sides of the DIV) without having to set up a
    shape-outside polygon (or multi little DIVs)?

    overflow: hidden;

    ;-)

    Still I find it lamentable that text gets cut off by a border radius.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Evertjan.@21:1/5 to Andrew Poulos on Tue Jun 30 17:16:26 2020
    Andrew Poulos <ap_prog@hotmail.com> wrote on 30 Jun 2020 in comp.infosystems.www.authoring.stylesheets:

    On 29/06/2020 9:53 pm, Evertjan. wrote:
    Andrew Poulos <ap_prog@hotmail.com> wrote on 29 Jun 2020 in
    comp.infosystems.www.authoring.stylesheets:

    With a DIV, containing a P, that has a border-radius of 50% is there a
    way to make sure the text doesn't go over the radius (ie. look like it
    extends beyond the sides of the DIV) without having to set up a
    shape-outside polygon (or multi little DIVs)?

    overflow: hidden;

    ;-)

    Still I find it lamentable that text gets cut off by a border radius.

    Well, but that wasn't your Q.

    =====

    Since you decide, what text goes in, using <pre> and text-align:center;
    you have complete control over this.

    If you want to automate it, there is javascript and trigonometry to
    manipulate it to the last pixel, using ch values [-30% corrected],
    inline-block confines, and finally transform:scale();


    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?@21:1/5 to Andrew Poulos on Thu Jul 2 01:07:03 2020
    This is a multi-part message in MIME format.
    On 29/06/2020 23:59, Andrew Poulos wrote:


    Still I find it lamentable that text gets cut off by a border radius.


    [ img attached ] <https://i.imgur.com/KlMk7fM.png>



    --

    With over 1.2 billion devices now running Windows 10, customer
    satisfaction is higher than any previous version of windows.


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body text="#008000" bgcolor="#faf0e6">
    <div class="moz-cite-prefix">On 29/06/2020 23:59, Andrew Poulos
    wrote:<br>
    </div>
    <blockquote type="cite"
    cite="mid:y6mdnXEoMKz972fDnZ2dnUU7-Y3NnZ2d@westnet.com.au"><br>
    <br>
    Still I find it lamentable that text gets cut off by a border
    radius.
    <br>
    <br>
    <br>
    </blockquote>
    <a href="https://i.imgur.com/KlMk7fM.png"><img
    moz-do-not-send="true" src="https://i.imgur.com/KlMk7fM.png"
    alt="[ img attached ]" width="324" height="362" border="12"></a>
    <p><br>
    </p>
    <p><br>
    </p>
    <div class="moz-signature">-- <br>
    <div style="background-color: blue; color: yellow; font-weight:
    bolder; display: grid; align-items: center; justify-items:
    center; min-height: 80px; font-size: 1.2em; border-radius: 50px;
    ">
    <p>With over 1.2 billion devices now running Windows 10,
    customer satisfaction is higher than any previous version of
    windows.</p>
    </div>
    </div>
    </body>
    </html>

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Evertjan.@21:1/5 to Hello.World@example.com on Thu Jul 2 16:06:53 2020
    =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?= <Hello.World@example.com> wrote on 02
    Jul 2020 in comp.infosystems.www.authoring.stylesheets:

    On 29/06/2020 23:59, Andrew Poulos wrote:


    Still I find it lamentable that text gets cut off by a border radius.


    [ img attached ] <https://i.imgur.com/KlMk7fM.png>

    Try:

    <style>
    body {
    background:#333;
    }
    pre {
    --diam:950px;
    box-sizing: border-box;
    border: 2px solid yellow;
    border-radius: 50%;
    text-align:center;
    width:var(--diam);
    height:var(--diam);
    background:black;
    color:white;
    font-size:22pt;
    padding-top:90px;
    overflow:hidden;
    }
    </style>

    <pre>
    Lorem ipsum
    dolor sit amet,
    consectetur adipiscing elit,
    sed do eiusmod tempor incididunt
    Ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquit
    ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt
    mollit anim id est laborum.

    At vero eos et accusamus et iusto odio dignissimos
    ducimus qui blanditiis praesentium voluptatum
    deleniti atque corrupti quos
    dolores et quas molestias
    excepturi sint occaecati
    cupiditate non provident,
    similique sunt
    in culpa.
    </pre>



    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Evertjan. on Fri Jul 3 09:25:16 2020
    On 3/07/2020 12:06 am, Evertjan. wrote:
    =?UTF-8?B?8J+YiSBHb29kIEd1eSDwn5iJ?= <Hello.World@example.com> wrote on 02 Jul 2020 in comp.infosystems.www.authoring.stylesheets:

    On 29/06/2020 23:59, Andrew Poulos wrote:


    Still I find it lamentable that text gets cut off by a border radius.


    [ img attached ] <https://i.imgur.com/KlMk7fM.png>

    Try:

    <style>
    body {
    background:#333;
    }
    pre {
    --diam:950px;
    box-sizing: border-box;
    border: 2px solid yellow;
    border-radius: 50%;
    text-align:center;
    width:var(--diam);
    height:var(--diam);
    background:black;
    color:white;
    font-size:22pt;
    padding-top:90px;
    overflow:hidden;
    }
    </style>

    <pre>
    Lorem ipsum
    dolor sit amet,
    consectetur adipiscing elit,
    sed do eiusmod tempor incididunt
    Ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquit
    ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt
    mollit anim id est laborum.

    At vero eos et accusamus et iusto odio dignissimos
    ducimus qui blanditiis praesentium voluptatum
    deleniti atque corrupti quos
    dolores et quas molestias
    excepturi sint occaecati
    cupiditate non provident,
    similique sunt
    in culpa.
    </pre>


    For a "one off" that could work but being able to do something like
    shape-inside: content-box;
    which could also force the box larger to automatically display all of
    the content (without scroll bars) would be ideal.

    Andrew Poulos

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)