问题
I have a simple HTML / CSS file.
<style type="text/css">
table {
font-family: "Arial Unicode MS";
border-collapse: collapse;
width: 100%;
}
thead tr td {
font-family: "Arial Unicode MS";
font-weight: 700;
font-size: 12pt;
background-color: gray;
}
td {
font-family: "Arial Unicode MS";
border-bottom: 1px black solid;
border-top: 1px black solid;
border-left: 2px black solid;
border-right: 2px black solid;
}
h1 {
font-family: "Arial Unicode MS";
text-align: center;
}
.columnStudyPoint {
}
.columnDate {
text-align: center;
/*width: 10%;*/
}
.textStudyPoint {
font-weight:700;
}
.textStudyDescription {
}
@media print {
thead {
display: table-header-group;
}
table tbody tr td:before,
table tbody tr td:after {
content : "" ;
height : 4px ;
display : block ;
}
}
</style><!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="CounselForm.css" rel="stylesheet" type="text/css" />
<title>Student Counsel Forms</title>
</head>
<body>
<h1>Counsel Form for Happy Face</h1>
<table align="center" cellpadding="2" cellspacing="0">
<colgroup>
<col width="100%" /><col /><col />
</colgroup>
<thead>
<tr>
<td class="columnStudyPoint">Study Point</td>
<td class="columnDate">Date Assigned</td>
<td class="columnDate">Date Completed</td>
</tr>
</thead>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">1</span> <span class="textStudyDescription">Accurate
Reading</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">2</span> <span class="textStudyDescription">Words
Clearly Spoken</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">3</span> <span class="textStudyDescription">Correct
Pronunciation</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">4</span> <span class="textStudyDescription">Fluent
Delivery</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">5</span> <span class="textStudyDescription">Appropriate
Pausing</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">6</span> <span class="textStudyDescription">Proper
Sense Stress</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">7</span> <span class="textStudyDescription">Principal
Ideas Emphasized</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">8</span> <span class="textStudyDescription">Suitable
Volume</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">9</span> <span class="textStudyDescription">Modulation</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">10</span> <span class="textStudyDescription">Enthusiasm</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">11</span> <span class="textStudyDescription">Warmth
And Feeling</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">12</span> <span class="textStudyDescription">Gestures
and Facial Expressions</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">13</span> <span class="textStudyDescription">Visual
Contact</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">14</span> <span class="textStudyDescription">Naturalness</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">15</span> <span class="textStudyDescription">Good
Personal Appearance</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">16</span> <span class="textStudyDescription">Poise</span>
</td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">17</span> <span class="textStudyDescription">Use
of Microphone</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">18</span> <span class="textStudyDescription">Use
of Bible in Replying</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">19</span> <span class="textStudyDescription">Use
of Bible Encouraged</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">20</span> <span class="textStudyDescription">Scriptures
Effectively Introduced</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">21</span> <span class="textStudyDescription">Scriptures
Read With Proper Emphasis</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">22</span> <span class="textStudyDescription">Scriptures
Correctly Applied</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">23</span> <span class="textStudyDescription">Practical
Value Made Clear</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">24</span> <span class="textStudyDescription">Choice
of Words</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">25</span> <span class="textStudyDescription">Use
of an Outline</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">26</span> <span class="textStudyDescription">Logical
Development of Material</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">27</span> <span class="textStudyDescription">Extemporaneous
Delivery</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">28</span> <span class="textStudyDescription">Conversational
Manner</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">29</span> <span class="textStudyDescription">Voice
Quality</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">30</span> <span class="textStudyDescription">Interest
Shown in the Other Person</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">31</span> <span class="textStudyDescription">Respect
Shown to Others</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">32</span> <span class="textStudyDescription">Expressed
With Conviction</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">33</span> <span class="textStudyDescription">Tactful
Yet Firm</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">34</span> <span class="textStudyDescription">Upbuilding
And Positive</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">35</span> <span class="textStudyDescription">Repetition
for Emphasis</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">36</span> <span class="textStudyDescription">Theme
Developed</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">37</span> <span class="textStudyDescription">Main
Points Made to Stand Out</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">38</span> <span class="textStudyDescription">Interest
- Arousing Introduction</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">39</span> <span class="textStudyDescription">Effective
Conclusion</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">40</span> <span class="textStudyDescription">Accuracy
of Statement</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">41</span> <span class="textStudyDescription">Understandable
to Others</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">42</span> <span class="textStudyDescription">Informative
to Your Audience</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">43</span> <span class="textStudyDescription">Use
of Assigned Material</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">44</span> <span class="textStudyDescription">Effective
Use of Questions</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">45</span> <span class="textStudyDescription">Illustrations
/ Examples That Teach</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">46</span> <span class="textStudyDescription">Illustrations
From Familiar Situations</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">47</span> <span class="textStudyDescription">Effective
Use of Visual Aids</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">48</span> <span class="textStudyDescription">Reasoning
Manner</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">49</span> <span class="textStudyDescription">Sound
Arguments Given</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">50</span> <span class="textStudyDescription">Effort
To Reach the Heart</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
<tr>
<td class="columnStudyPoint"><span class="textStudyPoint">51</span> <span class="textStudyDescription">Accurately
Timed, Properly Proportioned</span> </td>
<td class="columnDate"> </td>
<td class="columnDate"> </td>
</tr>
</table>
</body>
</html>My CSS file sets font sizes and line thicknesses. These are what I am interested in.
The results look fine on my computer running a high resolution (but not UltraHD etc.). I don't have a UltraHD monitor in order to test this out to see if it will work correctly.
Ultimately this webpage will be shown in a CHtmlView browser control so it does not need to be compatible with all mobile devices.
Thank you.
Update
Here you see it in context in my application:
I note the comments state that I should not be specifying font heights myself. I saw this:
https://websemantics.uk/articles/font-size-conversion/
It refers to 1em for 12pt.
Update
Someone has just tried my CHtmlView application on a Ultra HD computer. The preview is fine. But the printing to PDF or a Printer looks like this:
It is cropped.
If I get them to open the same file directly in Internet Explorer and print it it prints correctly to the printer and PDF.
So why is CHtmlView playing up?
来源：https://stackoverflow.com/questions/49284018/how-can-i-make-this-html-css-file-ultrahd-4k-friendly-in-a-chtmlview