Read Aloud - Default x CSS

  1. 2 years ago

    Hi there, i`m beginner user of PubCoder. I would to know more about these topics:

    - Where I find the CSS file for change appearence of read aloud selection? I would to change border radius and animate each interaction with words/text when the voice reach them, now I only use the default Text color and highlight by project properties panel , but is too much limited. exemple of CSS:

    ::selection {
    color: white;
    background: Black;
    border-radius: 25px;
    }

    - PubCoder has a animation for text like a typewriter effect? showing letter by letter?

    - If do not have a animation by default, I would to do a typewriter effect with text combined with read aloud tool, i believe it is possible with CSS, i`ve testing the possibility it using this parameters, but I need to acces to read aloud CSS to combine them together:

    p {
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation:
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
    }

    /* The typing effect */
    @keyframes typing {
    from { width: 0 }
    to { width: 100% }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
    }

    source: https://css-tricks.com/snippets/css/typewriter-effect/

    - Another topic is about text along the path using SVG files, PubCoder accept that resource?

    exemple:

    Html

    <svg viewBox="0 0 500 500">
    <path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
    <text width="500">
    <textPath xlink:href="#curve">
    Dangerous Curves Ahead
    </textPath>
    </text>
    </svg>

    CSS

    body {
    background-color: #333;
    font-family: 'Luckiest Guy', cursive;
    font-size: 35px;
    }

    path {
    fill: transparent;
    }

    text {
    fill: #FF9800;
    }

    source: https://css-tricks.com/snippets/svg/curved-text-along-path/

    I received a project of children's book to make, but i need to decide between pubcoder or other solution.

    Thanks.

  2. Angelo S

    9 Jun 2021 Administrator
 

or Sign Up to reply!