CSS đảo ngược toàn bộ trang web (hiệu ứng gương)

Tôi đang xây dựng một trang web đa ngôn ngữ. Một số ngôn ngữ (như tiếng Do Thái) đọc từ phải sang trái. Bên cạnh văn bản thực tế, những người dùng đó được sử dụng để điều hướng và các manh mối trực quan khác bị đảo ngược.CSS đảo ngược toàn bộ trang web (hiệu ứng gương)

Ví dụ: menu chính ở trên cùng sẽ được căn chỉnh ở bên phải. Nút "quay lại" sẽ chỉ về phía trước, biểu trưng ở trên cùng bên phải thay vì trên cùng bên trái, v.v.

Một giải pháp là tạo ra một thiết kế hoàn toàn mới, tuy nhiên điều đó có nghĩa là tôi phải duy trì 2 mẫu. Không lý tưởng.

Tôi chỉ nghĩ, nó sẽ có thể để lật toàn bộ thiết kế trong CSS? Giống như nhìn vào gương?

Tôi cũng đang mở ra cho các giải pháp tốt hơn nếu điều này có vẻ xa vời.

Công nghệ sử dụng: PHP, Yii, Less.css, jQuery

Nguồn

2013-01-07 Nathan H

Bạn có thể thử:

body { 
    direction:rtl; 
}

Nhưng đó sẽ chỉ cung cấp cho bạn một điểm khởi đầu để bắt đầu từ ...

Hy vọng nó giúp.

Nguồn

2013-01-07 09:50:35

Tôi vừa thử điều này. Nó messes tất cả mọi thứ ... –

Bất cứ khi nào có thể, "rtl" nên được áp dụng như một thuộc tính HTML và không phải trong CSS: . Ngoài ra, trong khi điều này là rất cần thiết, nó chỉ là một điểm khởi đầu. –

Rất nhiều trang web bao gồm thanh trình đơn và khu vực nội dung. Đây thường là những khu vực trọng tâm chính để lật. Nên dễ dàng với 3 dòng CSS:

html[dir="rtl"] #menu { 
    float: right; 
}

Mã CSS này có thể dễ dàng điều chỉnh cho phù hợp với các khu vực khác cần di chuyển. Có thực sự không cần phải duy trì 2 bộ mẫu, trừ khi bạn đã hardcoded tọa độ (đó là một ý tưởng tồi anyway).

Tất nhiên, hãy chắc chắn để thiết lập <html dir="rtl">

Nguồn

2013-01-07 09:51:00

tôi cũng muốn thêm các lớp "rtl" và "ltr" vào mỗi lớp. – albert

Có thể lật toàn bộ trang web chính xác như bạn mô tả với nhưng một vài dòng CSS thấy ở đây: http://jsbin.com/aduqeq/5/edit

CSS:

body { 
     margin: 0 auto; 
     width: 300px; 
     -moz-transform: scaleX(-1); 
     -o-transform: scaleX(-1); 
     -webkit-transform: scaleX(-1); 
     transform: scaleX(-1); 
     filter: FlipH; 
     -ms-filter: "FlipH"; 
     }

Có một vài nhược điểm đối với phương pháp này tuy nhiên:

1) Trong khi hoạt động Tốt trong Firefox + Chrome, nó chỉ sắp xếp công trình trong IE8 + (văn bản trông rất xa lạ với tôi trong IE) mong đợi hỗ trợ để có một chút chắp vá (đây là một tính năng mới CSS3)

2) Có nhược điểm ngữ nghĩa rõ ràng đây

3) Một số người dường như có một điều về tiền tố của nhà cung cấp

Nhìn chung việc sử dụng RTL trên cơ thể và sử dụng biểu định kiểu khác có thể là một lựa chọn tốt hơn nhiều ở đây, thậm chí nghĩ rằng nó cồng kềnh hơn cho bạn, người dùng cuối được cung cấp trải nghiệm tốt hơn (thật không may các bản sửa lỗi nhanh chóng, chúng tôi muốn không phải là luôn luôn có sẵn)

Nguồn

2013-01-07 11:00:45 Sean

Điều này trông rất tuyệt! Nhưng nó cũng lật văn bản thực tế ... –

Bạn có thể sửa văn bản lộn xộn và nội dung khác bằng cách áp dụng cùng một css cho 'p'. Miễn là bạn không bao giờ chồng các thẻ 'p', nó sẽ hoạt động như một sự quyến rũ. (Rất hacky mặc dù;)) –

html { 
    direction:rtl; 
}

Điều này sẽ đảo ngược mọi thứ trên trang từ phải sang trái. Bạn cần phải điều chỉnh điều này cho mọi phần tử trong trang của mình.

Nguồn

2013-01-07 11:48:09

Như tôi đã viết ở trên, bất cứ khi nào có thể, "rtl" nên được áp dụng như một thuộc tính HTML và không có trong CSS: . Ngoài ra, trong khi điều này là rất cần thiết, nó chỉ là một điểm khởi đầu. Một số dự án duy trì hai tập tin CSS; những người khác sử dụng một số công cụ tự động để lật chúng. Tôi đã viết một ví dụ từ MediaWiki dưới đây như là một câu trả lời. –

Trong MediaWiki có một lớp PHP gọi CSSJanus, mà khéo léo có thể lật CSS của bạn một cách nhanh chóng cho các ngôn ngữ từ phải sang trái:

https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=blob;f=includes/libs/CSSJanus.php

này được sử dụng thành công cho Wikipedia theo đúng nghĩa-to- các ngôn ngữ bên trái và kết quả là chúng yêu cầu bảo trì rất ít bản sao CSS.

Hơi tiếc là hiện tại nó không hoàn toàn độc lập và được liên kết với MediaWiki, nhưng bạn có thể sử dụng công cụ Mediawiki khá dễ dàng và tái sử dụng nó trong dự án của bạn.

Nếu bạn quản lý để tạo ra một thư viện độc lập ra khỏi nó, nó sẽ được tốt đẹp nếu bạn có thể xuất bản nó trên GitHub hoặc một cái gì đó :)

Nguồn

2013-01-07 12:16:04

Bạn có thể lật toàn bộ trang web sử dụng Seandunwoody câu trả lời của mình nhưng điều đó sẽ đảo ngược văn bản, biểu tượng và hình ảnh và như vậy. Miễn là bạn đặt nội dung của bạn trong  và <h1> 2 và 3 thẻ, mà bạn không đưa vào nhau (vì vậy không ), bạn có thể áp dụng css như thế này:

body,p,h1,h2,h3 { 
    margin: 0 auto; 
    width: 300px; 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
    }

Những gì nó là cơ bản đôi gương lừa, nó phản ánh trang web hoàn chỉnh và sau đó nó phản ánh tất cả các đoạn nhỏ và tiêu đề có chứa văn bản và hình ảnh của bạn trở lại định hướng ban đầu nhưng vẫn ở vị trí của trang web đảo ngược.

Hacky nhưng nó hoạt động (mặc dù không tốt trên IE).

* Bạn cũng cần phải thêm dir='rtl' vào thẻ html hoặc body để đảm bảo văn bản được gán cho bên phải và hebrew bị đảo ngược (ký tự tiếng Anh sẽ ở bên trái sang phải nhưng phải được gán quyền).

Nguồn

2016-01-18 09:31:43

CSS đảo ngược toàn bộ trang web (hiệu ứng gương)

Trả lời

Các vấn đề liên quan