Xuất thân là một kỹ sư Cambridge, John Lumley đã thành lập nhóm AI tại Cambridge Consultants vào đầu những năm 1980 và sau đó gia nhập HPLabs Bristol với tư cách là một trong những thành viên sáng lập. Ông đã làm việc ở đó 25 năm, quản lý và đóng góp trong nhiều lĩnh vực phần mềm/hệ thống, sau này chuyên về kỹ thuật tài liệu dựa trên XSLT, sau đó ông đã lấy bằng tiến sĩ khi nghỉ hưu sớm. Anh ấy hiện đang giúp phát triển bộ xử lý Saxon XSLT cho Saxonica và tư vấn về các khía cạnh khác nhau của việc sử dụng XSLT

Bản quyền © 2016 jωL Research Ltd. Đã đăng ký Bản quyền

trừu tượng

Bài viết này thảo luận về việc chuyển đổi một biểu định kiểu CSS thành một biến đổi XSLT để chiếu một xấp xỉ của kiểu dáng từ CSS vào một tài liệu XML đích. Nó được phát triển trong một số dự án dựa trên XSLT liên quan đến các tài liệu XML đa phương ngữ, khi có nhu cầu đánh giá các thuộc tính CSS cho một công cụ bên ngoài khác, chẳng hạn như trong đường dẫn HTML → XSL-FO → PDF hoặc khi cần tạo kiểu tài liệu . Bài viết trình bày các ví dụ, giải thích kiến ​​trúc chung của biến đổi XSLT được tạo ra, thảo luận cách biến đổi đó được xây dựng từ biểu định kiểu CSS và phác thảo các điểm mạnh và điểm yếu và một số hướng mà công cụ có thể được phát triển. Gần đúng ở chỗ nó chỉ hỗ trợ một số tính năng CSS cốt lõi, giả định rằng người dùng có kỹ năng nghệ thuật và đang làm việc với các biểu định kiểu CSS có thể hiểu và nhìn thấy được, đồng thời tốc độ thực hiện của phép chiếu CSS không phải là vấn đề. Tuy nhiên, theo kinh nghiệm của tác giả, khả năng kết hợp kiểu dáng CSS vào hộp công cụ của nhà nghiên cứu XSLT đã được chứng minh là có ích.

Mục lục

Tại sao?

Trong thế giới web hiện tại, phần lớn kiểu dáng kết cấu của các tài liệu dựa trên XML được xác định bởi các khai báo trong CSS của Cascading Style Sheets (CSS). Những điều này khuyến khích một mô hình trong đó các phần tử XML được định nghĩa là thành viên của các lớp và các biểu định kiểu CSS khai báo các mẫu để khớp với các phần tử của loại, lớp, vị trí, tổ tiên, anh chị em và con cháu, theo đó một tập hợp các giá trị cho các thuộc tính (e. g. phông chữ, màu sắc…), ký tự trước và sau ký tự (đánh số, văn bản), loại bố cục (khối, không có, nội tuyến. …) và hình học có thể (kích thước, định vị. ) được cung cấp. Các mẫu áp dụng được chọn thông qua một mô hình chuyên biệt và đặc hiệu tương đối đơn giản. Đối với nhiều dạng xem trình bày đơn giản của tài liệu XML, tác nhân triển khai CSS có thể tạo ra kết quả có thể chấp nhận được. Nhiều phương ngữ XML (e. g SVG, XHTML) mô tả các thuộc tính cho nhiều phần tử của chúng có thể thao tác được thông qua kiểu dáng CSS, như một giải pháp thay thế hoặc ghi đè các thuộc tính quy kết trực tiếp

Có thể chiếu các dạng xem khác nhau của cùng một tài liệu bằng cách liên kết các biểu định kiểu CSS khác nhau. Ví dụ: bản tóm tắt 'mục lục' có thể được tạo bằng cách chặn hiển thị (

selector-pattern { property : value; property : value; … } 

Ghi chú

Trong CSS có thể chỉ ra các yêu cầu hình học, thông qua các lệnh như

selector-pattern { property : value; property : value; … } 

selector-pattern { property : value; property : value; … } 

Một tính năng khác là kiểu dáng CSS thông qua kế thừa – không thể 'chặn' ứng dụng trong một cây con một cách phổ biến; . (Các cơ chế hoàn nguyên về giá trị kế thừa từ cha mẹ hoặc giá trị ban đầu mặc định đang được xác định trong các phiên bản CSS sau này (3, 4), nhưng hỗ trợ trình duyệt không nhất quán. )

Trong việc tạo tài liệu phức tạp hơn từ các nguồn XML, XSLT3. 0 cung cấp tính linh hoạt cao hơn rất nhiều, bằng cách trở thành ngôn ngữ lập trình toàn diện (và có khả năng bậc cao) hiệu quả với cây XML là một trong những kiểu dữ liệu chính của nó. Nó có khả năng tùy ý thao tác một tài liệu và tạo kiểu cho kết quả (e. g. thông qua các thuộc tính được mô tả tại thuộc tính phần tử. )

Sự cần thiết là mẹ của sáng chế – trong những năm gần đây, tác giả đã gặp một số trường hợp khi kiểu dáng tài liệu có sẵn trong CSS, nhưng một tài liệu XML đang được xử lý trong cài đặt XSLT toàn diện cần áp dụng một số thông tin kiểu dáng CSS . Một tùy chọn sẽ là xây dựng thủ công các thư viện XSLT tương đương (mẫu, thuộc tính, v.v. ) tương ứng với ý định CSS và áp dụng chúng cho nguồn. Điều này tất nhiên sẽ có thể bị trôi mạch lạc khi phải giữ cho hai bậc thầy về phong cách đồng bộ hóa. Một tùy chọn khác là xem liệu một số XSLT tương đương có thể được tạo từ CSS nhất định sẽ xác định các thuộc tính giống nhau cho tài liệu được đề cập hay không, chủ yếu để lại kết quả .

Có một số trường hợp trong đó hiệu ứng của kiểu dáng CSS có thể cần được đánh giá trước khi trình chiếu hoặc hiển thị cuối cùng. Ví dụ là.

• Khi cần khắc phục hiệu ứng của một CSS cụ thể trên một tiểu mục của tài liệu, như vậy sẽ tránh được xung đột với biểu định kiểu CSS phạm vi rộng hơn. Ví dụ: một thành phần SVG được nhúng trong trang XHTML có thể được tạo kiểu bằng biểu định kiểu CSS của riêng nó. Điều này có thể mâu thuẫn với điều được sử dụng (hoặc áp đặt bên ngoài) cho trang HTML. Trong trường hợp này để đảm bảo tính nhất quán của tài liệu, chúng tôi muốn sửa các thuộc tính cho SVG. Tương tự như vậy, ví dụ khi chuẩn bị một bài báo cho hội nghị được tạo kiểu bằng CSS, cần trình bày các ví dụ nhúng được tạo kiểu bằng khác CSS thì có thể .

  Ghi chú

  Những thay đổi gần đây trong quy trình xuất bản Balisage, chuyển từ xuất bản XHTML cuối cùng sang xuất bản ở định dạng PDF, đã làm giảm một số thú vui tự tham khảo mà bài báo này có thể mang lại cho người đọc. Tuy nhiên, nếu điều này đã được trình bày tại Balisage 2015, sự hài hước sẽ được khôi phục

• Bộ xử lý cuối cùng cho tài liệu không hỗ trợ kiểu dáng CSS trực tiếp. Ví dụ: XSL-FO không hỗ trợ các tham chiếu đến tài nguyên CSS, mặc dù nó sử dụng nhiều thuộc tính thuộc tính được lấy từ mô hình CSS2

Mục tiêu của công việc này là cố gắng chiếu càng nhiều hiệu ứng của biểu định kiểu CSS lên tài liệu XML càng tốt, để lại các hiệu ứng dưới dạng các giá trị thuộc tính cơ sở làm thuộc tính trên các phần tử có liên quan hoặc các phần khiêm tốn của nội dung được thêm vào

Ghi chú

Tác giả biết rõ rằng CSS đang phát triển (các mô tả về các phần của CSS3 có từ năm 2001, CSS2. 2 liên tục được soạn thảo lại), được xử lý ở các mức độ tuân thủ khác nhau bằng nhiều công cụ khác nhau và có rất nhiều tiện ích mở rộng. Công việc này không được thụt vào để xây dựng một trình chuyển đổi CSS → XSLT dứt khoát (do đó có tiêu đề Gần đúng), nhưng chỉ ra cách một trình chuyển đổi cơ bản có thể được xây dựng và cho phép tạo kiểu CSS hạn chế, nhưng phổ biến, được chiếu trong môi trường XSLT. Trong quá trình này, nếu tôi chơi hơi nhanh và lỏng lẻo với (các) tiêu chuẩn CSS, thì một phần là do trong thực tế, đó là cách CSS xuất hiện

Trong bài viết này, trước tiên tôi sẽ trình bày một ví dụ SVG rất nhỏ được tạo kiểu bởi một CSS và chỉ ra một biến đổi XSLT tương đương có thể là gì. Các cơ chế XSLT có thể hỗ trợ nhiều quy tắc CSS sau đó sẽ được thảo luận, tiếp theo là cách bản thân biến đổi được tạo ra. Một ví dụ lớn hơn về việc sử dụng nó (tạo kiểu cho giấy ACM) sau đó được trình bày. Cuối cùng, tôi xem xét những phát triển có thể có của kỹ thuật và rút ra một số kết luận

Một ví dụ đơn giản

Giả sử chúng ta có một tài liệu SVG rất đơn giản

Hình 1. Một tài liệu SVG chưa định dạng

Bây giờ, chúng tôi muốn cải thiện mức độ hấp dẫn của ưu đãi, bằng cách tạo kiểu cho nó bằng biểu định kiểu CSS được xác định bên ngoài

Hình 2. Kiểu CSS không được áp dụng trong tài liệu được nhúng

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

(Nếu bạn đang xem nội dung này trực tiếp trong trình duyệt HTML, trong đó SVG được tham chiếu bởi phần tử

selector-pattern { property : value; property : value; … } 

selector-pattern { property : value; property : value; … } 

SVG mở rộng từ vựng thuộc tính CSS cho các thuộc tính trình bày cụ thể của riêng nó, chẳng hạn như

selector-pattern { property : value; property : value; … } 

Hình 3. Kiểu dáng CSS dựa trên một ví dụ được nhúng

________số 8_______

Bài viết này trình bày về cách thức và mức độ mà phép chiếu biểu định kiểu CSS này lên tài liệu XML có thể được thực hiện trong môi trường thực thi XSLT hoàn toàn

Công việc tương tự

Vấn đề kết hợp CSS vào hỗn hợp XSL-FO đã được giải quyết bằng một sản phẩm cụ thể – CSSToXSLFO. http. //www. lại. be/css2xslfo/index. xhtml được nhắm mục tiêu cụ thể để tạo các cấu trúc XSL-FO được tạo kiểu tương ứng với mô hình hộp của bố cục ẩn trong CSS. Bên trong, nó sử dụng Trình phân tích cú pháp CSS dựa trên Java của Flute để tạo cấu trúc quy tắc (Java) bên trong. Sau đó, cấu trúc này được áp dụng trên tài liệu XML đầu vào (tùy ý) để tạo một cây DOM với các thuộc tính hoặc phần tử được đặt tên bổ sung (e. g.

selector-pattern { property : value; property : value; … } 

selector-pattern { property : value; property : value; … } 

Bên ngoài, cách tiếp cận của tôi có lẽ tương tự, ở chỗ trang tính CSS được phân tích cú pháp thành một hành động xác định các thuộc tính kiểu dáng do CSS xác định và nội dung bổ sung, mặc dù chúng được sử dụng để ghi đèghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. ghi đè lên . Bên trong nó hoàn toàn khác, phát triển một cây phân tích cú pháp hoàn chỉnh cho CSS (sử dụng các biểu thức chính quy trong XSLT), được sử dụng để tạo một chương trình XSLT phù hợp. any existing properties of the same name, and no further conversion is attempted. Internally it is quite different, developing a complete parse tree for the CSS (using regular expressions in XSLT), which is used to generate a suitable XSLT program.

Mô hình thực hiện

Một khai báo quy tắc CSS đơn giản có dạng chung sau

selector-pattern { property : value; property : value; … } 

trong đó đối với các phần tử khớp với mẫu bộ chọn, các giá trị cho các thuộc tính kiểu đã cho được khai báo. Các giá trị thuộc tính như vậy có thể được thay thế hoặc sửa đổi bởi các thuộc tính được xác định trong các quy tắc khác phù hợp cụ thể hơn với phần tử đã cho. Bằng cách này, các biểu định kiểu có thể xếp tầng các hiệu ứng của chúng. Ví dụ: quy tắc

selector-pattern { property : value; property : value; … } 

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Các mẫu bộ chọn, mặc dù không phong phú như các mẫu XPath chung của XSLT, nhưng có đủ tính biểu cảm để bao hàm tổ tiên, tư cách thành viên lớp và tham chiếu danh tính, vị trí anh chị em, nội dung con cháu, giá trị thuộc tính, v.v. Bộ chọn phần tử giả cho phép các phần tạo kiểu của cây không phải là phần tử trực tiếp, chẳng hạn như thêm phần mở đầu thông qua bộ chọn

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Hầu hết các thuộc tính là các giá trị vô hướng phong cách đơn giản (e. g.

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Mô hình ưu tiên giữa các khai báo CSS này tương đối đơn giản – một mô hình đặc hiệu cho một thuộc tính nhất định sẽ kiểm tra các mẫu sẽ ảnh hưởng đến nó và chấm điểm chúng trong một hệ thống phân cấp dựa trên số thuộc tính nhận dạng, thuộc tính khác và tham chiếu tên thành phần trong mẫu. Các thuộc tính cụ thể của

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Mô hình XSLT đơn giản (và gần đúng)

Có một số kiến ​​trúc có thể được sử dụng. Trong phần này, tôi thảo luận về một vấn đề có sự tương ứng trực tiếp giữa các quy tắc CSS và các mẫu XSLT trong biểu định kiểu tương đương – cách tiếp cận mà tác giả đã thực hiện ban đầu. Sau này tôi sẽ thảo luận về một số khả năng khác cho thiết kế tổng thể

Tôi sẽ bắt đầu bằng cách kiểm tra một trường hợp rất đơn giản, sử dụng biểu định kiểu CSS ví dụ ở trên. Theo các quy tắc về tính đặc hiệu của CSS, khi quy tắc 2 khớp với nhau, thì thuộc tính

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Tuy nhiên, nếu hiện tại chúng tôi đưa ra một số giả định về loại biểu định kiểu CSS đang được sử dụng, thì chúng tôi có thể tạo một biến đổi XSLT khá đơn giản với các mẫu sau đây sẽ có tác dụng tương tự

Hinh 4

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Các mẫu xếp tầng đơn giản

(sử dụng không gian tên XPath mặc định cho SVG, xem phần ) sẽ tạo ra

đó là kết quả mong muốn

Chúng tôi sử dụng các mẫu XSLT để mô tả toàn bộ ứng dụng thuộc tính trong từng quy tắc CSS, thay vì sử dụng bộ quy tắc để tra cứu lần lượt thuộc tính bắt buộc. Điều này hoạt động bằng cách sử dụng tính năng mà XSLT có thể ghi đè lên các giá trị của thuộc tính phần tử trong khi vẫn xây dựng hiệu quả chính nút phần tử đó chứ không phải phần tử con của nó – phần cuối cùng được viết với một tên nhất định cho thẻ đầu phần tử sẽ trở thành giá trị trong kết quả. Chúng tôi sắp xếp điều này bằng cách đảm bảo rằng các quy tắc có mức độ ưu tiên thấp nhất sẽ kích hoạt trước, sau đó là các quy tắc có mức độ ưu tiên cao hơn và cao hơn (độ đặc hiệu) lần lượt, cung cấp cho mọi quy tắc mẫu của chúng tôi được xác định và các mức độ ưu tiên khác nhau, đồng thời sử dụng hướng dẫn

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Kỹ thuật chung đơn giản này đưa ra các giả định sau dường như đủ tốt cho nhiều cách sử dụng CSS phổ biến

• Đánh giá các quy tắc phù hợp cho tất cả các thuộc tính đồng loạt cho một phần tử nhất định sẽ tạo ra kết quả cuối cùng tương đương để tra cứu từng thuộc tính có liên quan thông qua cấu trúc quy tắc . Nó có thể phụ thuộc vào thực tế là nhiều tác nhân người dùng cuối sẽ (nên?) âm thầm bỏ qua thông tin bổ sung không liên quan (và thường là quy kết). Ví dụ: phép biến đổi ở trên, do khớp *, cũng sẽ thêm các thuộc tính

  
    
      
      
      
    
  
  
  
    
    red
    black
  
  
    
    blue
    0.5
  

  7và
  0 vào bất kỳ phần tử
  1hoặc
  2 nào (hoặc phần tử con của chúng) trong tài liệu SVG, mặc dù các thuộc tính đó không được xác định cho các thành phần siêu tài liệu đó trong SVG. Làm thế nào vấn đề này có thể được giảm bớt sẽ được mô tả trong phần sau.

• Không sử dụng được làm bằng tài sản tương đối, tôi. e. nơi một thuộc tính thay đổi phụ thuộc vào thuộc tính của cha mẹ nào đó. Trong trường hợp này, mỗi quy tắc có thể được xem xét trong sự cô lập. Sau này tôi sẽ thảo luận về cách giải quyết vấn đề này

Để tạo các quy tắc này, trước tiên, chúng tôi cần xác định các mẫu XSLT tương đương sẽ khớp với các phần tử theo ngữ pháp bộ chọn CSS. Một số ví dụ được hiển thị trong các bảng sau

Bảng I

Một số tương đương mẫu CSS cơ bản

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

Bảng II

Một số mẫu dự đoán CSS (bộ chọn) tương đương

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

  
  
  
                      
                     
    
    
    
  



  
  
    HEADING: 
    ‟
  
  
    
  

  
  
  
                      
                     
    
    
    
  



  
  
    HEADING: 
    ‟
  
  
    
  

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

  
  
  
                      
                     
    
    
    
  



  
  
    HEADING: 
    ‟
  
  
    
  

  
  
  
                      
                     
    
    
    
  



  
  
    HEADING: 
    ‟
  
  
    
  

  
  
  
                      
                     
    
    
    
  



  
  
    HEADING: 
    ‟
  
  
    
  

  
  
    VITAL: 
    ‟
  
  
    
  



  
  
    ”
  
  
    
  

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

thuộc tính @style

Cũng như việc hỗ trợ các thuộc tính thuộc tính có căn cứ (

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
  
    VITAL: 
    ‟
  
  
    
  



  
  
    ”
  
  
    
  

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Hình 5

  
     
    
      
    
    
    
    
      
        
      
    
    
      
    
    
  



  
  red
  black


  
  blue
  0.5

Sử dụng các thuộc tính phong cách

Chúng tôi viết các thuộc tính được tìm thấy vào một phần tử tạm thời

  
  
    VITAL: 
    ‟
  
  
    
  



  
  
    ”
  
  
    
  

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
  
    VITAL: 
    ‟
  
  
    
  



  
  
    ”
  
  
    
  

Nội dung được tạo

Bộ chọn CSS cũng có thể bao gồm các từ hạn định (phần tử giả) bổ sung nội dung (văn bản) vào phần tử đã cho. Điều này thường được sử dụng để hỗ trợ ghi nhãn danh sách hoặc đánh số các tiêu đề hoặc các thực thể đang chạy như hình hoặc bảng. (Đáng tiếc đây không phải là một tính năng của SVG, vì vậy thay vì minh họa bằng hình ảnh, tôi sẽ phải sử dụng XHTML buồn tẻ để thay thế. ) Như một ví dụ rất đơn giản

Hình 6. Một số nội dung bổ sung về các phần tử XHTML

*{ font-family: arial, helvetica;}
h1, h2 { color: red; }
h1:before {content: "HEADING: " open-quote; }
h1.vital:before {content: "VITAL: " open-quote; }
h1:after {content:  close-quote; }

  
First h1 heading
  
Paragraph
  
First h2 heading
  
Paragraph
  
Second h1 heading
  
Paragraph
  
Second h2 heading
  
Paragraph

Bộ chọn

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
  
    VITAL: 
    ‟
  
  
    
  



  
  
    ”
  
  
    
  

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
  
    VITAL: 
    ‟
  
  
    
  



  
  
    ”
  
  
    
  

Để xử lý những điều này, chúng tôi có một bộ mẫu song song xử lý toàn bộ nội dung của phần tử, thu thập các phần nội dung trước và sau lần lượt được chuyển dưới dạng các biến được tạo đường hầm thuộc loại

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Bảng III

  
  
  
                      
                     
    
    
    
  



  
  
    HEADING: 
    ‟
  
  
    
  

  
  
    VITAL: 
    ‟
  
  
    
  



  
  
    ”
  
  
    
  

quầy

CSS sử dụng cùng một cơ chế để khai báo, sửa đổi và nội suy các giá trị của bộ đếm, điều này trở nên quan trọng trong việc tạo kiểu cho các tài liệu được phân đoạn

Hình 7. Tương đương XSLT cho bộ đếm được đánh số

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Khi các tên bộ đếm giống với các phần tử mà chúng đang đếm và các phần tử cùng tên không lồng vào nhau, một cấu trúc tương đương cho quy tắc

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

đếm ngược qua các phần tử liên quan đến phần tử cuối cùng đặt lại bộ đếm đã cho. Rõ ràng mã phức tạp hơn có thể được phát triển để xử lý các tên bộ đếm tùy ý và trong một XSLT3. 0 môi trường tích lũy có thể cung cấp một giải pháp thanh lịch hơn

Sử dụng bộ tích lũy làm bộ đếm

XSLT3. 0 đã giới thiệu bộ tích lũy để hỗ trợ xử lý hoặc lưu giữ dữ liệu từ cây nguồn để sử dụng sau này trong quá trình xử lý trực tuyến. Chúng có sự tương đồng với

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

và chúng tôi lấy giá trị của bộ đếm lần lượt bằng

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Điều này sử dụng giai đoạn sau khi xử lý một

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Hạn chế, thiếu sót và cách giải quyết

Tất nhiên, kỹ thuật hiện tại không thể xử lý tất cả các cấu trúc CSS, nhưng có một số nhược điểm và thiếu sót có thể dễ bị ảnh hưởng bởi các phương pháp khác nhau

thuộc tính tương đối

Một số thuộc tính số trong một quy tắc trong CSS, đặc biệt là kích thước phông chữ, có thể được xác định là có liên quan đến giá trị mặc định hoặc đã được xác định cho thuộc tính đó, chẳng hạn như

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Trong XSLT, tất nhiên chỉ có cây nguồn có thể được XPath kiểm tra trực tiếp – các cây kết quả cần được liên kết với các biến cục bộ để kiểm tra các biến đó. . Điều này gợi ý rằng các thuộc tính được tính toán cho cấp độ gốc cần được truyền lại cho quá trình xử lý cấp độ con, có thể ở dạng các biến được điều chỉnh theo đường hầm. Một khả năng chung là truyền xuống một thể hiện không có con, nhưng được quy cho, của phần tử đã thay đổi làm tham số để xử lý phần tử con. Trong XSLT3. 0 a

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

trong đó chế độ

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Di sản

Từ khóa giá trị thuộc tính

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

không gian tên

Hầu hết các biểu định kiểu CSS được sử dụng theo cách không biết đến không gian tên. các mẫu khớp với tên cục bộ của các phần tử. Tất nhiên XSLT không phải là sự thiếu hiểu biết như vậy và các mẫu phải phù hợp với không gian tên được áp dụng. Điều này có thể được thực hiện bằng cách sử dụng tên cục bộ với không gian tên ký tự đại diện (

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Nguồn gốc phong cách và tầm quan trọng

Quy tắc tạo kiểu có thể đến từ một số nguồn. tác nhân kết xuất, biểu định kiểu do người dùng áp đặt, biểu định kiểu do tác giả khai báo và cũng được đính kèm với các thuộc tính

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Hạn chế đối với các yếu tố áp dụng

Như đã đề xuất trong , các mẫu XSLT được tạo có phần thiên về công giáo, hoặc thậm chí có thể ung dung hơn, về khả năng ứng dụng của chúng. Thay vì một phần tử của, chẳng hạn, loại

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Nếu đây là sự cố, thì giải pháp khả thi sẽ là khai thác các hạn chế từ bất kỳ lược đồ nào có sẵn cho tài liệu đích. Ví dụ, lược đồ SVG hạn chế các thuộc tính được phép trên

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Ghi chú

Đáng buồn là SVG 1. 1 chỉ có DTD – lược đồ từ phiên bản 2002 trước đó

Một nhược điểm khác là các quy tắc CSS của chúng tôi được áp dụng bất kể thuộc tính liên quan có thể thao tác CSS trong ngôn ngữ đích hay không. Ví dụ, chúng ta có thể viết một quy tắc

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

sẽ được dịch sang mẫu đơn giản

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

hậu quả của nó sẽ là đặt thuộc tính chiều rộng của các phần tử lớn

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Xây dựng phép biến đổi XSLT

Trong phần này, tôi sẽ thảo luận cách biến đổi XSLT để thực hiện kiểu dáng CSS được xây dựng. Vì công cụ này được xây dựng dần dần khi cần thiết, một số phần chắc chắn không được hoàn thiện như mong đợi.

Bước đầu tiên của quy trình này là phân tích cú pháp (các) biểu định kiểu CSS để tạo ra cây phân tích cú pháp tương đương XML, từ đó có thể tạo mã tương đương thông qua các phương thức xử lý đẩy XSLT bình thường. Tất nhiên, có thể sử dụng một số dạng trình phân tích cú pháp toàn diện, có lẽ một dạng được tạo bởi trình tạo trình phân tích cú pháp tuyệt vời của Gunther Rademacher REx REx. Một tùy chọn khác là xây dựng dựa trên ví dụ về XML vô hình được mô tả bởi Pemberton Pemberton2013 sử dụng phân tích cú pháp CSS làm ví dụ. Tôi sẽ trở lại những khả năng này trong phần kết luận.

Tuy nhiên, trong môi trường hơi ad hoc mà công cụ này ban đầu được sử dụng và giả định rằng mức độ phức tạp của biểu định kiểu CSS . g. chuỗi không chứa { hoặc }), việc sử dụng kết hợp các biểu thức chính quy đã đủ cho đến nay. friendly (e.g. strings don't contain { or }), compound use of regular expressions has sufficed so far.

Các biểu định kiểu CSS có thể nhập các biểu định kiểu khác thông qua

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Sau khi xóa nhận xét, văn bản của CSS được chia thành các quy tắc riêng biệt bằng cách mã hóa theo mẫu

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Các biểu thức chính quy này được sử dụng hai lần – lần đầu tiên trong một kết hợp tổng thể (khi chúng được kết hợp dưới dạng liên kết) và sau đó là riêng lẻ trong các thử nghiệm cụ thể cho các thành phần cụ thể – thứ tự của các lựa chọn này có thể được sử dụng để khớp các trường hợp cụ thể hơn trước khi tổng quát hơn, chẳng hạn . Các cấu trúc

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

(Lưu ý rằng các phần tử

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Tập hợp các mô tả quy tắc được sắp xếp này sau đó được sử dụng để tạo mẫu XSLT (như được hiển thị trong ) ở chế độ

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

  
    
    
    
  



  
  red
  black


  
  blue
  0.5

Với biểu định kiểu tương đương được tạo, kết quả là nó có thể được phát ra để sử dụng bên ngoài hoặc trong XSLT3. 0, nó có thể được sử dụng làm biểu định kiểu nguồn cho lệnh gọi hàm

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Tính năng bổ sung

Ngoài bộ chọn, giá trị thuộc tính và bộ đếm, CSS còn định nghĩa một số tính năng kiểu dáng khác mà XSLT tương đương có thể được tạo tương đối dễ dàng. Bao gồm các

chuyển đổi văn bản

CSS hỗ trợ các mô hình chuyển đổi trường hợp nội dung văn bản của một phần tử có thuộc tính

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

nội dung. trích dẫn mở. trích dẫn gần

Thuộc tính nội dung có thể chứa các mã thông báo dành riêng để chèn dấu ngoặc kép, có thể lồng nhau và có giá trị không mặc định được lấy từ thuộc tính

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Một ví dụ lớn hơn

Một ví dụ thực tế hơn là quy trình tác giả/sản xuất cho một bài báo chuyên nghiệp cuối cùng sẽ được xuất bản ở định dạng PDF. Nhà xuất bản, trong trường hợp này là ACM, cung cấp hướng dẫn về phong cách và các mẫu trong Word hoặc LaTeX. Trong trường hợp này, nguồn giấy, phần lớn trong số đó có thể được tạo tự động (bao gồm cả các phần SVG tự sắp xếp) không ở định dạng nào trong số đó, mà ở dạng XHTML mở rộng và được định dạng tốt. Lộ trình xuất bản, đã được phát triển trong nhiều năm, liên quan đến việc ánh xạ từ XHMTL sang định dạng SVG/FO mở rộng (bao gồm các chỉ thị bố cục), sau đó đến SVG có cơ sở đầy đủ và sau đó sang PDF bằng trình chuyển đổi SVG → PDF

Ban đầu, các nguồn giấy được tạo trong trình soạn thảo XML tiêu chuẩn và kiểu dáng ACM được áp dụng thông qua các mẫu XSLT và bộ thuộc tính được sử dụng để tạo nội dung tài liệu tương đương và chỉ thị bố cục. Điều này là hợp lý, nhưng giao diện người dùng chỉnh sửa tất cả đều là dấu ngoặc nhọn. Với sự ra đời của các gói tạo kiểu, chẳng hạn như gói trong Oxygen, nơi tài liệu được xem và chỉnh sửa thông qua biểu định kiểu CSS, có thể chỉnh sửa tài liệu với hầu hết các thành phần được tạo kiểu hợp lý – e. g. các đoạn văn có phông chữ chính xác, các tiêu đề trông giống như các tiêu đề sẽ có trong tài liệu cuối cùng, bao gồm cả việc đánh số phần, các danh sách được xem dưới dạng danh sách, v.v. và các dấu ngoặc nhọn hiếm khi được nhìn thấy

Mất ít thời gian để viết CSS tương đương ACM cho các thành phần chính của báo cáo XHTML, vì vậy việc soạn thảo bài báo trở nên dễ dàng hơn nhiều. Sau đó, chúng ta có thể sử dụng các kỹ thuật được mô tả ở trên để tạo kiểu của XHTML theo CSS và loại bỏ kiểu thiết lập thuộc tính khỏi bước XHTML→SVG/FO. Trong quá trình làm điều này tất nhiên, chúng tôi tăng tính tổng quát của giải pháp. Kiểu dáng kết cấu (trái ngược với bố cục/hình học) hiện có thể được xác định hoàn toàn từ CSS

Đây là một phần của nguồn ban đầu, trong đó có một số khai báo phần tử bổ sung (

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Đây là một số phần có liên quan từ CSS kiểu ACM

Và đây là giao diện khi xem kết hợp ở chế độ Tác giả của Oxygen

Hình 8. Kiểu dáng ACM trong chế độ soạn thảo tài liệu

Khi chúng tôi chuyển đổi CSS thành XSLT và áp dụng nó, bây giờ chúng tôi nhận được

sau đó được chuyển đổi thành SVG và cuối cùng là PDF trông như thế này

Hình 9. Ấn phẩm cuối cùng về tiêu chuẩn ACM ở dạng PDF

Ghi chú

Người quan sát sẽ nhận thấy rằng kiểu dáng chú thích cuối trang thay đổi.

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

* { /* rule 1 */
    fill: red;
    stroke: black;   
}
rect.a { /* rule 2 */
    fill: blue;
    fill-opacity: 0.5;
}

Kỹ thuật này không chỉ được sử dụng trên nhiều loại giấy tờ chuyên nghiệp mà còn được sử dụng để tạo các bảng dữ liệu sản phẩm PDF cho một nhà cung cấp động cơ XSLT nổi tiếng và thực sự là toàn bộ phong cách của luận án tiến sĩ của tác giả

Những phát triển có thể và kết luận

Bài báo này đang báo cáo về công việc đang được tiến hành và do đó có một số lĩnh vực cần phát triển để sử dụng hộp đen, một số lĩnh vực đã được giới thiệu trước đó. Cấp bách nhất, cung cấp phân tích cú pháp mạnh mẽ của CSS, được báo cáo trong tiểu mục tiếp theo. Những người khác đang chờ đợi sự phát triển là

• Hỗ trợ các khai báo (

  
    
      
      
      
    
  
  
  
    
    red
    black
  
  
    
    blue
    0.5
  

  6) quan trọng – những khai báo này cần được tách biệt khỏi phần buồn tẻ, có nghĩa là các quy tắc có thể cần được chia thành hai phần khai báo và những phần quan trọng được xếp hạng ưu tiên (và do đó ưu tiên mẫu XSLT cuối cùng) trên tất cả những phần không

• Cung cấp một lộ trình để khai báo thuộc tính thừa kế và thuộc tính tương đối. Như đã ngụ ý trước đó, một cơ chế sử dụng các biến đường hầm (

  * { /* rule 1 */
      fill: red;
      stroke: black;   
  }
  rect.a { /* rule 2 */
      fill: blue;
      fill-opacity: 0.5;
  }

  77) có thể được sử dụng để chuyển các giá trị được tính toán cho các phần tử cha trong quá trình xử lý đệ quy của cây, từ đó giá trị tương đối cho phần tử con có thể được tính toán. Điều này sẽ phức tạp hơn nữa do nhu cầu xử lý số học nhiều đơn vị (

  * { /* rule 1 */
      fill: red;
      stroke: black;   
  }
  rect.a { /* rule 2 */
      fill: blue;
      fill-opacity: 0.5;
  }

  78), trong một vũ trụ rời rạc (

  * { /* rule 1 */
      fill: red;
      stroke: black;   
  }
  rect.a { /* rule 2 */
      fill: blue;
      fill-opacity: 0.5;
  }

  79) hoặc thiết lập các giá trị cơ bản khi không có bất kỳ cài đặt biểu định kiểu CSS nào (e. g Cỡ chữ HTML 3)

Phân tích cú pháp CSS mạnh mẽ

Sử dụng trình phân tích cú pháp CSS mạnh mẽ (có thể hoạt động hoàn toàn trong XSLT hoặc dưới dạng chức năng mở rộng XSLT dựa trên CSS/SAC) để tạo ra một cây XML sẽ thuận lợi và chắc chắn cần thiết cho bất kỳ mục đích sử dụng sản xuất tự động quy mô đầy đủ nào. Ví dụ: sử dụng ngữ pháp khai báo CSS gần đúng cùng với ngữ pháp cho bộ chọn, được viết bằng EBNF, chúng ta có thể sử dụng REx để tạo trình phân tích cú pháp thích hợp và lấy cây phân tích cú pháp thô cho biểu định kiểu CSS, trong đó tên phần tử là tên của phần tử thích hợp.

Những cây này có xu hướng lớn, như Pemberton đã lưu ý và các dạng thu nhỏ sẽ thuận tiện hơn nhiều. Như trong Lumley2014, nhiệm vụ XSLT đơn giản là tinh chỉnh các cây này thành các yếu tố cần thiết, bằng cách loại bỏ hầu hết các phần tử một con để ưu tiên cho các phần tử con của chúng và di chuyển nhiều toán tử sang các thuộc tính. Vì vậy, ví dụ, chúng ta có thể phân tích cú pháp sau thành các cây đi kèm

Bảng IV

Cây phân tích cú pháp CSS đã giảm

Ghi chú

Ý tưởng của Pemberton về việc xác định một ngữ pháp đánh dấu cụ thể những gì sẽ được ghi vào cây phân tích cú pháp cuối cùng và bằng cách nào, khá hấp dẫn vì nó sẽ tự động hóa giai đoạn sàng lọc, hiện được viết bằng XSLT (đơn giản). Thậm chí có thể dễ dàng sử dụng định nghĩa ngữ pháp XML vô hình và chiếu nó thành hai dạng – EBNF để sử dụng cho trình tạo trình phân tích cú pháp và một bộ hướng dẫn (mẫu XSLT?) để sàng lọc cây phân tích cú pháp

Từ các cấu trúc này, tương đối dễ dàng để tạo thành các cấu trúc mẫu giống như đã trình bày trước đó hoặc tạo ra một chiến lược tạo mẫu mới. Đây là một dạng trung gian và các cấu trúc XSLT kết quả

Bảng V

Biểu mẫu trung gian và phần XSLT cuối cùng

Đối với quy tắc đầu tiên, các thuộc tính thích hợp cho phần tử con (mẫu phù hợp, tính đặc hiệu của CSS) được hiển thị – sau đó chúng được kết hợp để tạo thành mẫu chung và tính đặc hiệu phức hợp cho quy tắc. Sau đó, các quy tắc này có thể được sắp xếp theo tính đặc hiệu của chúng để tạo ra thứ tự ưu tiên đã khai báo cho các mẫu XSLT kết quả. Quy tắc thứ hai đã được chia thành hai bản sao vì các mẫu của chúng có tính đặc hiệu khác nhau và do đó phải được hỗ trợ bởi các quy tắc XSLT hoạt động ở các mức độ ưu tiên khác nhau

Dịch chương trình chung

Nói một cách tổng quát hơn, tác phẩm này là một ví dụ về một kỹ thuật chung nhờ đó các phần của chương trình P , được viết bằng một số ngôn ngữ < . Sự thành công của việc này sẽ phụ thuộc vào một số yếu tố. Y are used within some other program written in a language Z , by equivalence conversion of P→Pz. The success of this would be subject to a number of factors:

• Mức độ giống nhau về ngữ nghĩa thực thi của Y và Z. In this case CSS and XSLT push mode both work in a pattern-directed manner, with a defineable conflict resolution modelwith a similar source tree → result tree execution and a common target data type, so most of the main semantics of CSS can be simulated closely by XSLT equivalent models.

  Khi các ngôn ngữ không có sự thống nhất chặt chẽ như vậy, có thể dễ dàng xây dựng thông dịch viên cho các phần của Y trong Z becomes important. For example a program defined as simple non-cyclic spreadsheet could be interpreted in XSLT by casting as some XML datastructure coupled with an iterative tree-walker that uses a calculator function.

• Mức độ (và độ chính xác) ngữ nghĩa của Y được yêu cầu trong P. When these are large, significant problems may result. For example, if P yêu cầu xử lý lỗi chính xác, thì có thể khó cung cấp điều tương tự trong Z . Trong trường hợp của chúng tôi, việc xử lý lỗi thực thi của CSS về cơ bản bị bỏ qua, vì vậy điều này không gây ra sự cố và chúng tôi không đẩy các cạnh của đường bao CSS. Tương tự, chúng tôi sẵn sàng đẩy thuộc tính CSS lên mục tiêu, thay vì kéo thuộc tính khỏi CSS, tạo khả năng tạo kiểu không liên quan, trên cơ sở các tác nhân người dùng cuối sẽ bỏ qua những vi phạm nhỏ như vậy, cho phép một mô hình đơn giản và chung chung hơn nhiều. environment. In our case, CSS's execution error handling is basically ignore, so this doesn't cause a problem, and we're not pushing the edges of the CSS envelope. Equally we are prepared to push the CSS property onto the target, rather than pull the property from the CSS, giving the possibility of extraneous styling, on the basis that final user agents will ignore such minor infractions, permitting a much simpler and more generic model.

• Yêu cầu về hiệu suất thực thi. Nói chung, các mô phỏng mã tương đương như vậy sẽ luôn chậm hơn so với triển khai gốc, đôi khi chậm hơn rất nhiều

• Kỹ năng và tay nghề của nhà phát triển chương trình, đặc biệt khi một số tính năng yêu cầu hỗ trợ giải pháp thay thế

• Mức độ dễ dàng mà ngôn ngữ Y có thể được phân tích cú pháp từ mã trong Z. This can range from hand-crafted code (such as using regular expressions as described in ) to using a specifically targeted parser.

Ưu điểm thực sự của việc sử dụng XSLT cho chuyển đổi như vậy là một khi cây phân tích cú pháp đã được thiết lập trong XML, đó là một quy trình chế độ đẩy thống nhất để xây dựng các cấu trúc dữ liệu cần thiết khác và các mô hình phụ trợ mà sau đó có thể được sử dụng để . P These intermediate data structures can be examined easily (they serialize).

Phần kết luận

Bài báo này đã mô tả việc sử dụng một chương trình được viết bằng ngôn ngữ khác (CSS) như một thành phần trong môi trường thực thi XSLT, bằng cách chuyển đổi chéo. Phương pháp này ban đầu khá thô và sẵn sàng và được sử dụng cho một mục đích tài liệu duy nhất nhưng đã dần dần được cải tiến cho đến khi nó có thể phù hợp với (một số) tình huống bán sản xuất, đặc biệt là trong tay của những người thợ thủ công. Mặc dù sự giống nhau về ngữ nghĩa chính của CSS và một số phần của XSLT (gọi mẫu, phép chiếu thuộc tính) có nghĩa là mô hình thực thi XSLT cần thiết khá đơn giản, kỹ thuật này vẫn có tiềm năng cho các tình huống khác. Việc sử dụng mô hình xử lý lấy XML làm trung tâm bắt đầu từ cây phân tích cú pháp ngôn ngữ nguồn và tiến tới các cấu trúc dữ liệu trung gian, kết hợp với XSLT3. 0, làm cho lĩnh vực này không chỉ hiệu quả mà còn thú vị. Tôi khuyến khích người khác thử nó

Sự nhìn nhận

Tôi phải cảm ơn một số tổ chức (ACM, Đại học Nottingham, Saxonica) đã đặt ra những thách thức về tạo tài liệu đã thúc đẩy và thực hiện nhu cầu sử dụng CSS này ở những nơi không được hỗ trợ. Tôi cũng rất biết ơn những nhận xét sâu sắc và hỗ trợ từ những người đánh giá Balisage, những người đã khuyến khích tôi nâng cao tính mạnh mẽ của phương pháp, cả về việc sử dụng phân tích cú pháp CSS thích hợp và giải quyết các vấn đề phức tạp hơn, đặc biệt là về kế thừa kiểu dáng

Người giới thiệu

Bos, Bert và cộng sự, Biên tập viên. Cascading Style Sheets Cấp 2 Bản sửa đổi 2 (CSS 2. 2) Thông số kỹ thuật. World Wide Web Consortium, Bản thảo của biên tập viên, ngày 29 tháng 3 năm 2016. [trực tuyến] http. // nhà phát triển. w3. org/csswg/css2/

[CSS3] Çelik, Tantek et al, Biên tập viên. Bộ chọn cấp 3. World Wide Web Consortium, ngày 29 tháng 9 năm 2011. [trực tuyến] http. //www. w3. org/TR/css3-bộ chọn/

Lumley, John. Các tài liệu biến dựa trên SVG, có thể mở rộng, có chức năng Kỷ yếu của hội nghị chuyên đề ACM 2013 về Kỹ thuật tài liệu, trang 131-140. doi. https. //doi. tổ chức/10. 1145/2494266. 2494274. [trực tuyến] http. //dl. cm. tổ chức/trích dẫn. cfm?doid=2494266. 2494274

Lumley, John. Phân tích khả năng truyền phát XSLT. Trong Kỷ yếu Balisage. Hội nghị đánh dấu 2014. Sê-ri Balisage về Công nghệ đánh dấu, tập. 13 (2014). doi. https. //doi. tổ chức/10. 4242/BalisageVol13. lumley01. [trực tuyến] http. //www. cân bằng. net/Proceedings/vol13/html/Lumley01/BalisageVol13-Lumley01. html

[LumleyPhD] Lumley, John. Tài liệu dưới dạng chức năng. Đại học Nottingham, Luận án tiến sĩ. Tháng 6 năm 2012 [trực tuyến] http. // bản in. Nottingham. AC. anh/12631/

Pemberton, Steven. XML vô hình. Trong Kỷ yếu Balisage. Hội nghị đánh dấu 2013. Sê-ri Balisage về Công nghệ đánh dấu, tập. 10 (2013). doi. https. //doi. tổ chức/10. 4242/BalisageVol10. Pemberton01. [trực tuyến] http. //www. cân bằng. net/Proceedings/vol10/html/Pemberton01/BalisageVol10-Pemberton01. html

Rademacher, Gunther. Trình tạo trình phân tích cú pháp REx. [trực tuyến] http. //www. nút chai. de/rex/

[XPath3. 0] Robie, Jonathan, Chamberlin, Don, Dyck, Michael và Snelson, John, Biên tập viên. Ngôn ngữ đường dẫn XML (XPath) 3. 0. World Wide Web Consortium, ngày 08 tháng 4 năm 2014. [trực tuyến] http. //www. w3. org/TR/xpath-30/

[Xpath. FO] Kay, Michael, Biên tập viên. Các hàm và toán tử XQuery và XPath 3. 0. World Wide Web Consortium, ngày 08 tháng 4 năm 2014. [trực tuyến] http. //www. w3. org/TR/xpath-functions-30/

[XSLT2. 0] Kay, Michael, Biên tập viên. Biến đổi XSL (XSLT) Phiên bản 3. 0. World Wide Web Consortium, ngày 2 tháng 10 năm 2014. [trực tuyến] http. //www. w3. org/TR/xslt-30/

Sự khác biệt giữa XSLT và CSS là gì?

XSLT có mạnh hơn CSS không?

Bạn có thể sử dụng CSS trong XSLT không?