font-style:italic; inclina il carattere a destra proprio come questo: il mio carattere araba corsivo
In arabo, la scrittura è fatto da destra a sinistra, non da sinistra a destra. Quello che sto cercando di ottenere è il corsivo in corsivo in modo che sia inclinato a sinistra anziché a destra. Eventuali suggerimenti? Non devi includere lettere arabe nella tua risposta. Voglio qualcosa che faccia l'opposto di font-style:italic; in qualsiasi lingua.
È possibile utilizzare qualcosa chiamato skew nella dichiarazione CSS trasformazione:
.fontToTransform {
font-size: 40px;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
Questo ti porterà fuori il fastidio di realtà manipolare il carattere stesso. Questo trasformerà l'intero blocco del tuo testo in tho. Potrebbe essere necessario un qualche tipo di convalida per verificare ogni interruzione di riga e separarli ogni volta da nuovi tag. Quindi, poiché questa potrebbe non essere una soluzione reale, potresti prenderla in considerazione se vuoi tagliare il testo più corto (riga singola).
Modifica
Questo è mooolto esagerato ma ecco un esempio di sporco che scopre le singole righe nel blocco di testo e mette ciascuno di essi in una nuova span, ciò che provoca ogni riga di essere designato separatamente con lo stile skewX. Qui si va:
CSS
#fontTransform {
font-size: 40px;
margin-right: 30px;
text-align: right;
}
#fontTransform span {
display: block;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<p id="fontTransform">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</body>
</html>
main.js
'use strict';
$(document).ready(function(){
var d = document.getElementById('fontTransform');
var t = d.innerHTML;
var w = t.split(' ');
var lines = [];
d.innerHTML = w[0];
var height = d.clientHeight;
var tmp_line = [];
for (var i = 0; i < w.length; i++) {
d.innerHTML = d.innerHTML + ' ' + w[i];
tmp_line[tmp_line.length] = w[i];
if (d.clientHeight > height) {
height = d.clientHeight;
console.log(w[i-1]);
delete tmp_line[tmp_line.length-1];
lines[lines.length] = tmp_line;
tmp_line = [];
}
}
// Destroy d.innerHTML
d.innerHTML = '';
var tmp_html = '';
// Refill the lines within spans
for (var i = 0; i < lines.length-1; i++) {
tmp_html = '<span>';
for (var x = 0; x < lines[i].length-1; x++) {
tmp_html = tmp_html + lines[i][x] + ' ';
}
tmp_html = tmp_html.trim();
tmp_html = tmp_html + '</span>';
d.innerHTML = d.innerHTML + tmp_html;
}
});
Si potrebbe considerare usin g jQuery's resize() associazione per aggiornare i blocchi di testo con larghezza percentile. Inoltre non sono sicuro di cosa succede con parole molto lunghe che non si adattano a una riga. Non che ciò possa effettivamente accadere, ma tieni presente che non è testato e potrebbe causare la perdita delle parole. Ho davvero bisogno di fare più test per la pubblicazione effettiva.
Si noti che i risultati dell'utilizzo di una trasformazione 'skew' sul testo avranno un aspetto significativamente peggiore rispetto all'utilizzo di una variante italica effettiva. – duskwuff
In WebKit funziona molto bene. Ma posso immaginare che potrebbe rendere molti caratteri (più complessi) brutti. Si noti inoltre che il disallineamento si incasinerà in blocchi a più linee. È puramente per mostrare le possibilità immagino come 'italic' è un intero nuovo set di disegni in un file di font e forzato CSS in corsivo è sempre o fallendo completamente (problemi di supporto del browser) o guardando molto disordinato. –
Dipende interamente dal tipo di carattere che stai trasformando. Alcuni sembreranno a posto (in particolare a taglie più grandi), ma alcuni sembreranno piuttosto orribili. – duskwuff
Purtroppo non c'è modo di farlo con la proprietà font-style. Vedi pagina qui: http://www.w3schools.com/cssref/pr_font_font-style.asp. Non sono sicuro che ci siano font arabi là fuori che potrebbero in corsivo nella direzione opposta. Se ci sono, probabilmente non sono ampiamente supportati.
[Questo non è il w3c!] (Http://w3fools.com/) – Adrift
Non stava prestando attenzione a ciò che stavo digitando. IO SONO un pazzo .. Buona cattura. – uhhitsjames
L'impostazione dir=rtl influisce solo sulla direzione del layout. Non cambia la direzione del testo - nel tuo esempio vedi ancora "codice italico", non "edoc cilati emos", né rispecchia ogni carattere da sinistra a destra.
Le varianti italiche di caratteri arabi, laddove esistono, si inclinano spesso a sinistra anziché a destra. (Talvolta è conosciuta come variante "iraniana".) Tuttavia, questo non è un comportamento che puoi controllare in CSS, poiché è una decisione presa dal progettista di font, non dal browser.
"Questo non è un comportamento che puoi controllare in CSS" puoi controllarlo usando jQuery? o qualcos'altro? se é cosi, come? – shnisaka
No, non proprio."Corsivo" è solo un altro valore che stai inserendo nel renderizzatore di font del sistema operativo. Quello che fa è in gran parte incontrollabile, a corto di creare un carattere personalizzato. – duskwuff
'dir = rtl' imposta sia la direzione del layout sia la direzionalità del layout direzionale neutro. Non ha effetto sulle forme dei caratteri, ad eccezione di quelli definiti per essere specchiati. –
caro ci sono due cose che ho usato per tagliare il progetto wajbah.Utilizzare direzione rtl nel codice come:
dir="rtl"
dopo che il contenuto che si desidera mostrare alla destra l'utilizzo lato float right.
Effettuerà il tuo problema.
Provalo e rispondi per favore.
Come utente collega il linguaggio RTL Sento il tuo dolore :)
Come sull'utilizzo di un webfont araba e l'importazione al vostro CSS? Amiri è un font Web aperto con l'inclinazione tipografica corretta per lo script arabo naskh. È persino ospitato sul CDN di Google!
allora si potrebbe fare solo:
@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
.myItalic{
font-family: 'Amiri', serif;
font-style: italic;
}
Ecco un lavoro JSFiddle example
Se questo carattere non è di vostro gradimento, è possibile utilizzare altri altri tipi di carattere web. Here are some per testare con. Se non di quelli che funzionano per te, credo che tu possa trovare un font che ti piace, alterare la sua versione in corsivo e incorporarlo nella tua pagina nello stesso modo.
concordate con Allendar (dall'alto)
può essere fatto in CSS3 facilmente. Non c'è bisogno di JavaScript ... affatto.
Ecco la risposta:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.skewTheFont {
transform: skewX(10deg);
-webkit-transform: skewX(10deg);
-moz-transform: skewX(10deg);
font-size: 60px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
</style>
<!-- Style ends here -->
</head>
<body>
<p class="skewTheFont">Arabic Font</p>
</body>
</html>
Tuttavia, questo è supportato in FF, IE10 e Chrome (non per < IE10)
State dichiarando testo-direction: rtl? –
@Diodeus yes I am – shnisaka
http://jsfiddle.net/vPLkE/ direction non funziona –