In my app I need to present an HTML file in TextView not in WebView, and this file has a complex CSS, not just text color, bold, etc.
My CSS is like the one below:
table {
width: 100%;
}
table td {
padding: 10px;
border-bottom: 1px solid #eee;
box-sizing: border-box;
}
/* -------------------------------------------------- */
.btn {
float: left;
font-size: 11px;
color: #FFF!important;
text-transform: uppercase;
background: #a8353a;
padding: 0 14px;
margin: 10px 0 0!important;
cursor: pointer;
line-height:30px;
}
.btn:hover {
background: #d8474e
}
/* -------------------------------------------------- */
ul li {
list-style-type: square;
margin: 10px 20px;
}
.allcaps {
text-transform:uppercase;
}
/* -------------------------------------------------- */
.tablewithimages .image {
width: 45%;
}
@media only screen and (max-width: 768px) {
.tablewithimages td, .tablewithimages .image {
display:block;
width:100%;
padding: 10px 0 0 0;
border:0;
}
.tablewithimages img {
margin-top:30px;
}
}
/* -------------------------------------------------- */
/* ---------------- RECOMMENDED APPS ---------------- */
.appslist a {
border: 0 !important;
}
.appslist ul {
vertical-align: top;
margin:0;
padding: 0;
}
.appslist li {
width: 48.5%;
display: inline-table;
margin-bottom: 50px;
vertical-align: top;
padding-right: 1%;
}
.inner_left_side.equal .appslist .appitem {
width: 100%;
padding-right: 0;
margin-bottom: 20px;
}
ul .appitem {
margin: 10px 0;
}
.appslist img {
height: auto;
max-height: 100%;
max-width: 100%;
width: 100%;
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
border: 1px solid #ccc;
border-radius: 18px;
overflow: hidden;
}
.appslist .appitem .image {
width: 70px;
height: 110px;
float: left;
margin-right: 10px;
margin-top: 0;
}
.appslist p {
padding-right: 10px;
margin-bottom: 10px;
text-align: initial;
}
.appslist .apptitle {
font-size: 14px;
margin-right: 10px;
padding-top: 0;
margin-top: 0;
margin-bottom: 7px;
text-transform: uppercase;
font-weight: bold;
}
.appslist .apptext {
font-size: 14px;
line-height: 22px;
margin-left: 90px;
}
.appslist .stores {
margin-left: 90px;
width: auto;
display: block;
}
.inner_left_side.equal .appslist .stores {
width: 100%;
text-align: initial;
}
.story .text .appslist .stores {
margin-left: 130px;
}
.appslist .appitem li {
display: inline-block;
min-height: 0;
margin-bottom: 0px;
width: 125px;
background-repeat:no-repeat;
margin: 0;
}
.appslist .appitem li a {
display: block;
padding-left: 33px;
background-repeat: no-repeat;
background-position: 5px center;
color: rgba(51,51,51,1.00);
background-color: rgba(255,255,255,0.00);
border-radius: 3px;
text-decoration: none;
padding-right: 10px;
line-height: 34px;
font-size: 14px;
background-size: auto 75%;
white-space: nowrap;
}
.stores .apple {
background-image:url('********.png');
}
.stores .android {
background-image:url('********.png');
}
@media only screen and (max-width: 800px) {
.appslist li {
width: 100%;
}
.inner_left_side.equal .appslist .stores {
width:auto;
}
}
I searched a lot on how to present full CSS in UITextView, and I found answers like this one but all these answers defined how to add simple CSS.
Does anyone try to add complex CSS to UITExtView before? Are there any libraries support this features?