font-style:italic; przechyla czcionka w prawo, tak jak to: mój czcionkiarabski kursywa czcionki
W języku arabskim, pisanie odbywa się od prawej do lewej, a nie od lewej do prawej. Próbuję to pochylić czcionkę tak, aby była pochylona w lewo zamiast w prawo. Jakieś sugestie? Nie musisz wpisywać arabskich liter w swojej odpowiedzi. Chcę czegoś, co jest przeciwieństwem font-style:italic; w dowolnym języku.
Można użyć czegoś, co nazywa skew w deklaracji transformacji CSS:
.fontToTransform {
font-size: 40px;
transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-moz-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
}
To będzie cię z kłopotów faktycznie manipulowania samej czcionki. Spowoduje to przekształcenie całego bloku, w którym znajduje się twój tekst. Możesz potrzebować jakiegoś sprawdzania poprawności, aby sprawdzić każdą linię podziału i oddzielić je za każdym razem od nowych tagów. Ponieważ może to nie być prawdziwe rozwiązanie, możesz wziąć to pod uwagę, jeśli chcesz ścinać krótszy (jednoliniowy) tekst.
Edit
To veeeery daleko idące, ale tutaj jest brudny przykład, który dowiaduje się poszczególnych linii w bloku tekstu i umieszcza każdą z nich w nowym span, co spowoduje, że każdy wiersz będzie oddzielnie stylizowany w stylu skewX. Proszę bardzo:
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;
}
});
Można rozważyć usin g jQuery's resize() wiązanie do aktualizacji bloków tekstu o szerokościach percentyla. Nie jestem też pewien, co dzieje się z długimi słowami, które nie mieszczą się w jednej linii. Nie żeby tak się stało, ale pamiętaj, że nie jest testowany i może spowodować utratę słów. Naprawdę trzeba zrobić więcej testów dla rzeczywistego publikowania.
Należy zauważyć, że wyniki użycia transformacji 'skew' w tekście będą znacznie gorsze w wyglądzie niż przy użyciu rzeczywistego wariantu kursywy. – duskwuff
W WebKit działa bardzo dobrze. Ale mogę sobie wyobrazić, że może sprawić, że wiele (skomplikowanych) czcionek będzie wyglądało brzydko. Zwróć też uwagę, że pochylenie będzie zepsuć się w blokach wielowierszowych. To jest po prostu pokazanie możliwości, ponieważ "kursywą" jest zupełnie nowy zestaw rysunków w pliku czcionek, a wymuszona kursywą CSS zawsze albo całkowicie zawiesza się (problemy z obsługą przeglądarki), albo wygląda bardzo niechlujnie. –
To zależy całkowicie od czcionki, którą transformujesz. Niektóre będą wyglądać w porządku (szczególnie w większych rozmiarach), ale niektóre będą wyglądały okropnie. – duskwuff
Niestety nie ma sposobu, aby to zrobić za pomocą właściwości font-style. Zobacz stronę tutaj: http://www.w3schools.com/cssref/pr_font_font-style.asp. Nie jestem pewien, czy są tam arabskie czcionki, które mogłyby pochylić się w przeciwnym kierunku. Jeśli tak, to prawdopodobnie nie są one szeroko obsługiwane.
[To nie jest w3c!] (Http://w3fools.com/) – Adrift
Nie zwracałem uwagi na to, co pisałem. JESTEM głupcem ... Dobry haczyk. – uhhitsjames
Ustawienie dir=rtl wpływa tylko na kierunek układu. Nie zmienia kierunku tekstu - w twoim przykładzie nadal widzisz "trochę kodu kursywy", a nie "edoc cilati emos" - ani nie odzwierciedla on każdego znaku od lewej do prawej.
Kursywne warianty czcionek arabskich, o ile istnieją, będą często skosowane w lewo zamiast w prawo. (Jest to czasami określane jako wariant "irański"). Nie jest to zachowanie, które można kontrolować w CSS, ponieważ jest to decyzja podjęta przez projektanta czcionek, a nie przeglądarkę.
"To nie jest zachowanie, które można kontrolować w CSS" czy można nim sterować za pomocą jQuery? albo coś innego? Jeśli tak to jak? – shnisaka
Nie, niezupełnie."Kursywa" to kolejna wartość, którą dodajesz do mechanizmu renderowania czcionek systemu operacyjnego. To, co robi z tym, jest w dużej mierze niemożliwe do opanowania, bez tworzenia niestandardowej czcionki. – duskwuff
'dir = rtl' ustawia zarówno kierunek układu, jak i kierunek kierunkowo neutralnego układu. Nie wpływa na kształty znaków, z wyjątkiem tych, które mają być odbijane. –
Drodzy, są dwie rzeczy, których użyłem do wycięcia projektu wajbah.Użyj kierunek RTL w kodzie jak:
dir="rtl"
potem treść który chcesz pokazać do użytku po prawej stronie float right.
Wykona twój problem.
Wypróbuj i odpisz proszę.
Jako użytkownik kolega RTL języka czuję bólu :)
Jak na temat korzystania arabski webfont i importowanie go do swojego CSS? Amiri to otwarta czcionka internetowa, która ma odpowiednie nachylenie typograficzne dla arabskiego skryptu naskh. Jest nawet hostowany w google CDN!
Następnie można po prostu zrobić:
@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
.myItalic{
font-family: 'Amiri', serif;
font-style: italic;
}
Oto pracujących JSFiddle example
Jeśli czcionka nie jest do własnych upodobań, można wykorzystać inne inne czcionki internetowych. Here are some do przetestowania za pomocą. Jeśli ci nie pracują dla Ciebie - domyślam się, że możesz znaleźć czcionkę, która Ci odpowiada, zmienić jej kursywę i osadzić ją na stronie w ten sam sposób.
uzgodnione z Allendar (od góry)
można zrobić w CSS3 łatwo. Nie ma potrzeby stosowania JavaScript ... w ogóle.
Oto odpowiedź:
<!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>
Jednak ta jest obsługiwana w FF i Chrome, IE10 (nie dla < IE10)
Czy deklarując text-kierunek: RTL? –
@Diodeus yes Jestem – shnisaka
http://jsfiddle.net/vPLkE/ kierunek nie działa –