Visualizzazione risultati 1 fino 6 di 6

Discussione: Testo allineato su un arco

  1. #1
    Guest

    Predefinito Testo allineato su un arco

    Ciao a tutti.
    Ho la necessità di allineare del testo non centrato o a sinistra ma su un arco.
    Cioè, mi chiedevo se fosse possibile scrivere del testo ad esempio dentro un quarto di cerchio ed allinearlo non al lato verticale ma bensì a quello tondo.
    In questo modo riuscirei a fare un buon lavoro.
    Qualsiasi idea o spunto è ben accetto.
    Grazie a tutti,
    ciao!

    MrBinding

  2. #2
    Guest

    Predefinito

    devi farlo a mano dando le coordinate assolute o relative ad ogni lettera
    x esempio:
    Codice HTML:
    <span style="position:absolute;x:0px;y:10px">A</span>
    <span style="position:absolute;x:10px;y:0px">b</span>
    ecc
    ma mi sa che fai prima a farlo come immagine

  3. #3
    L'avatar di heracleum
    heracleum non è connesso Utente storico
    Data registrazione
    21-01-2004
    Messaggi
    3,333

    Predefinito

    Oppure la tecnica opposta a quella di dxblade (ma non tanto più comoda alla fin fine):
    diciamo che a sinistra dello spazio con il testo metti un'immagine tondeggiante (come mi sembra di aver capito) e che dunque tu voglia adattare l'inizio di ogni riga di testo all'estremità destra della figura tondeggiante, lato che dunque risulta ad arco come dici.
    Bene puoi mettere delle IMG vuote o più elegantemente dei DIV (sempre vuoti e trasparenti) in pila uno sopra all'altro, ciascuno di larghezza diversa in modo tale da formare con le loro larghezze una forma ad arco, considerando le estremità destre di questi div.

    Per farti capire, fai conto che un [....] è il rettangolo costituito da un div :
    [.......] testo testo testo testo
    [.........] testo testo testo tes
    [..........] testo testo testo te
    [.........] testo testo testo tes
    [.......] testo testo testo testo

    Ebbene tutti questi elementi devono avere l'attributo float a sinistra così:

    <div style="float:left; width:xxx; height:xx"></div>

    e poi ovviamente lavori con le dimensioni, soprattutto con la width che crescerà.. e poi descrescerà negli ultimi div.

    subito dopo questa serie di div, fai seguire il testo, che a differenza della soluzione di dxblade, può andare a capo liberamente, ed ogni riga di testo è sensibile a questi elementi con float:left, cioè che sono allineati a sinistra e coprono lo spazio da loro occupati.
    Dunque il testo dovrebbe seguire questa forma arcuata, definita dagli elementi sistemati a sinistra. Poi se la figura visibile tondeggiante, fa parte del background dello spazio bene, non devi fare altro, altrimenti dovrai inserire in un DIV con style="position:absolute; top:xxx; left:xxx" l'immagine reale, per completare l'effetto con il testo che segue idealmente questa immagine (mentre in realtà segue gli elementi in pila).
    Penso proprio che funzioni, facci sapere e dacci l'eventuale link dell'esperimento, in modo da controllarlo nel caso non funzioni come dovrebbe, per correggerlo.
    Avvertimento: richiedere in privato questioni tecniche produrrà inevitabilmente una supercazzola prematurata come risposta. (5 served)

  4. #4
    Guest

    Talking

    Grazie per le tempestive risposte innanzitutto.
    Domani mi metterò all'opera e infine vi farò sapere l'esito.
    Ho ancke alcune idee... la notte porterà consiglio.. :)
    Ciao, grazie ancora.

    MrBinding

  5. #5
    L'avatar di heracleum
    heracleum non è connesso Utente storico
    Data registrazione
    21-01-2004
    Messaggi
    3,333

    Predefinito

    Beh sì, se non si fosse capito prima, insomma non c'è una funzione immediata e comoda per fare ciò (almeno non di nostra conoscenza ).
    Avvertimento: richiedere in privato questioni tecniche produrrà inevitabilmente una supercazzola prematurata come risposta. (5 served)

  6. #6
    Guest

    Predefinito

    ... ma una bella gif con photoshop???

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •