Accesskey n salta alla navigazione della pagina. Salta al contentuo.

Questo documento è una traduzione. In caso di differenze o errori, dovrebbe essere considerato la fonte più autorevole l'ultimo documento originale Inglese. Il copyright originale appartiene al W3C, come mostrato in basso.

Traduttore: Italian Translation Team, Trusted Translations, Inc.

s_gotoW3cHome Internationalization
 

Creare pagine SVG in arabo, ebraico e in altri script da destra a sinistra

Intended audience: Il contenuto SVG consente agli autori di implementare pagine SVG Tiny in script da destra a sinistra come l'arabo o l'ebraico o di gestire testo incorporato con script da destra a sinistra. Questo materiale è applicabile quando si creano documenti sia con un editor che tramite scripting.

Perché leggere queste informazioni?

Gli script da destra a sinistra sono l'arabo, l'ebraico, il Thaana e il N'ko e sono usati da un gran numero di persone in tutto il mondo. Se non si è esperti nel trattamento dei tasti bidirezionali, ottenere una corretta visualizzazione può talvolta risultare complesso e difficile. Questo tutorial sarà utile per trovare l'approccio ideale per il markup dei contenuti, sia per chi si è già imbattuto in tale tipo di problemi che per chi deve ancora iniziare. Questo documento spiega inoltre il funzionamento dell'algoritmo bidirezionale, per permettere di comprendere meglio le cause della maggior parte dei problemi. Si tratteranno altresì alcune concezioni erronee relative al markup dei contenuti bidirezionali.

Obiettivi

Gli obiettivi di questo tutorial sono i seguenti:

Creare esempi di testo bidi nel codice sorgente risulta problematico, dato che la maggior parte degli editor di testo sorgente non applicano la semantica di markup al contenuto oppure mantengono il markup separato dal contenuto quando si applicano le modifiche. Ciò significa che il codice sorgente che si scrive potrebbe non essere uguale agli esempi di codice mostrati in questo tutorial. Per maggior chiarezza, in questi esempi il markup e il contenuto vengono mantenuti separati e mostrano il contenuto secondo l'aspetto definitivo previsto.

Tenere presente che la specifica SVG Tiny 1.2 è stata pubblicata come Indicazione il 22 dicembre 2008. Potrebbe passare un certo periodo prima che la funzionalità descritta in questo tutorial sia distribuita su larga scala.

Impostazione dell'orientamento del documento

Questa sezione è suddivisa in:

Concetti di base

Aggiungere direction="rtl" al tag svg per impostare l'orientamento di base del documento quando l'orientamento generale del documento è da destra a sinistra. L'orientamento di base stabilisce il contesto direzionale generale del testo all'interno dell'elemento in cui viene dichiarato.

Non è necessario definire in modo esplicito l'orientamento di base dei documenti con maggioranza di script da destra a sinistra, essendo questa l'impostazione predefinita.

Successivamente, non è necessario alcun markup direzionale aggiuntivo nel contenuto. Il valore della proprietà direction impostato nell'elemento svg viene ereditato dagli elementi relativi al testo nell'intero documento. Gran parte del riordinamento necessario per visualizzare il testo viene automaticamente svolta dall'algoritmo bidirezionale Unicode ("algoritmo bidi"). Questa operazione è mostrata nell'esempio seguente.

Esempio: La proprietà direction impostata nel tag svg. [live code]
<svg xmlns="http://www.w3.org/2000/svg"
	width="100%" height="100%" viewBox="0 0 400 400"
	direction="rtl" xml:lang="fa">
	<title>...</title>
	<desc>...</desc>
	<text x="200" y="200"
		font-size="10">داستان SVG Tiny 1.2 طولا ني است.</text>
	</svg>

Il testo viene visualizzato nel seguente ordine (corretto), se l'implementazione supporta la gestione del testo bidi:

Analisi del testo in persiano

Senza la proprietà direction, il testo avrebbe avuto questo aspetto:

Aspetto del testo in persiano se non compreso in un contesto RTL.

Ovviamente, in alcune situazioni può essere necessario applicare più markup, come descritto di seguito. Inoltre, aggiungendo direction="rtl" all'elemento svg comporterà alcuni effetti automatici sulle proprietà text-align e text-anchor, le quali verranno descritte tra breve.

Tag lingue.

Quando si dichiara l'orientamento del documento nel tag svg, non dimenticare di dichiarare la lingua del documento che utilizza l'attributo xml:lang (vedere Tag lingue in HTML e XML).

Tuttavia, sarebbe un errore pensare che le dichiarazioni della lingua indichino la direzionalità e viceversa.

Anche se viene usato un sottotag di script nel valore dell'attributo della lingua, questo non influenza l'orientamento del testo nell'agente dell'utente. L'orientamento deve essere dichiarato usando l'attributo dir.

Logica, non visualizzazione

L'ordinamento visivo del testo in ebraico era comune in agenti utente HTML molto vecchi, che non supportavano l'algoritmo bidirezionale Unicode. Il testo veniva memorizzato nel codice sorgente nello stesso ordine di visualizzazione previsto. Ciò non era altrettanto comune nei testi in arabo, poiché non univa correttamente i caratteri arabi.

Con l'ordinamento logico, il testo viene memorizzato nell'ordine in cui viene normalmente digitato (e, di solito, pronunciato). L'algoritmo bidirezionale Unicode viene quindi applicato dal browser per restituire la corretta visualizzazione. Oggi quasi tutti i testi nel Web sono in ordine logico.

È sempre opportuno digitare il contenuto da destra a sinistra in ordine logico e affidarsi all'algoritmo bidirezionale e al markup per una corretta visualizzazione. In caso contrario, non sarà possibile ricercare il testo, riutilizzarlo, gestire con facilità il contenuto ecc.

Esempio

Nella figura seguente, la frase "פעילות הבינאום, W3C" (di colore blu in cima alla pagina) compare come verrebbe normalmente visualizzata in un paragrafo da destra a sinistra. Le frecce numerate mostrano la direzione di lettura. Leggere le sequenze secondo l'ordine dei numeri.

L'ordine di memorizzazione logico e quello visivo a confronto.

La seconda riga mostra l'ordine dei caratteri nella memoria secondo l'ordine di codifica logico (presupponendo che il primo carattere in memoria si trovi sulla sinistra, quello successivo a destra e così via).

La terza riga mostra l'ordine dei caratteri in memoria nell'ordine di codifica visivo (presupponendo lo stesso concetto relativo all'ordine nella memoria).

Concetti relativi agli elementi di testo e di textArea

Questa sezione è suddivisa in:

Come eseguire il markup dei contenuti

Dopo aver stabilito l'orientamento di base a livello dell'elemento svg, non usare la proprietà direction su altri elementi a meno che non si voglia modificare la loro direzione di base.

Un uso non necessario della proprietà direction influenza la larghezza di banda e potrebbe comportare un inutile lavoro aggiuntivo per la manutenzione della pagina.

Tuttavia, l'orientamento di base stabilito dalla proprietà direction influenza l'ordinamento di testo e punteggiatura di lingue combinate all'interno di un elemento text o textArea (questa caratteristica viene descritta in dettaglio più avanti). Di volta in volta è possibile modificare l'orientamento di base per uno di questi elementi se è in una lingua diversa dal resto della pagina.

Per fare questo, è sufficiente usare la proprietà direction sull'elemento o su un elemento di raggruppamento intorno al contenuto di interesse.

Esempio: Modificare l'orientamento di un blocco. [live code]

In questo esempio viene usato un elemento di raggruppamento intorno a vari elementi text che hanno bisogno di un orientamento di base da sinistra a destra per avere un aspetto corretto. L'uso di un elemento di raggruppamento riduce la quantità di lavoro necessaria per ottenere il risultato desiderato. L'orientamento impostato viene ereditato dagli elementi text inclusi.

<svg xmlns="http://www.w3.org/2000/svg"
	width="100%" height="100%" viewBox="0 0 400 400"
	direction="rtl" xml:lang="he">
	<title>...</title>
	<desc>...</desc>
	<text x="200" y="20"
		font-size="10">כתובת לפניות באנגליה:</text>
	<g direction="ltr">
		<text x="100" y="40"
			font-size="10">3, Tennyson House</text>
		<text x="100" y="50"
			font-size="10">17 Clairbourne Road,</text>
		<text x="100" y="60"
			font-size="10">Harpenden AL5 4SD</text>
		</g>
	</svg>

Senza il markup dell'orientamento nell'elemento g, il testo viene visualizzato in un modo simile al seguente:

Analisi del risultato.

Con la proprietà direction impostata, il testo avrà l'aspetto desiderato.

Analisi del risultato.

Tenere presente che l'allineamento del testo relativo alla coordinata x è diverso per i due esempi presentati sopra. Questo tema verrà discusso più avanti.

Orientamento e allineamento del testo

La proprietà text-align viene usata con l'elemento textArea e i relativi valori sono start, middle ed end. È importante ricordare che il primo e l'ultimo di questi valori fanno riferimento al testo in maniera logica invece che fisica.

start indica il punto in cui si inizia normalmente a leggere una riga dopo aver fornito l'orientamento di base corrente. Quando l'orientamento di base è da sinistra a destra, significa a sinistra dell'elemento textArea. Se invece l'orientamento di base è da destra a sinistra, significa a destra dell'elemento textArea.

Per end, procedere all'inverso.

Questo metodo risulta intuitivo se si usa CSS con HTML, dato che la proprietà direction in CSS allinea automaticamente a destra il testo in un blocco.

Esempio: text-align impostato su start per il testo RTL. [live code]

In questo esempio in lingua urdu, l'orientamento da destra a sinistra impostato nell'elemento svg viene ereditato dall'elemento textArea.

<svg xmlns="http://www.w3.org/2000/svg"
	width="100%" height="100%" viewBox="0 0 400 400"
	dir="rtl" xml:lang="ur">
	<title>...</title>
	<desc>...</desc>
	<textArea x="20" y="20" width="200">
		فعالیت بین‌المللی‌سازی، W3Cنا
‎        عالمگیر ویب کو حقیقی طور پر عالمگیر بنانا
		</textArea>
	</svg>

Sullo schermo, il testo compare allineato a destra all'interno della casella textArea, come mostrato di seguito, dato che il valore predefinito di text-align è start, che per un orientamento da destra a sinistra significa allineato a destra.

Analisi del risultato.

Orientamento e ancoraggio del testo

La proprietà text-anchor viene usata con l'elemento text e i relativi valori sono start, middle ed end. Di nuovo, il primo e l'ultimo di questi valori fanno riferimento al testo in modo logico e non fisico.

Se non è stato specificato alcun orientamento di base o se è stato specificato direction="ltr" e se text-anchor è impostato su start, il testo si estenderà a destra della coordinata x. Se è stato impostato direction="rtl", il testo si estenderà a sinistra della coordinata x. Per impostazione predefinita, text-anchor è impostato su start.

Per end, vale il contrario.

Esempio: Ancoraggio del testo in un testo differente con differenti orientamenti di base. [live code]

In questo esempio inglese/arabo, si usano due elementi, entrambi con la medesima coordinata x e con lo stesso valore predefinito per text-anchor.

<svg xmlns="http://www.w3.org/2000/svg"
	width="100%" height="100%" viewBox="0 0 400 400"
	xml:lang="en">
	<title>...</title>
	<desc>...</desc>
	<text x="200" y="10"
		font-size="10">Internationalization activity, W3C</text>
	<text direction="rtl" x="200" y="20"
		font-size="10">نشاط التدويل، W3C</text>
	</svg>

Anche se la coordinata x per entrambi gli elementi di testo è la stessa, il testo viene visualizzato in modo simile al seguente:

Analisi del risultato.

Tenere presente che la direzione in cui il testo si estende a partire dal punto x (vedere l'esempio precedente) dipende dall'orientamento di base, ad esempio il valore della proprietà direction, e non dal fatto che il testo sia in caratteri latini, arabi o ebraici. Questo aspetto è particolarmente importante.

Significa che, ad esempio, un elenco di termini che contiene parole in caratteri sia latini che arabi non disallinea gli elementi.

Esempio: Lo script non è significativo per l'allineamento del testo. [live code]

L'esempio seguente contiene righe che alternano script in caratteri ebraici e latini:

<svg xmlns="http://www.w3.org/2000/svg"
	width="100%" height="100%" viewBox="0 0 400 400"
	direction="rtl" xml:lang="he">
	<title>...</title>
	<desc>...</desc>
	<text x="200" y="20"
		  font-size="10">פעילות הבינאום, W3C</text>
	<text x="200" y="30" xml:lang="en"
		  font-size="7">(Internationalization Activity, W3C)</text>
	<text x="200" y="50"
		  font-size="10">ליצור מהרשת רשת כלל עולמית באמת</text>
	<text x="200" y="60" xml:lang="en"
		 font-size="7">(Making the World Wide Web worldwide)</text>
	</svg>

Tutti gli elementi nell'elenco degli indirizzi compariranno ancora allineati a destra. Non è necessario compiere alcuna azione particolare sulle righe in caratteri solo latini in modo che si allineino con il resto:

Analisi del risultato.

Tuttavia, è necessario tenere presente che se per qualche motivo si applica direction="ltr" per uno degli elementi text, è anche necessario specificare text-anchor="end" per l'elemento, in modo che continui ad allinearsi con gli altri.

Combinare l'orientamento testo in linea

Questa sezione è suddivisa in:

Nelle sezioni precedenti si è menzionato che alcune volte non è sufficiente aggiungere semplicemente le informazioni sull'orientamento nel tag svg. In questa sezione si spiega perché e quando è necessario maggiore controllo, in particolare si indicherà come contrassegnare gli elementi tspan per l'orientamento (per questo, è necessario inserire la proprietà unicode-bidi).

Concetti di base dell'algoritmo bidi

Contesto direzionale (orientamento di base)

Il risultato dell'applicazione dell'algoritmo bidirezionale dipende dall'orientamento di base generale della frase, paragrafo, blocco o pagina al quale viene applicato. L'orientamento di base stabilisce un contesto direzionale a cui l'algoritmo bidi fa riferimento in vari punti per decidere come gestire il testo.

L'orientamento di base viene impostato in modo esplicito dall'elemento padre più vicino che utilizza la proprietà direction oppure, in sua assenza, viene ereditato dall'orientamento predefinito del tag svg, ovvero da sinistra a destra.

Tenere presente che per i blocchi, un orientamento di base da sinistra a destra può essere impostato solo utilizzando la proprietà direction.

Caratteri e digitazione direzionale

Si è già detto che una sequenza di caratteri latini viene restituita (visualizzata) un carattere dopo l'altro da sinistra a destra (come mostrato in questa pagina). Al contrario, l'algoritmo bidi restituisce una sequenza di caratteri RTL (da destra a sinistra) fortemente tipizzati uno dopo l'altro da destra a sinistra.

Questo avviene indipendentemente dall'attuale orientamento di base ed è dovuto al fatto che a ciascun carattere in Unicode è associata una proprietà direzionale. La maggior parte delle lettere sono fortemente tipizzate come LTR. Le lettere degli script da destra a sinistra sono fortemente tipizzate come RTL.

Digitazione direzionale.

Percorsi direzionali

Quando vengono combinati in linea testi con orientamento differente, l'algoritmo bidi restituisce ciascuna sequenza di caratteri con lo stesso orientamento come percorso direzionale separato.

Quindi, nel seguente esempio ci sono tre percorsi direzionali:

Percorsi direzionali.

Un altro modo di considerare questo aspetto consiste nel fatto che le modifiche all'orientamento marcano i confini dei percorsi direzionali. Tenere presente che non sono necessari markup o stili particolari affinché questo avvenga.

È particolarmente importante comprendere che l'ordine di visualizzazione dei percorsi direzionali nella pagina dipende dall'orientamento di base prevalente.

Le parole presenti nell'immagine seguente sono percorsi direzionali separati. La riga superiore si trova in un contesto in cui l'orientamento di base è LTR; quella inferiore, RTL. I caratteri in entrambe le righe nell'immagine sono memorizzati esattamente nello stesso ordine, ma l'ordinamento visivo dei percorsi direzionali, quando visualizzato, è inverso.

Effetto dell'orientamento di base nella visualizzazione dei percorsi direzionali.

Caratteri neutrali

Gli spazi e la punteggiatura non sono fortemente tipizzati come LTR o RTL in Unicode, perché possono essere usati in entrambi i tipi di script. Vengono quindi classificati come neutrali.

Questa fase è piuttosto particolare. Quando l'algoritmo bidi trova caratteri con proprietà direzionali neutrali (come spazi e punteggiatura), decide come gestirli osservando i caratteri vicini.

Un carattere neutrale tra due caratteri fortemente tipizzati con lo stesso orientamento assume anch'esso la medesima direzione. Quindi, un carattere neutrale tra due caratteri RTL fortemente tipizzati viene trattato come un carattere RTL e causa l'espansione del percorso direzionale. Per questo motivo, le tre parole in arabo nella frase LTR seguente (separate da soli tre spazi, con orientamento neutrale) vengono lette da destra a sinistra come un singolo percorso direzionale. La prima parola araba che viene letta è مفتاح, quindi معايير e الويب.

Caratteri neutrali come parte del percorso direzionale.

Tenere presente che in questo caso non sono necessari markup o stili particolari e che i percorsi direzionali sono soltanto tre.

Una situazione particolare si verifica quando uno spazio o un segno di punteggiatura si trova tra due caratteri fortemente tipizzati con orientamento differente, ad esempio al confine tra due percorsi direzionali. In tal caso, il carattere o i caratteri neutrali vengono trattati come se avessero orientamento equivalente all'orientamento di base.

Anche se sono presenti vari caratteri neutrali tra due diversi caratteri fortemente tipizzati, vengono trattati tutti alla stessa maniera.

Caratteri neutrali.

Cifre

I numeri negli script RTL vengono letti da sinistra a destra nel flusso da destra a sinistra, ma vengono gestiti dall'algoritmo bidi in modo leggermente differente rispetto alle parole. La loro viene definita una direzionalità debole. I due esempi nell'immagine mostrano questa differenza.

Cifre.

Nel primo esempio sono usate cifre con caratteri europei, '1234', nel secondo lo stesso numero viene espresso in caratteri arabi-indiani, ١٢٣٤. In entrambi i casi, le cifre nel numero sono lette da sinistra a destra.

Essendo debolmente tipizzato, il numero viene visto come parte del testo in arabo, quindi le due parole in arabo vicine al numero vengono considerate parte dello stesso percorso direzionale, anche se la sequenza di cifre scorre da sinistra a destra sullo schermo.

Tenere anche presente che alcuni caratteri altrimenti neutrali che si trovano vicino a un numero, come i simboli delle valute, vengono considerati parte del numero invece di caratteri neutrali.

Neutrali tra percorsi direzionali differenti

L'algoritmo bidi gestisce perfettamente il testo nella maggioranza delle situazioni, in particolare non sono necessari markup speciali o altri dispositivi se non per impostare l'orientamento generale del documento. Tuttavia, non sempre la situazione risulta così facile. Di seguito viene mostrato il primo esempio di una situazione in cui l'algoritmo bidirezionale non è sufficiente.

Nella prima riga di questa immagine viene mostrato un punto esclamativo, facente parte del testo in arabo incorporato, che si trova nella posizione sbagliata. Nella seconda riga viene invece mostrato il risultato desiderato.

I caratteri neutrali tra due percorsi direzionali possono finire nella posizione sbagliata.

Grazie a quanto è stato già detto sull'algoritmo bidi, si può facilmente comprendere cosa è accaduto. Poiché il punto esclamativo è stato digitato tra l'ultima lettera RTL "?" (sulla sinistra)? e la lettera LTR "i" (della parola "in"), la sua direzione è determinata dall'orientamento di base del paragrafo (in questo caso, LTR). Tenere presente che non fa differenza che ci siano due caratteri di punteggiatura e uno spazio in questa posizione: sono tutti caratteri neutrali e sono interessati tutti alla stessa maniera. Poiché il punto esclamativo viene visto come carattere LTR, si unisce al percorso direzionale che include il testo "in arabo".

Quindi come si ottiene che la punteggiatura si trovi al posto giusto?

Una risposta consiste nel mettere il testo "in arabo" in un elemento tspan e usare la proprietà direction per modificare l'orientamento di base all'interno di tspan in RTL.

A differenza degli elementi contenitori analizzati in precedenza, tspan richiede di specificare la proprietà unicode-bidi e la proprietà direction per modificare in modo efficace l'orientamento di base. Il valore necessario è embed. Più avanti verrà anche analizzato l'uso di bidi-override.

<text>Il titolo è "<tspan direction="rtl" unicode-bidi="embed" xml:lang="ar"> ... !</tspan>" in arabo.</text>
[live code]

L'ambiente di modifica utilizzato potrebbe non mostrare il punto esclamativo al posto giusto nel codice sorgente, ma nella visualizzazione la posizione è corretta.

Tenere presente come il tag della sezione ricade all'interno delle virgolette, che fanno parte del testo in inglese vicino.

Un'altra possibilità consiste in digitare un carattere RTL invisibile fortemente tipizzato dopo il punto esclamativo. In questo modo, il punto esclamativo viene interpretato come RTL e si unisce al percorso direzionale in arabo.

Quindi accade che è presente un carattere, il carattere Unicode U+200F, denominato RLM (RIGHT-TO-LEFT MARK). Esiste un carattere simile, U+200E, denominato LRM (LEFT-TO-RIGHT MARK). Poiché il carattere è invisibile, è preferibile digitare un riferimento a un carattere numerico (&#x200F;)

Aggiungendo questo carattere subito dopo il punto esclamativo si ottiene il risultato desiderato.

<text>Il titolo è "... !&#x200F;" in arabo.</text>

Se è già presente un markup intorno alla frase, è probabilmente più sensato usare direction su di esso, piuttosto che sul carattere di controllo. Altrimenti, può risultare più semplice usare il carattere di controllo.

Neutrali tra gli stessi percorsi direzionali

La riga superiore della seguente immagine mostra cosa accade a un elenco di elementi RTL all'interno di una frase LTR se ci si affida solamente all'algoritmo bidirezionale (ad esempio, se non si usa la proprietà direction per stabilire l'orientamento di base). Nel nostro esempio, l'ordine dell'elenco non è corretto perché le prime due parole in arabo devono essere invertite e la virgola, che fa parte del testo in inglese, deve comparire subito a destra della prima parola.

Nella seconda riga viene invece mostrato il risultato desiderato.

I caratteri neutrali che si trovano tra testi con lo stesso orientamento possono essere erroneamente interpretati come parte di un singolo percorso.

Il motivo di questo errore è che, con un carattere RTL fortemente tipizzato in uno dei due lati, l'algoritmo bidirezionale vede la virgola* come parte del testo in arabo. Le prime due parole in arabo e la virgola sono interpretate come un elenco in arabo. In realtà, la virgola fa parte del testo in inglese e deve marcare il confine tra due percorsi direzionali in arabo.

* Anche lo spazio vicino alla virgola è un carattere neutrale e viene trattato allo stesso modo della virgola, anche se nel testo si menziona solo la virgola per semplificare la spiegazione.

Nella sezione precedente, il carattere neutrale sembrava essere parte del contesto direzionale stabilito dall'orientamento di base, ma non lo era. In questa sezione, il carattere neutrale sembra essere parte del percorso direzionale, ma in realtà fa parte del contesto direzionale generale.

Una soluzione semplice è usare un altro carattere Unicode invisibile, stavolta LRM, dopo la virgola. Questo pone la punteggiatura neutrale tra caratteri RTL e LTR fortemente tipizzati e la costringe a prendere l'orientamento di base, ovvero da sinistra a destra del testo in inglese. In questo modo si dividono le due parole in arabo in due percorsi direzionali diversi, ordinati in LTR secondo l'orientamento prevalente nel paragrafo.

<text>Il nome di questi Stati in arabo è rispettivamente ...,&#x200E; ... e ....</text>

Ancora, è preferibile usare un NCR (&#x200E;) per questioni di visibilità.

La prossima immagine mostra un altro esempio in cui il markup non è necessario e un carattere di controllo Unicode svolge la funzione in modo molto più semplice. Di nuovo, la riga superiore in blu nell'immagine mostra i risultati ottenuti affidandosi esclusivamente all'algoritmo bidirezionale, mentre la seconda mostra il risultato desiderato.

Il risultato desiderato è stato ottenuto posizionando &#x200F; vicino alla parentesi che si credeva parte del contesto in ebraico, ma che compare tra due sezioni di testo in caratteri latini. L'effetto di un contrassegno RLM è la divisione del testo in caratteri latini in tre percorsi direzionali separati, ordinati secondo l'orientamento di base RTL.

Un altro esempio dell'uso di RLM o LRM, stavolta in un contesto ebraico.

Caratteri con mirroring

Notare che, oltre alla modifica della posizione, una delle parentesi dell'esempio precedente ha anche cambiato forma. Questo avviene in modo interamente automatico e accade perché questi caratteri sono noti come caratteri con mirroring in Unicode.

I caratteri con mirroring sono di solito coppie di caratteri, come le parentesi tonde, le parentesi quadre e simili, la cui forma di visualizzazione dipende dal contesto (LTR o RTL). Non è necessario modificare il carattere per cambiare la forma. Le estremità di una parentesi aperta sono sempre rivolte in direzione del flusso del testo. Nell'immagine sottostante, la parentesi cerchiata di rosso è rivolta a destra nella riga superiore perché viene considerata la parentesi aperta di un testo in caratteri latini. Nella versione del testo più in basso, lo stesso carattere (ancora cerchiato di rosso) viene considerato una parentesi aperta correlata a un testo in ebraico (ad esempio, il nome espanso segue l'acronimo nell'ordine di lettura), quindi è rivolto in direzione opposta.

Caratteri con mirroring.

Questo significa che, a prescindere dal fatto che il contenuto memorizzato sia in caratteri arabi/ebraici o latini, si usa lo stesso carattere PARENTESI APERTA all'inizio del testo tra parentesi. In altre parole, considerare i caratteri con mirroring come se le parole a sinistra nel nome significhino "aprire" e quelle a destra "chiudere".

Nidificazione dei percorsi direzionali

L'algoritmo bidi Unicode e i contrassegni LRM/RLM funzionano bene quando c'è solo un livello di testo combinato. In una situazione in cui ci sono due o più livelli nidificati di testo direzionale, è necessaria un'altra soluzione. Questa immagine mostra una frase in caratteri latini che contiene una citazione in ebraico che, a sua volta, contiene testo sia in caratteri latini che ebraici ("W3C").

L'ordine delle due parole ebraiche è corretto, ma il testo "W3C" deve comparire a sinistra della citazione e la virgola tra il testo in ebraico e "W3C".

Ottenere la visualizzazione desiderata usando il markup per aprire un nuovo livello di incorporamento.

Il problema si verifica perché i flussi direzionali vengono ordinati secondo l'orientamento di base LTR del paragrafo. Nella citazione in ebraico, tuttavia, l'ordinamento corretto predefinito deve essere RTL.

Per risolvere questo problema, aprire un nuovo livello di incorporamento. Per fare questo, si deve racchiudere la citazione con un elemento tspan e assegnare un orientamento RTL con le proprietà direction e unicode-bidi.

<text>Il titolo indica "<tspan direction ="rtl" unicode-bidi="embed"> ... </tspan>" in ebraico.</text>

Ci sono anche caratteri di controllo Unicode per ottenere gli stessi risultati, ma poiché stabiliscono un orientamento di base per una porzione di testo priva di confini visibili, questa soluzione non è consigliata.

Riassunto del markup tspan

Riepilogando, mentre si usa solo la proprietà direction sugli elementi contenitore come svg, g, text e textArea, si devono usare sia direction che unicode-bidi="embed" sugli elementi tspan, dato che sono in linea.

L'altro valore utile di unicode-bidi è bidi-override. Non è necessario utilizzarlo molto spesso. Viene descritto nella prossima sezione.

Eseguire l'override dell'algoritmo bidi

In alcune occasioni può essere preferibile che l'algoritmo bidi non effettui il riordinamento. In questi casi, sono necessari markup aggiuntivi per racchiudere il testo che si desidera non ordinato.

In SVG si usa il valore bidi-override della proprietà unicode-bidi insieme alla proprietà direction. Di nuovo, ci sono caratteri di controllo Unicode che possono essere usati per ottenere lo stesso risultato, ma poiché creano stati con confini non visibili questa soluzione non è consigliata.

Esempio di testo in cui è possibile eseguire l'override dell'algoritmo bidirezionale.

L'esempio nell'immagine mostra testo in ebraico come viene ordinato nella memoria. Si può usare la proprietà unicode-bidi per ottenere questo effetto, ad esempio

<text x="20" y="80" direction="ltr" unicode-bidi="bidi-override"> ... </text>

Caratteri Unicode o markup?

Unicode fornisce codici di formattazione speciali e invisibili per considerare il risultato dell'algoritmo bidirezionale nel testo normale o eseguirne l'override, allo stesso modo del markup SVG descritto in questo tutorial.

Esistono alcuni caratteri di controllo in Unicode che possono essere usati per creare lo stesso effetto del markup nei testi bidirezionali in linea. Sono elencati nella seguente tabella:

Carattere Codice Markup equivalente
RLE U+202B <tspan direction="rtl" unicode-bidi="embed">
LRE U+202A <tspan direction="ltr" unicode-bidi="embed"
RLO U+202E <tspan direction="rtl" unicode-bidi="bidi-override"
LRO U+202D <tspan direction="ltr" unicode-bidi="bidi-override"
PDF U+202C </tspan>

Unicode nei linguaggi di markup Si sconsiglia di usarlo quando è disponibile il markup, in particolare si sconsiglia di combinare markup e codici di controllo.

Per ulteriori informazioni sull'argomento, vedere Comandi Unicode vs. markup per supporto bidi nel sito W3C Internationalization.

Tuttavia, in alcune situazioni i caratteri di controllo Unicode sono l'unico mezzo per esprimere la direzionalità. È il caso degli elementi del testo normale come title e desc. Questi elementi sono definiti per supportare solo i caratteri, non il markup. Quindi, non è possibile usare le proprietà direction o unicode-bidi su una parte del contenuto dell'elemento.

Non è neanche possibile contrassegnare per la direzionalità il testo degli attributi, quindi è necessario usare i caratteri di controllo Unicode per indicare l'orientamento.

Si noti che altri elementi, come la lingua, non possono essere contrassegnati per parte del contenuto del testo normale o per i valori degli attributi.

Dicci cosa ne pensi (in Inglese).

Inviaci i tuoi commenti

Ulteriori letture

Autore: Richard Ishida, W3C. Traduttore: Italian Translation Team, Trusted Translations, Inc..

Tradotto dal contenuto Inglese datato 2009-01-07. Ultima modifica della versione tradotta 2009-08-28 20:01 GMT

Per la cronistoria delle modifiche, cerca per tutorial-svg-tiny-bidi nel blog i18n.