{"id":380,"date":"2014-05-28T17:05:36","date_gmt":"2014-05-28T15:05:36","guid":{"rendered":"http:\/\/blogs.igalia.com\/jaragunde\/?p=380"},"modified":"2014-07-31T20:57:00","modified_gmt":"2014-07-31T18:57:00","slug":"tales-of-libreoffice-interoperability-font-and-paragraph-colors","status":"publish","type":"post","link":"https:\/\/blogs.igalia.com\/jaragunde\/2014\/05\/tales-of-libreoffice-interoperability-font-and-paragraph-colors\/","title":{"rendered":"Tales of LibreOffice interoperability: font and paragraph colors"},"content":{"rendered":"<p>Last week, LibreOffice community branched out the <a href=\"https:\/\/wiki.documentfoundation.org\/ReleaseNotes\/4.3\" title=\"LibreOffice 4.3 release notes\" target=\"_blank\">version 4.3<\/a> in preparation of the next release in July. We had already introduced one of the new interoperability features that will be part of that release in <a href=\"http:\/\/blogs.igalia.com\/jaragunde\/2014\/04\/14\/tales-of-libreoffice-interoperability-theme-fonts\/\" title=\"Tales of LibreOffice interoperability: theme fonts\" target=\"_blank\">the previous post in this series<\/a>, and now we will continue explaining how OOXML theme colors will be preserved in LibreOffice.<\/p>\n<p>Theme colors have a prominent place in the color palette in the latest Microsoft Office versions, as you can see:<br \/>\n<a href=\"http:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-27-185451.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-27-185451.png\" alt=\"Word color elector\" width=\"174\" height=\"215\" class=\"aligncenter size-full wp-image-423\" \/><\/a><\/p>\n<p>They consist on a palette of ten colors, each one of them with five more variations. When a user changes the document theme, a new palette of colors will be loaded and any objects in the document that used one of those colors will be updated with the corresponding one from the new palette.<\/p>\n<p>In the XML document, a theme color is identified by a name, and its variations are implemented with two attributes: <em>shade<\/em> to lighten the color and <em>tint<\/em> to darken it.<\/p>\n<p>This is an example of theme color applied to the characters in a text run &#8211; a chunk of text with the same properties. In the run properties (<em>rPr<\/em>) we find the following tag (<a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/documentformat.openxml.wordprocessing.color(v=office.14).aspx\" title=\"Reference for w:color tag\" target=\"_blank\">reference<\/a>):<br \/>\n[code language=&#8221;xml&#8221;]<br \/>\n&lt;w:rPr&gt;<br \/>\n  &lt;w:color w:val=&quot;E5B8B7&quot; w:themeColor=&quot;accent2&quot; w:themeTint=&quot;66&quot;\/&gt;<br \/>\n&lt;\/w:rPr&gt;<br \/>\n[\/code]<br \/>\n<a href=\"http:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140852.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140852.png\" alt=\"Theme color for character\" width=\"518\" height=\"71\" class=\"aligncenter size-full wp-image-436\" srcset=\"https:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140852.png 518w, https:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140852-300x41.png 300w, https:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140852-500x68.png 500w\" sizes=\"auto, (max-width: 518px) 100vw, 518px\" \/><\/a><\/p>\n<p>This is the theme color named accent2 darkened a 66%. The <em>w:val<\/em> property indicates the RGB code of the final color, it&#8217;s ignored if <em>w:themeColor<\/em> is present.<\/p>\n<p>The preservation of this tag is simple:<\/p>\n<ul>\n<li>On import, store <em>w:themeColor<\/em>, <em>w:themeTint<\/em> and <em>w:themeShade<\/em> properties as hidden properties in the text run.<\/li>\n<li>Store the original color too!<\/li>\n<li>On export, check if the original color has changed:\n<ul>\n<li>if it did, write only the new color in the <em>w:val<\/em> property.<\/li>\n<li>if it didn&#8217;t, write the stored <em>w:themeColor<\/em>, <em>w:themeTint<\/em> and <em>w:themeShade<\/em> properties.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Now, an example of paragraph shade with theme colors (<a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/documentformat.openxml.wordprocessing.shading(v=office.14).aspx\" title=\"Reference for w:shd tag\" target=\"_blank\">reference<\/a>):<br \/>\n[code language=&#8221;xml&#8221;]<br \/>\n&lt;w:pPr&gt;<br \/>\n  &lt;w:shd w:val=&quot;thinDiagStripe&quot;<br \/>\n         w:color=&quot;215868&quot; w:themeColor=&quot;accent5&quot; w:themeShade=&quot;80&quot;<br \/>\n         w:fill=&quot;DBE5F1&quot; w:themeFill=&quot;accent1&quot; w:themeFillTint=&quot;33&quot; \/&gt;<br \/>\n&lt;\/w:pPr&gt;<br \/>\n[\/code]<br \/>\n<a href=\"http:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140504.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140504.png\" alt=\"Paragraph filling with pattern\" width=\"518\" height=\"71\" class=\"aligncenter size-full wp-image-434\" srcset=\"https:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140504.png 518w, https:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140504-300x41.png 300w, https:\/\/blogs.igalia.com\/jaragunde\/files\/2014\/05\/Captura-de-pantalla-de-2014-05-28-140504-500x68.png 500w\" sizes=\"auto, (max-width: 518px) 100vw, 518px\" \/><\/a><\/p>\n<p>Paragraph shades can specify two colors, one for the background and another one for the pattern if present, with the type of pattern specified by the <em>w:val<\/em> attribute. The set of attributes <em>w:color<\/em>, <em>w:themeColor<\/em>, <em>w:themeShade<\/em> and <em>w:themeTint<\/em> work like in the case of font colors, specifying the RGB code, theme color name, shade and tint modifiers for the pattern; <em>w:fill<\/em>, <em>w:themeFill<\/em> <em>w:themeFillTint<\/em> and <em>w:themeFillShade<\/em> do the same for the background color.<\/p>\n<p>The preservation of these properties works analogously; they are also stored as a hidden property of the text on import, and saved back on export in case the user hasn&#8217;t changed the fill color while editing the document with LibreOffice.<\/p>\n<p>The <em>w:shd<\/em> tag can also be used in table or table cell properties with the same meaning. And speaking of tables, we also made sure that the table style property was preserved:<\/p>\n<p>[code language=&#8221;xml&#8221;]<br \/>\n&lt;w:tblPr&gt;<br \/>\n  &lt;w:tblStyle w:val=&quot;Tablaconcuadrcula&quot; \/&gt;<br \/>\n  &#8230;<br \/>\n&lt;\/w:tblPr&gt;<br \/>\n[\/code]<\/p>\n<p>We will continue next week with more shiny features brought to you by <a href=\"http:\/\/www.igalia.com\" title=\"Igalia website\" target=\"_blank\">Igalia<\/a> and <a href=\"http:\/\/www.cloudon.com\/\" title=\"CloudOn website\" target=\"_blank\">CloudOn<\/a>. Stay tuned!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last week, LibreOffice community branched out the version 4.3 in preparation of the next release in July. We had already introduced one of the new interoperability features that will be part of that release in the previous post in this &hellip; <a href=\"https:\/\/blogs.igalia.com\/jaragunde\/2014\/05\/tales-of-libreoffice-interoperability-font-and-paragraph-colors\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,17],"tags":[20],"class_list":["post-380","post","type-post","status-publish","format-standard","hentry","category-igalia","category-libreoffice","tag-lo-4-3-interoperability"],"_links":{"self":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts\/380","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/comments?post=380"}],"version-history":[{"count":16,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts\/380\/revisions"}],"predecessor-version":[{"id":442,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/posts\/380\/revisions\/442"}],"wp:attachment":[{"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/media?parent=380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/categories?post=380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.igalia.com\/jaragunde\/wp-json\/wp\/v2\/tags?post=380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}