There's an xml document like this:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet href="#style" type="text/css"?>
<root>
<style>
style {display: none}
entry {display: block}
english {font-weight: bold}
spanish {font-style: italic}
</style>
<entry>
<sense_unit>
<english>abandon</english>
<spanish>abandonar</spanish>
</sense_unit>,
<sense_unit>
<english>friend</english>
<spanish>amigo</spanish>
</sense_unit>
</entry>
</root>
Web browser renders this:
style {display: none} entry {display: block} english {font-size: 10pt; font-family: "Times New Roman"} spanish {font-size: 9pt; font-family: "Arial"}
abandon abandonar , friend amigo
I'd like to hide the contents of style element, but it still appears.
I don't want the space between abandonar and the following comma. (But I don't want to insert the comma inside the sense_unit) How can I do that? (That is, ... abandonar , friend ... -> ... abandonar, friend ...)
This has nothing to do with css, and everything to do with well-formed XML. All linebreaks in XML are considered an element and therefore will create those spaces. Remove all your line-breaks and those spaces will disappear.
Update jsFiddle example where I've removed all your line breaks and spaces just within the <entry>
Related
If I have the below XML code:
<member name="componentName">
Don't show this text.
<summary>Do show this text.</summary>
</member>
What can I do in terms of CSS to show the inner text? I have tried setting the member display to none and the summary display to block as well as setting the member font size to zero, but with no luck.
Thank you!
Try the following:
member {
color: transparent;
font-size:0;
line-height:0;
}
member summary {
color:#000;
font-size:18px;
}
<member name="componentName">
Don't show this text.
<summary>Do show this text.</summary>
</member>
How do I add a styleClass to a given XPage styleSheet ?
.required {
background: red;
}
I want to do the same as Knut Herrmann answered here but unfortunately it is not shown how to add that class to the XPage styleSheet (resp. edit that styleSheet). So how to achieve that ?
Create a css file in database's Resources / Style Sheets
and add this css file as resource to your XPage in XPage's property "Resources".
1) Create your own stylesheet file in your database (e.g. custom.css under resources/stylesheets)
2) Now you can add a new styleclass to your stylesheet file or you can overwrite an existing styleclass
Overwrite example:
XPage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<xp:text escape="true" id="computedField1" value="Hello"></xp:text>
</xp:view>
custom.css:
.xspTextComputedField {
font-weight: bold;
}
"New" example:
XPage:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/custom.css"></xp:styleSheet>
</xp:this.resources>
<xp:text escape="true" id="computedField1" value="Hello" styleClass="customXspTextComputedField"></xp:text>
</xp:view>
custom.css:
.customXspTextComputedField {
font-weight: bold;
font-size: 20pt;
}
I'm trying to create an XSLT which lists out movies, and I'm styling the titles so that each title has it's own color, I then select the title with with interpolation (XPath?)
Here is the XSL file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Videos</title>
<style>
table, tr, td { border: thin black solid }
th { background-color: #AAFFAA }
.Daredevil { color: red; }
/* Look at those spaces! Hrmphf! */
.Drag Me To Hell { color: green; }
</style>
</head>
<body>
<table>
<tr><th>Movies</th></tr>
<xsl:apply-templates select="//movie"/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="//movie[not(#title=preceding::movie/#title)]">
<!-- Title should be the one of the titles in the CSS -->
<tr class="{#title}"><td><xsl:value-of select="#title"/></td></tr>
</xsl:template>
</xsl:stylesheet>
The problem however is that some movie titles contain spaces. Can I have spaces in the name? If not, are there any workarounds (besides having underscores or the like in the XML)?
Update:
Ok, I get that it's not possible. At the moment I'm using translate(#title, ' ', '-') Which works when the CSS-names are delimited by -. I would still like to know if there are any better way of doing this. :)
class="Drag me to" creates an element with three different classes.
The selector .Drag.Me.To will match elements with all three classes.
However, it will match them in any order, and won't count duplicates.
No, you cannot have spaces in CSS rule names
CSS classes / id´s cannot contain spaces.
Since a space is used to seperate different classes.
You will have to resolve to a (-)
It feels a bit odd to me to tie the CSS to the actual data content in this way. Your stylesheet seems to know in advance what it expects to find in the data file, and that feels like bad design - it should be generic. Why not introduce an indirection from movie title to CSS classes:
<xsl:variable name="movieStyles">
<movie title="Drag me to hell" css-class="hell-class"/>
<movie ...
</xsl:variable>
then <tr class="{f:css-class-for-title(#title)}" ...
where the function f:css-class-for-title uses the lookup data to map movie titles to CSS classes.
I've defined a Russian localization file but when setting the locale all I get is ? symbols...
When creating a sample flex app with Cyrillic characters they are displayed just fine, but somehow setting the locale does no work.
Any ideas?
Fixed it...
My localization files were not encoded in UTF8, that was causing the problem.
It sounds like you're using embedded fonts, but the characters you're trying to display aren't included in the font.
From the docs:
<?xml version="1.0"?>
<!-- fonts/EmbeddedFontCharacterRange.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
#font-face {
src:url("../assets/MyriadWebPro.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
unicodeRange:
U+0041-U+005A, /* Upper-Case [A..Z] */
U+0061-U+007A, /* Lower-Case a-z */
U+0030-U+0039, /* Numbers [0..9] */
U+002E-U+002E; /* Period [.] */
}
TextArea {
fontFamily: myFontFamily;
fontSize: 32;
}
I am writing some CSS to customise the display of an XML document. Basically I want to customise the display of child elements, and render them similar to HTML OL/UL/LI elements.
My XML is structured like this:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<transcription>
<turn>
<speaker>Speaker Name</speaker>
<clause>
text here
</clause>
<clause>
one or more clauses
</clause>
</turn>
</transcription>
My CSS looks like this:
turn {
counter-reset: item;
}
turn clause {
display:list-item;
}
clause {
content: counter(item);
counter-increment: item;
}
I am using this site: http://www.xml.com/lpt/a/401 and basically have a similar document http://www.xml.com/2000/03/29/tutorial/examples/display1.xml, the problem is that the display1.xml does not work in firefox. I do get it working in IE, Safari, Chrome etc.
Can any provide a link, or sultion that would work in firefox, as well as the other browsers?
It looks like there is some bug in the way that firefox implements the display: list-item property, specifically the passing of the counter value. I believe this gives rise to the zeros which show in firefox, but not in chrome.
My workaround is to forget about using 'display: list-item' and instead style the items directly so they appear as a list:
transcription {
counter-reset: item;
}
clause {
display:block;
margin-left:40px;
}
clause:before {
counter-increment: item;
content: counter(item) ". ";
}
this works with the following XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style2.css"?>
<transcription>
<turn>
<speaker>Speaker Name</speaker>
<clause>
text here
</clause>
<clause>
text here
</clause>
<clause>
text here
</clause>
</turn>
let me know how you get on...
AL